I have created banner slider module for magento 2. I have called JS file using following ways and its working fine. In block class I created following function

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(

and this function is called in bannerslider.phtml file as following manner.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

But, according to jQuery dependency mechanism of require.js How I can do it ?

2 Answers 2


Finally, I got the solution for my query. I would like to share it in details as below.

enter image description here

Step 1: Add your module js file under <Vendor>/<Module_Name>/view/<area>/web/js/

e.g. <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Step 2: Create requirejs-config.js file under <Vendor>/<Module_Name>/view/<area>/

e.g. <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Add following code to requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'

Note: you may set your object name as per your choice. In my case I have set as bannerslider and do not add the .js extension to file name in VendorName_ModuleName/js/flexslider

Step 3: Call the function of your module js in .phtml file as following manner.

<script type="text/javascript">
        $(window).load(function() {
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4


Its working fine for me.

Trace : Use Net tab to see requested URL of js file loaded or not.

enter image description here

  • 4
    better to use 'domReady!' plugin instead of $(window).load(), for example require(['jquery','bannerslider', 'domReady!],function($) { ...code execute only after dom load})
    – KAndy
    Oct 9, 2015 at 14:54
  • Yes, it will very useful. Oct 10, 2015 at 14:08
  • @KAndy it depends, if you want the script to execute last, isn't it better to use $(window) ? doesn't that makes the script to run not only when DOM is read, but when all scripts are executed ? Feb 23, 2016 at 10:12
  • And that way is not working for me ... says static/adminhtml/Magento/backend/en_US/gift.js 404 (Not Found) I have cleared the cache and the pub/static... bot nope.. not working Feb 23, 2016 at 10:42
  • scratch that, it is working... domReady! not working though... how can i tell a script to run after all other scripts have been loaded, or that is not existent in current magent2 methodology ? Feb 23, 2016 at 13:22

My way is:

Step 1

Include an extension's base javascript file using layout instructions.

Step 2

Require the extension's other javascript files from the base file with RequireJS:

     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    function($, someOtherLibrary) {
        // custom code here...
  • 1
    got an error require is not defined, because my js is loaded before requirejs
    – simple guy
    Feb 17, 2017 at 9:17

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.