Magento2.3: How to load custom JS in custom module?

Question

I have created a custom module and now need to add custom js file into that module. I have read many post about this but not having a clear answer.

Can anyone please help me with this?

Answer 1

Firstly you have to create a requirejs-config.js file in dir Vendor/Module/view/frontend to include your custom js file. I am taking an example of owlCaraulsel js.

var config = {
    paths: {
        'owlcarousel': 'Vendor_Module/js/jquery/owl.carousel.min'
    },
    shim: {
        'owlcarousel': {
            'deps': ['jquery']
        }
    }
};

Now add your js file in dir of the module if its for frontend i.e.

Vendor/Module/view/frontend/web/js/jquery/owl.carousel.min.js

Now you call this in you phtml file:

<script type="text/javascript">
requirejs(['jquery','owlcarousel'], function(jQuery, owlcarousel) {
...
});
</script>

Answer 2

Add a custom JS component

To add a custom JS component (module), take the following steps:

1. Place the custom component source file in one of the following locations:
   • Your theme JS files: /web/js or /_/web/js. In this case the component is available in your theme and its child themes.
   • Your module view JS files: /view/frontend/web/js. In this case the component is available in all modules and themes (if your module is enabled).
2. Optionally, in the corresponding module or theme, create a requirejs-config.js configuration file, if it does not yet exist there and set path for your resource. The RequireJS configuration file can be placed in one of the following locations:
   • Your theme:
   • Module within your theme: /
   • Your module (depending on the needed area - base, frontend, adminhtml): /view/

Replace a default JS component

To use a custom implementation of an existing Magento JS component: Place the custom component source file in one of the following locations:

• Your theme JS files: /web/js
• Your module view JS files: /view/frontend/web/js

Create a RequireJS configuration file requirejs-config.js, having specified the following:

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};

• <default_component>: the name of the default component you replace
• <custom_component>: the name of the custom component

For example, if you want to use custom navigation-menu.js script instead of the default menu widgets, your requirejs-config.js should contain the following:

var config = {
  "map": {
    "*": {
      "menu": "js/navigation-menu",
      "mage/backend/menu": "js/navigation-menu"
    }
  }
};

Place your requirejs-config.js file in one of the following directories (according to the location of your custom script, see step 1 of this procedure):

• Your theme files:
• Your module view files: /view/frontend

This way your custom JS component is used instead of the Magento component in all entries all over the frontend area.

Extend a default JS component

You can add a custom JS component/widget, which will extend a default Magento component/widget.

Extend Magento widget:

To extend a default Magento jQuery widget, create .js with the following contents:

define([
  'jquery',
  'jquery/ui',
  'mage/<widget.name>' // usually widget can be found in /lib/web/mage dir
], function($){

  $.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, { ... });

  return $.<your_namespace>.<your_widget_name>;
});

Where the following notation is used:

• <your_namespace>.<your_widget_name> - the name of your custom widget. According to the jQuery widgets naming convention, must contain a namespace and name.
• mage.<widget.name> - the name of the Magento widget that you extend.

Reference: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/custom_js.html

I hope this will help