Is there a some solution to use npm packages within a Magento 2 module?

Question

The main idea - don't keep JS files which belong to some NPM packages in a module repository?

Maybe someone have some solution of thoughts.

Answer 1

I've added NPM packages to my theme. The packages are installed in the vendor/theme dir/node_modules & then i've symlinked node_modules to vendor/theme dir/web/node_modules

Found at:

(https://github.com/SnowdogApps/magento2-frontools/issues/46#issuecomment-277860180)

Answer 2

Yes, You can use the npm package in your Magento custom module.

I used @imgix/js-core. It is a JavaScript library for generating image URLs with srcset.

I followed the below steps for using the @imgix/js-core npm package in my custom module.

Step1: Go to your web directory in your module.

   app/code/Vendor/Module/view/adminhtml/web

Step2: Run the below command for creating package.json

npm init

Step3: After running npm init command, it generates package.json

{
    "name": "Magento 2 imigix package",
    "version": "1.0.0",
    "description": "this is a test, this is only a test",
    "main": "index.js",
    "scripts":
    {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Imgix",
    "license": "ISC"
}

Step4: Install @imgix/js-core npm package by below command

npm install @imgix/js-core

Step5: It will create node_modules directories and package-lock.json file.

Step6: Add js which you want to use in requirejs-config.js

// File path: app/code/Vendor/Module/view/adminhtml/requirejs-config.js

var config = {
    paths: {
        ImgixClient: 'Vendor_Module/node_modules/@imgix/js-core/dist/imgix-js-core.umd'
    }
};

Step7: Now,You can access the package your module with the below code

require([
    'jquery',
    'ImgixClient'
], function ($, ImgixClient) {
    .....
    // Your code

    // Generate srcset

    const client = new ImgixClient({
      domain: 'testing.imgix.net',
      secureURLToken: 'my-token',
      includeLibraryParam: false,
    });

    const srcset = client.buildSrcSet(
      'image.jpg',
      {
        h: 800,
        ar: '3:2',
        fit: 'crop',
      },
      {
        devicePixelRatios: [1, 2],
      },
    );

    console.log(srcset);
    
    .....
}):

Step8: Now, srcset generated to img tag, Check this screenshot for the result.

I have used @imgix/js-core npm package in my custom module.

Thanks.

Answer 3

You can install the node_modules directly in your theme, you don't have to create a symlink to get your node package working. There are a few places and ways to do this, but this works for me.

Create a package.json file with npm init in your web dir app/design/frontend/<vendor>/<theme>/web/package.json. This will make it easier to install the packages and manage them in the future. This will also localize the install so that everything is in you web dir.

Install the package like normal, like npm install shufflejs and check you have the dep in you package.json file.

"dependencies": {
    "shufflejs": "^5.3.0"
}

You can then link everything together with your requireJS file.

//File: app/design/frontend/<vendor>/<theme>/requirejs-config.js
var config = {
    map: {
        '*': {
            collectionsShuffle:'js/collections-shuffle',
        }
    },
    paths: {
        shufflejs: './node_modules/shufflejs/dist/shuffle'
    }
};

You now have access to the package anywhere in your theme with:

require([
    'jquery',
    'shufflejs'
], function ($, shufflejs) {})

You might have some issues fitting in the connection with the package with the "magento" way, but play with it and you should be able to get things working.

The only downside of this approach is that node_modules will be tracked by git, which can be an issue in some cases, but as long as the packages are small, you will be fine. You can also set up a .gitignore if that is an issue.

I wrote up a more detailed walk through, you can check that out here