Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Requirejs: paths vs map

Tags:

requirejs

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"},     }   }); 
like image 475
Shane H Avatar asked Oct 07 '13 03:10

Shane H


People also ask

Is RequireJS still relevant?

RequireJS has been a hugely influential and important tool in the JavaScript world. It's still used in many solid, well-written projects today.

What is the main purpose of the RequireJS framework?

RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.

What is Shim RequireJS?

As per RequireJS API documentation, shim lets you. Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. - Configuring dependencies.

What is a RequireJS module?

RequireJS loads each dependency as a script tag, using head. appendChild(). RequireJS waits for all dependencies to load, figures out the right order in which to call the functions that define the modules, then calls the module definition functions once the dependencies for those functions have been called.


2 Answers

From the RequireJS Docs "In addition, the paths config is only for setting up root paths for module IDs, not for mapping one module ID to another one."

This means "paths" is meant for mapping just the path to your resource when it is not in the default location (baseUrl). I guess this is what you were trying to do.

On the other hand, with "map" you can have several versions of your resource (foo1, foo2...) which you can map to be loaded from different paths (i.e. you want to load foo1 from a desktop browser and foo2 which is a modification of the first one from a mobile browser).

So, unless you have different versions of foo I would use "path" although you are right and "map" would also work in that case.

like image 50
Carlos Ruana Avatar answered Sep 29 '22 06:09

Carlos Ruana


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.

like image 26
Dean Radcliffe Avatar answered Sep 29 '22 05:09

Dean Radcliffe