Requirejs: Path Summary for module loading (require) and definition (define) __JS

Children's shoes that have been exposed to Requirejs may know that module-dependent declarations are an important step either by defining modules through define or by require to load modules. And it involves the module path resolution, for beginners, sometimes it will make people feel very confused.

Suppose our directory structure is as follows:

Demo.html
Js/main.js
Js/lib.js
Js/util.js
Js/common/lib.js
Js/common/jqury/lib.js
Common/lib.js

The following two examples, look very simple, but it should be most of the same as I do not have the way to identify the dependent module eventually converted to the path. The reason is that there is not enough contextual information available here ... (= =b don't hit me)

require example:

Main.js
require (['./util '], function () {
    //do STH
});

Define Example:

define (['./util '], function () {
   //do STH 
});

Next, we step by step through the concrete example to see, Requirejs in the different scene, is how to parse the module path. BaseURL: The foundation of the Foundation

In the Requirejs module path analysis, BaseURL is a very basic concept, leaving it, the basic play does not turn, so here is a brief introduction. Simply put, BaseURL specifies a directory, and then Requirejs based on this directory to look for dependent modules.

Take a chestnut, add the Requirejs in demo.html, and declare the Data-main attribute on Requirejs's script, then Requirejs will do two events after loading: Load Js/main.js Set BaseURL to the path of the Data-main specified file, this is js/

<script src= "Js/require.js" data-main= "Js/main.js" ></script>

So, the actual path of the dependent Lib module below is js/lib.js

Main.js

Require ([' lib '], function (lib) {
    //do STH
});

Of course, in addition to the Data-main attribute, you can also manually configure BaseURL, such as the following example. It needs to be emphasized that:

If the BaseURL is not specified through the Data-main property, and the declaration BaseURL is not displayed through config, then baseurl the path to the page where the Requirejs is loaded by default

Demo.html

<script src= "Js/require.js" ></script>
<script src= "Js/main.js" ></script>

Main.js

Requirejs.config ({
  baseurl: ' JS '
});

Require ([' lib '], function (lib) {
  //do STH
});

BaseURL + path: Make reliance more concise and flexible

For example, we loaded the following module (a lot of fruit ...). And looking at the list of dependencies that follows a long string, maybe you can see the problem at once: Cost: Each loaded module has a long common/fruits in front of it: Maybe one day the directory name changes (not uncommon in large projects), imagine the amount of work that the directory structure changes bring

Requirejs.config ({
  baseurl: ' JS '
});

Load a bunch of fruit
require [' common/fruits/apple ', ' common/fruits/orange ', ' common/fruits/grape ', ' common/fruits/ Pears '], function (Apple, Orange, Grape, pears) {
  //do STH
});

For a modular loader, the two points above clearly need to be taken into account. So Requirejs's author provides paths this configuration item. Let's look at the modified code.

Requirejs.config ({
  baseurl: ' js ',
  paths: {
    fruits: ' common/fruits '
  }
});

Load a bunch of fruit
require ([' fruits/apple ', ' fruits/orange ', ' fruits/grape ', ' fruits/pears '], function (apple, Orange, Grape, pears) {
  //do STH
});

In fact, there is a common prefix and no savings in code, but when the project structure changes, the benefits are reflected. Suppose Common/fruits one day suddenly become common/third-party/fruits, that is very simple, change paths on it.

Requirejs.config ({
    baseurl: ' js ',
    paths: {
        fruits: ' common/third-party/fruits '
    }
});

paths: Simple but important to remember

An example of path is illustrated in the previous section. Here's another example that shows the rules for matching paths under the next three cases
> Apple: Not defined in the paths rule, so for BaseURL + apple.js => js/apple.js Common/fruits:common has been defined in paths, so BaseURL + common/f Ruits + apple.js => js/common/fruits/apple.js ... /common/apple:common Although it has been defined in paths, but. /common/apple does not begin with common, so it is BaseURL +. /common/apple.js => Common/apple.js

Requirejs.config ({
  baseurl: ' js ',
  paths: {
    common: ' Common/fruits '
  }
});

From left to right, the loaded paths are Js/lib.js, js/common/jquery/lib.js, common/lib.js
require ([' Apple ', ' common/apple ', ' ...]. /common/apple '], function () {
  //do something
});

./module: A relative path that makes people wonder

It should be said that this is the most confusing place. Demo 1

Js/main.js

Requirejs.config ({
  baseurl: ' Js/common '
});
The path that is actually loaded is/lib.js
require (['./lib ', ' lib '], function (lib) {
  lib.say (' hello ');
};

Demo 2

Simply change the above example to see:

When module A is defined by define, module a relies on module B, and if it is a./module form, the path of module B is based on the directory where module a resides.

Js/main.js

Requirejs.config ({