requirejs: path when the module is loaded (the require) and definitions (DEFINE) understood

To the new intern at JS popularity of the basics, see good article

Reprinted https://blog.csdn.net/xuxiaoping1989/article/details/52384778

Contact requirejs of children's shoes may know, whether it is defined by the module define, or to load modules require, module dependent statement is a very important step. Of which related to the module path resolution, for the novice, sometimes people will feel very confused.

We assume that the directory structure is as follows:

demo.html 
js/require.js 
js/main.js 
js/lib.js                               =>alert('js/lib')
js/util.js                              =>alert('js/util')
js/common/lib.js              =>alert('s/common/lib')
js/common/jqury/lib.js    =>alert('js/common/jqury/lib')
common/lib.js                  =>alert('common/lib')

baseUrl: basic foundation of
the module's path resolution requirejs, baseUrl is a very basic concept, leaving it basically could not handle, so here briefly. Simply put, baseUrl specify a directory, then requirejs Based on this directory to find the dependent modules.
For chestnuts, loaded requirejs in demo.html years, a statement that data-main attribute on the script requirejs where, then, after requirejs loaded down, it will do two things:
1), to load JS / main.js
2) , baseUrl path specified for the data-main file is located, here js /

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

Then, the following dependence of the actual path of the module lib js / lib.js

require(['lib'], function(Lib){
// do sth
});

Of course, in addition to data-main attribute, you can manually configure baseUrl, such as the following example. It is emphasized that:
If there is no data-main attribute specifies baseUrl through, did not show config statement baseUrl by the way, so that the page is loaded by default baseUrl requirejs the path where the
index.html (index.html point where at this time of baseUrl path)

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

main.js

require(['js/lib'], function(lib){
<pre name= "code" class="html"><span style="white-space:pre"> </span>lib.lib() //'js/lib'

});

baseUrl + path: Let rely more concise, flexible,
for example, we loaded a bunch of the following modules (a lot of fruit ...), looking down a long list of dependency list, you might suddenly see the problem:
1), effortless: the front of each module has loaded long the Common / Fruits
2), difficult to maintain: maybe one day the directory name had changed (and is not rare in large-scale projects), imagine the directory structure to bring change workload

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 module loader, the above said these two issues clearly need be taken into account. So requirejs authors provide paths this configuration item. We look at the revised 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, it is less a common prefix, did not save much code, but when the project structure changes, the benefits it embodies. Assume common / fruits one day suddenly turned into a common / third-party / fruits, it is very simple, down paths change it.