browserify 的原理是什么?
发布于 10 年前 作者 yakczh 6666 次预览 最后一次回复是 10 年前 来自 问答
比如 testmod.js
module.exports = function(){
return 'test';
}
browserify testmod.js -o build/out.js 后是这样
B(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
module.exports = function(){
return 'test';
}
},{}]},{},[1]);
格式化一下
(function e(t, n, r) {
function s(o, u) {
if (!n[o]) {
if (!t[o]) {
var a = typeof require == "function" && require;
if (!u && a) return a(o, !0);
if (i) return i(o, !0);
var f = new Error("Cannot find module '" + o + "'");
throw f.code = "MODULE_NOT_FOUND",
f
}
var l = n[o] = {
exports: {}
};
t[o][0].call(l.exports,
function(e) {
var n = t[o][1][e];
return s(n ? n: e)
},
l, l.exports, e, t, n, r)
}
return n[o].exports
}
var i = typeof require == "function" && require;
for (var o = 0; o < r.length; o++) s(r[o]);
return s
})({
1 : [function(require, module, exports) {
module.exports = function() {
return 'test';
}
},
{}]
},
{},
[1]);
有没有大神解释一下
1 回复
新手,有错误请指正,勿喷。
其实很多时候,觉得代码很晦涩难懂,个人觉得很大一部分原因是:
a,b,c,d,看得头昏脑涨,晕头转向。(function(){})()这类匿名函数写法。callapply等改变this的方法。那么我们不妨逐步将代码改造成我们(好吧,也许只是我)比较好阅读的写法。
去除匿名函数
这一步后,抛开
function s(o, u)先,其实代码几乎可以认为简化成了到了这一步,代码结构已经变得非常清晰,for循环里执行s方法而已。
我们代入变量值,详细分析下
function s。代入变量值
在这个例子里,这段代码就相当于执行
s(1);而已。就是这么easy~
再来看
function s。于是,我们可以先把无关的一大段if代码删掉吧,好看点。
到了现在,代码唯一的难点,就是call的用法了。
call的用法
一句话,call 可以改变this的指向。关于call和apply以及bind,请网上搜索自行学习。
我们先把call关键字替换掉吧。
或者写出这样,你会开心点?
再次回到正文,看这段代码,继续代入变量