Requirejs.config Configuring the paths, the difference between configuration directory and configuration file

Suppose our project structure is as follows:

If the project size is large, then the JS file will be very much, usually we will be organized and grouped according to the directory. In the code above if we want to use Core1.js,Core2.js,Util1.js,util2.js, Service1.js, service2.js these 6 modules. Then I can do the following configuration in Main.js:

Requirejs.config ({    baseUrl: ' Libs ',    paths: {        "core1": ' Cores/core1 ',        "core2": ' Cores/core2 ',        " Util1 ": ' Utils/util1 ',        " util2 ": ' Utils/util2 ',        " Service1 ": ' Services/service1 ',        " Service2 ": ' Services/service2 ',    }}); require (["Core1", "Core2", "Util1", "Util2", "Service1", "service2"], function () {    var core1 = require ("Core1"), var core2 = require ("Core2"), var util1 = require ("Util1"), var util2 = require ("Util2"); var se Rvice1 = require ("Service1"); var Service2 = require ("Service2");});

By configuring the module ID and file path mapping for each module in paths, Requirejs is able to properly load the modules we need. When the JS file is very large, this configuration method is obviously very cumbersome, the workload of the configuration will be very big.

We can also use the following configuration directory to load the required modules.

Requirejs.config ({    baseUrl: ' Libs ',    paths: {        "cores": ' Cores ',        "utils": ' Utils ',        "services": ' Services '}    ); require (["Cores/core1", "Cores/core2", "Utils/util1", "Utils/util2", "Services/service1", " Services/service2 "], function () {    var core1 = require (" Cores/core1 "); var Core2 = require (" Cores/core2 "); var util1 = Require ("Utils/util1"), var util2 = require ("Utils/util2"), var Service1 = require ("Services/service1"); var service2 = Require ("Services/service2");});

you can see how this configuration directory is used to significantly reduce the number of configuration items in paths. If our core2.js depends on the module util1.js, using the configuration file and configuration directory, the Core2.js code is as follows:

Configuring the file in Main.js, it is required to configure the UTIL1 to Module file mapping define (["Util1"],function (util) {  return {name: "haha:" +util.name};});  The directory is configured in Main.js, just configure the mapping of the Utils directory to define (["Utils/util1"],function (util) {  

the benefit of the configuration directory is that you do not need to configure the mapping of each module ID and module JS file in Main.js to reduce the number of configurations in the Main.js. The advantage of the configuration file is that the module ID is simpler and "core1" is clearly shorter than "cores/core1".

Look at the next section of the code, if the "Cores/core1" as a module name, then the following code will be loaded haha.js, if "Cores/core1" as a directory + file name, then the load will be core1.js. The Requirejs load is exactly where a JS it?

Requirejs.config ({    baseUrl: ' Libs ',    paths: {        "cores": ' Cores ',        "utils": ' Utils ',        "services": ' Services ', "cores/core1": "Haha"    }), Require (["Cores/core1", "Cores/core2", "Utils/util1", "Utils/util2", " Services/service1 "," services/service2 "], function () {    var core1 = require (" Cores/core1 "); alert (core1.name);});

It is easy to verify that "cores/core1" is treated as a module name, loaded with haha.js instead of core1.js.

Now we can summarize the Requirejs is how to load the "path/module" format of the module.

1. First see if Requirejs.config () paths is configured with the "path/module" configuration item. If configured,"path/module" is considered to be an ordinary module name. If there is no configuration, then take the second step.

2. Consider "path/module" as a path on the file system, using directories and filenames to determine which modules need to be loaded. If still not found, then Requirejs will error.

Requirejs.config Configuring the paths, the difference between configuration directory and configuration file