最后运行bundle(createGraph('./example/entry.js')) ,输出如下:
[fn,mapping] =function localRequire(name) {
</span><span style="color: #0000ff">return</span><span style="color: #000000"> require(mapping[name]);
}
</span><span style="color: #0000ff">const</span> module =<span style="color: #000000"> { exports: {} };
fn(localRequire,module.exports);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> module.exports;
}
require(<span style="color: #800080">0<span style="color: #000000">);
})({
<span style="color: #800080">0<span style="color: #000000">: [
function (require,exports) {
<span style="color: #800000">"<span style="color: #800000">use strict<span style="color: #800000">"<span style="color: #000000">;
</span><span style="color: #0000ff">var</span> _message = require(<span style="color: #800000">"</span><span style="color: #800000">./message.js</span><span style="color: #800000">"</span><span style="color: #000000">);
</span><span style="color: #0000ff">var</span> _message2 =<span style="color: #000000"> _interopRequireDefault(_message);
function _interopRequireDefault(obj) { </span><span style="color: #0000ff">return</span> obj && obj.__esModule ? obj : { <span style="color: #0000ff">default</span><span style="color: #000000">: obj }; }
console.log(_message2.</span><span style="color: #0000ff">default</span><span style="color: #000000">);
},{ </span><span style="color: #800000">"</span><span style="color: #800000">./message.js</span><span style="color: #800000">"</span>: <span style="color: #800080">1</span><span style="color: #000000"> },</span><span style="color: #800080">1</span><span style="color: #000000">: [
function (require,exports) {
</span><span style="color: #800000">"</span><span style="color: #800000">use strict</span><span style="color: #800000">"</span><span style="color: #000000">;
Object.defineProperty(exports,</span><span style="color: #800000">"</span><span style="color: #800000">__esModule</span><span style="color: #800000">"</span><span style="color: #000000">,{
value: </span><span style="color: #0000ff">true</span><span style="color: #000000">
});
</span><span style="color: #0000ff">var</span> _name = require(<span style="color: #800000">"</span><span style="color: #800000">./name.js</span><span style="color: #800000">"</span><span style="color: #000000">);
exports.</span><span style="color: #0000ff">default</span> = <span style="color: #800000">"</span><span style="color: #800000">Hello </span><span style="color: #800000">"</span> + _name.name + <span style="color: #800000">"</span><span style="color: #800000">!</span><span style="color: #800000">"</span><span style="color: #000000">;
},{ </span><span style="color: #800000">"</span><span style="color: #800000">./name.js</span><span style="color: #800000">"</span>: <span style="color: #800080">2</span><span style="color: #000000"> },</span><span style="color: #800080">2</span><span style="color: #000000">: [
function (require,{
value: </span><span style="color: #0000ff">true</span><span style="color: #000000">
});
</span><span style="color: #0000ff">var</span> name = exports.name = <span style="color: #800000">'</span><span style="color: #800000">world</span><span style="color: #800000">'</span><span style="color: #000000">;
},{},})</span></pre>
这段代码将能够直接在浏览器运行,输出“Hello world!”。
至此,整一个打包工具已经完成。
归纳总结
经过上面几个步骤,我们可以知道一个模块打包工具,第一步会从入口文件开始,对其进行依赖分析,第二步对其所有依赖再次递归进行依赖分析,第三步构建出模块的依赖图集,最后一步根据依赖图集使用CommonJS 规范构建出最终的代码。明白了当中每一步的目的,便能够明白一个打包工具的运行原理 (编辑:衡阳站长网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|