30 minutes to take you into the Requirejs source

Because the recent project wants to reality a single page function, with the react, and then looked at the react route, dug slot gzip 16k? Then I wrote a simple single page (a single page that doesn't support multiple pages, and all the entrances go through rewrite to index.html), more than 200 lines (followed by GitHub).

Then the project is packaged with Webpack, found that the Webpack require.ensure does not support variable loading (at least temporarily not found), that means I have a small number of pages, I have to in main (the portal with a small number of pages in the relationship) such a setback, the leader will spray me.

And then I woke up this morning to see how Requirejs was real.

Good foreplay finished straight into the topic, we all know Requrejs has a data-main configuration, as the name implies is the entrance similar to C,java main function

Main.js

require.config ({    paths: {        ' xm ': ' XM ',        ' adb ': ' DB '    },    +}) Requirejs ([function(XM, db) {    ' main ');    Db.db ();});

Then 2 files were defined, namely Xm.js and Db.js.

// Xm.js function () {    return  {        ' xm ',        +}    });

// Db.js function (XM) {    return  {        function() {            var who =  xm.name;            ' Play ');}}    )

First of all, we stack up the code, at a glance the hills are small

Can see, in fact Requirejs is very simple, only 3 API (according to my understanding, wrong please correct me)

1, Requirejs, introduce the defined module, and execute the code of callback
2, require, only introduced, not executed
3, define, define a module

And see where it's realized.

The first 1000 more lines are the implementation of functions called internally, such as the judgment function ah, whether the array ah, traverse, reverse traversal etc. , too much detail will not be said.

Focus on the implementation of the following Req variable, would like to add some of the points, but found that each line is the focus, as a child teacher let us draw the focus, often half a page of books are painted, rather than draw a embarrassed.

1, here Requirejs is said above the realization of 1
2, config is actually a series of configuration, such as the base path, path (with a short name), Urlargs (the question mark after the timestamp and the like), Shim (no define declared module, global injection) etc.
3, Nexttick is actually a timer, according to your code to join the module, one after another to create a script tag introduced to the page
4, and then introduced require, he will add a version by default, default initialization (note this line req ({}) ), default error prompt and so on
5, the realization of define function

Well, with the above already know require probably have something, and then come together to see some important points of detail.
First of all the code to see data-main this keyword, in fact, is to traverse all tagname for script, find Data-main, and then deal with the path

And then the last line, in fact, is the real main entry initialization.

And then the first time require will automatically introduce main.js through Req.load, based on the data-main with the following processing

The first automatic call Requirejs content is basically the default value, nothing good, come together to see our main.js in the active call Requrejs,

And then go ahead and find out that the last call to the module has a each, and then it calls its own fetch,load to do a sequential load like the main load step

Because of the time, some too thin point is not in-depth one by one-step analysis hope that this article on the beginning to understand the requirejs of the students have helped, thank you to see the finished.

30 minutes to take you into the Requirejs source