Skip to content
intermediate Phase 55 · Frontend JavaScript

RequireJS in Magento

Understanding RequireJS configuration in Magento 2: requirejs-config.js, paths, shim, dependencies, and async loading

45m
0 problems
Topic Progress 0%

RequireJS Configuration

requirejs-config.js Location

view/frontend/requirejs-config.js

Basic Configuration

var config = {
    map: {
        '*': {
            'customModule': 'Vendor_Module/js/custom-module'
        }
    },
    paths: {
        'customLib': 'Vendor_Module/js/lib/custom'
    },
    shim: {
        'customLib': {
            'deps': ['jquery']
        }
    }
};

Configuration Sections

Section Purpose
map Alias to path mapping
paths Named paths to JS files
shim Dependencies for non-AMD modules
deps Global dependencies
config Configuration values

Map Section

var config = {
    map: {
        '*': {
            'moduleAlias': 'Vendor_Module/js/module'
        },
        'specificModule': {
            'moduleAlias': 'Vendor_Module/js/specific-module'
        }
    }
};
  • *: Applies to all modules
  • specificModule: Only applies when loaded by specificModule

Paths and Shim

Paths Configuration

var config = {
    paths: {
        'myModule': 'Vendor_Module/js/my-module',
        'myLib': 'Vendor_Module/js/lib/my-library',
        'vendor/custom': 'Vendor_Module/js/vendor/custom'
    }
};

// Now you can use:
require(['myModule'], function(module) {
    // Module loaded
});

Shim Configuration

For non-AMD modules (jQuery plugins, etc.):

var config = {
    shim: {
        'jquery/plugin': {
            'deps': ['jquery'],
            'exports': 'jQuery.fn.pluginName'
        },
        'vendor/library': {
            'deps': ['jquery'],
            'exports': 'LibraryName'
        }
    }
};

Shim Attributes

Attribute Description
deps Dependencies to load first
exports Global variable exported
init Initialization function

Third-Party Libraries

var config = {
    paths: {
        'moment': 'Vendor_Module/js/moment.min',
        'chart': 'Vendor_Module/js/chart.min'
    },
    shim: {
        'chart': {
            'deps': ['moment']
        }
    }
};

Async Loading

Basic RequireJS Usage

require(['jquery', 'myModule'], function($, myModule) {
    'use strict';
    
    $(function() {
        myModule.init();
    });
});

Asynchronous Loading

// Load module on demand
require(['myModule'], function(myModule) {
    myModule.init();
});

// Multiple modules
require(['module1', 'module2'], function(mod1, mod2) {
    mod1.init();
    mod2.init();
});

// With error handling
require(['myModule'], function(myModule) {
    myModule.init();
}, function(error) {
    console.error('Failed to load module:', error);
});

Dynamic Loading

// Load based on condition
if (needsSpecialFeature) {
    require(['specialModule'], function(special) {
        special.init();
    });
}

// Load on user interaction
$('#button').on('click', function() {
    require(['lazyModule'], function(lazy) {
        lazy.init();
    });
});

Require vs Define

// define() - creates a module
define(['jquery'], function($) {
    'use strict';
    
    return function(config) {
        // Module code
    };
});

// require() - loads a module
require(['myModule'], function(myModule) {
    myModule.init();
});

Magento RequireJS Best Practices

Module Structure

// Vendor_Module/js/module-name.js
define([
    'jquery',
    'mage/url',
    'mage/translate'
], function($, url, $t) {
    'use strict';
    
    return function(config) {
        var urlBuilder = url.build('module/controller/action');
        
        return {
            init: function() {
                // Initialization
            }
        };
    };
});

Common Magento Modules

Module Purpose
jquery jQuery library
mage/url URL builder
mage/translate Translation
mage/storage AJAX requests
mage/modal Modal dialog
Magento_Ui/js/lib/knockout KnockoutJS

Configuration Values

// In requirejs-config.js
var config = {
    config: {
        'Vendor_Module': {
            'apiUrl': 'https://api.example.com',
            'debug': false
        }
    }
};

// In module
define(['Vendor_Module'], function(config) {
    console.log(config.apiUrl); // https://api.example.com
});

Debugging RequireJS

// Enable debug mode
require.config({
    baseUrl: 'pub/static/frontend/Vendor/Theme/en_US',
    urlArgs: 'v=' + new Date().getTime()
});

// Check loaded modules
console.log(Object.keys(require.s.contexts._.defined));

Quiz

1. What is the purpose of requirejs-config.js?

Question 1 options

2. What does the 'shim' configuration do?

Question 2 options

3. What is the difference between require() and define()?

Question 3 options

Flashcards

Question

Where is RequireJS configured?

Click to reveal answer

Answer

view/frontend/requirejs-config.js

Question

What does the map section do?

Click to reveal answer

Answer

Maps aliases to module paths

Question

When to use shim?

Click to reveal answer

Answer

For non-AMD modules that need dependency declarations

Question

How to load a module asynchronously?

Click to reveal answer

Answer

require(['moduleName'], function(module) { ... });

Question

What is a common Magento RequireJS module?

Click to reveal answer

Answer

mage/url for URL building

Revision Notes

Key Takeaways

  • 1. requirejs-config.js configures module loading
  • 2. map section creates aliases, paths defines locations
  • 3. shim handles non-AMD modules
  • 4. require() loads modules, define() creates them
  • 5. Magento provides common modules like mage/url, mage/translate

Interview Tips

  • • Explain the RequireJS configuration sections
  • • Know when to use paths vs map vs shim
  • • Discuss async loading patterns
  • • Be ready to configure RequireJS for a module

Cheat Sheet

requirejs-config.js:
  map: { '*': { 'alias': 'path' } }
  paths: { 'name': 'path/to/file' }
  shim: { 'file': { 'deps': ['jquery'] } }

Usage:
  define(['dep'], function(dep) { return {}; });
  require(['module'], function(mod) { mod.init(); });

Common modules:
  jquery, mage/url, mage/translate, mage/storage