4

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.

3 Answers 3

2

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)

4

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.

Directory structure

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.

enter image description here

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

Thanks.

1
  • Hello @dipak i have try this way but see error into the console like this Uncaught SyntaxError: Cannot use import statement outside a module (at defaultConfig.js:1:1) can you please help me? Jan 17 at 7:25
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.