Adding multiple JS files in Magento 2 using requirejs via custom theme

Question

I have successfully added one js file using requirejs-config.js.

Code in requirejs-config.js

var config = {
    //when load requirejs will load following files also
    deps: [
        "js/main" //path to our main.js file. .js extension is not required.
    ]
}

Code in main.js

define([
        "jquery"
    ],
    function($)
    {
        "use strict";

        //our code goes here..
        console.log(" ====== Coming from Ved>Mytheme>Magento_Theme>web>js>main.js ====== ");

    }//main function ends here
);

But now I want to add multiple JS files:

1. modernizer.js
2. vendor.js [ This contains all 3rd party js. For ex. jQuery fancybox, flexslider, etc. ]
3. main.js [ This is already added but this should include after vendor.js ]

All above js files are present at:
vendor_name/theme_name/Magento_Theme/web/js

Answer 1

Using deps: [...] in the requirejs-config.js suggests that your file will be loaded on every page. If you want to include your script in specific place You should use map: {"*": {...}}. You can include as many scripts as You need:

var config = {
    map: {
        "*": {
            "script1": "js/script1",
            "script2": "js/script2"
        }
    }
};

Then You can use this scripts with data-mage-init attribute or with <script type="text/x-magento-init" /> tag. Read more

Modernizer You can find here vendor/magento/magento2-base/lib/web/modernizr/modernizr.details.js.

To include vendor plugins/libraries use the same way (with map: {"*": {...}}) and define them if needed in your script:

define(['jquery', 'some-plugin'], function($, some-plugin) {...});

The order of scripts including is not important because we use Asynchronous Module Definition (AMD).

Answer 2

Here is my code:

requirejs-config.js:

var config = {

     paths: {
        'flexslider': 'js/jquery.flexslider-min',
        'fancybox': 'js/jquery.fancybox' 
    },

    //when load requirejs will load following files also
    deps: [
        "js/main" //path to our main.js file. .js extension is not required.
    ],

    shim: {
        'flexslider' : 
        {
            deps: ['jquery']
        },
        'fancybox' : 
        {
            deps: ['jquery']
        }
    }
}

main.js :

    define([
            "jquery",
            "flexslider",
            "fancybox"
        ],
        function($)
        {
            "use strict";
            console.log(" ====== main.js is loaded====== ");
            $(window).load(function() 
            {
              //your code goes here..
            });
            $(document).ready(function() 
            {
              //your code goes here..
            });
        });