'Requirejs: paths vs map

Trying to understand where it's right to use "map" with a wildcard vs "paths".

Looking at the require source (but certainly not being 100% fluent with it) it seems like there would functionally be no difference between these two snippets. Is that true?

Using Paths:

  require.config({
    baseUrl: "include/js/",
    paths: {
     foo: "stuff/foo",
    }
  });

Using Map:

  require.config({
    baseUrl: "include/js/",
    map: {
     '*': {foo: "stuff/foo"},
    }
  });
requirejs


Solution 1:[1]

I have found one difference, and that's in the case of requirejs loader plugins, example Example: define(['cs!module'], function(){...} ) for CoffeeScript.

Using the map:* part of config for declaring the plugins (and paths for dependent modules) worked in the browser. However, in Node, Requirejs would fail to locate the loader plugins unless they were under paths.

In the end, for the sake of being able to run the same config in Node and the browser, I got rid of the map:* section, and declared everything in paths and it works just fine for me now, even if I'm still hoping to get some clarification on why.

Solution 2:[2]

There is also one other important difference with the map config. You define a prefix that will be used in mappings.

For your example this would mean that foo will be mapped to stuff/foo but also foo/bar/baz/bam will be mapped to stuff/foo/bar/baz/bam.

Solution 3:[3]

Magento 2 docs

The paths configuration, similar to map, is used for aliasing not just any real AMD module that calls define(), but also any JS file (even from a URL), HTML templates, etc. Magento uses this to alias URLs and third party libraries.

paths: {
    'alias': 'library/file',
    'another-alias': 'https://some-library.com/file'
}

When setting a path to an array with multiple script sources, if the first script fails to load, the next is used as a fallback.

var config = {
    ...
    paths: {
        'alias': [
            'https://some-library.com/file',
            '<vendor_name>_<module_name>/js/file'
        ]
    }
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dean Radcliffe
Solution 2
Solution 3 Victor S.

Related Questions