File Create
First of all, follow Browserify to install browserify, and follow the way to build an simple bundle of js files with moudels.
As you can see in the Browserify, I build a simple .js file called "main.js" and bundled it.
//main.js
var unique = require('uniq');
var data =[1,2,2,3,4,5,5,5,6];
console.log(unique(data));
Then use browserify to make a bundle
browserify main.js -o bundle.js
Now I get a bundle.js file which I can see how it work out like a complete .js file with all it depandenies.
Structure
First of all, format the js file, you will see the code structure like below:
(function(){
function r(e,n,t){
function o(i,f){
//this is the major which try to run the specific moudule file and return the file's moudule.export
}
for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)
{
//this loop will run every ID in the given list(thes files should be the user js files)
o(t[i]);
}
return o
}
return r;
})()(
{
//this is a object look like a dict use ID to get module
},
{
//this is a object to save all export of modules(so always be empty at the beginning)
},
[1] //this is a list which should be the ID of modules which should run automaticily
);
How it work
function "o" is the major which try to run the specific moudule file and return the file's moudule.export
If you really carefully read the code show you last section, you can easily understand how it working.
- First of all put all codes in a anonymous function then call it
- The anonymous function return another function named "r"
- Call "r" with a dict{ ID : Module Code}, a empty object{} and a list of IDs of user modules in first attribute
- "r" will go into a loop, and in the loop you will see it rotativily call function "o" with every IDs in the last attribute of "r"
- Generally, first user module will be called, in this page, is below:
function (require, module, exports) {
var unique = require('uniq');
var data =[1,2,2,3,4,5,5,5,6];
console.log(unique(data));
}
- When use function "require" in the code, It call function below:
function (r) { var n = e[i][1][r]; return o(n || r) }
This function will get a obj which contain string with a ID like
{ "uniq": 2 }
This is the object just follow the user script module, so can be access through e[i][1[r]. You can see "r" is the name of module, and the object provide the dict of module name with it's ID. This is a useful dict created by Browserify system.
- Then the function will call function "o"
- Function "o" will try to use ID to find the specific module and then recursively read all modules which needed and finally return the export of the specific module.
- User code run successfully.
Important
You will see that the inner code in the above function is very similar to the code I provided in very front this page. But the real code now has been putted into a function by the Browserify.
To find out what the three attribute really is and to understand how it work as normal require,module and exports, we go to the line which call the real module in function "o".
Function Detail
function o(i, f) {
if (!n[i]) {
//for n is nothing at first, here will always be true when first call
if (!e[i]) {
var c = "function" == typeof require && require;
if (!f && c)
return c(i, !0);
if (u)
return u(i, !0);
//find that in the list no moudle function fit the number, try use require to get the moudle directly,
//if no require, can't find module
var a = new Error("Cannot find module '" + i + "'");
throw a.code = "MODULE_NOT_FOUND", a
}
// in the list some thing can be found with the number given
var p = n[i] = { exports: {} };
//set {exports:{}} both to n[i] and p
e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t)
}
return n[i].exports
}
Need complete later, but above is enough for you to understand how Browserify work.(Xia Ban Le)
网友评论