打包工具的核心原理（转自：https://juejin.im/entry/5b223ebd51

发布时间：2020-12-24 13:54:44 所属栏目：资源来源：网络整理

导读：打包工具就是负责把一些分散的小模块，按照一定的规则整合成一个大模块的工具。与此同时，打包工具也会处理好模块之间的依赖关系，最终这个大模块将可以被运行在合适的平台中。打包工具会从一个入口文件开始，分析它里面的依赖，并且再进一步地分析依赖中的

最后运行bundle(createGraph('./example/entry.js'))，输出如下：

[fn,mapping] =

function localRequire(name) {
  </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; require(mapping[name]);
}

</span><span style="color: #0000ff"&gt;const</span> module =<span style="color: #000000"&gt; { exports: {} };

fn(localRequire,module.exports);

</span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; module.exports;

}

require(0);
})({
0: [
function (require,exports) {
"use strict";

  </span><span style="color: #0000ff"&gt;var</span> _message = require(<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;./message.js</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;);

  </span><span style="color: #0000ff"&gt;var</span> _message2 =<span style="color: #000000"&gt; _interopRequireDefault(_message);

  function _interopRequireDefault(obj) { </span><span style="color: #0000ff"&gt;return</span> obj &amp;&amp; obj.__esModule ? obj : { <span style="color: #0000ff"&gt;default</span><span style="color: #000000"&gt;: obj }; }

  console.log(_message2.</span><span style="color: #0000ff"&gt;default</span><span style="color: #000000"&gt;);
},{ </span><span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;./message.js</span><span style="color: #800000"&gt;"</span>: <span style="color: #800080"&gt;1</span><span style="color: #000000"&gt; },</span><span style="color: #800080"&gt;1</span><span style="color: #000000"&gt;: [
function (require,exports) {
  </span><span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;use strict</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;;

  Object.defineProperty(exports,</span><span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;__esModule</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;,{
    value: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;
  });

  </span><span style="color: #0000ff"&gt;var</span> _name = require(<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;./name.js</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;);

  exports.</span><span style="color: #0000ff"&gt;default</span> = <span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;Hello </span><span style="color: #800000"&gt;"</span> + _name.name + <span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;!</span><span style="color: #800000"&gt;"</span><span style="color: #000000"&gt;;
},{ </span><span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;./name.js</span><span style="color: #800000"&gt;"</span>: <span style="color: #800080"&gt;2</span><span style="color: #000000"&gt; },</span><span style="color: #800080"&gt;2</span><span style="color: #000000"&gt;: [
function (require,{
    value: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;
  });
  </span><span style="color: #0000ff"&gt;var</span> name = exports.name = <span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;world</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;;
},{},})</span></pre>

这段代码将能够直接在浏览器运行，输出“Hello world!”。

至此，整一个打包工具已经完成。

归纳总结

经过上面几个步骤，我们可以知道一个模块打包工具，第一步会从入口文件开始，对其进行依赖分析，第二步对其所有依赖再次递归进行依赖分析，第三步构建出模块的依赖图集，最后一步根据依赖图集使用CommonJS规范构建出最终的代码。明白了当中每一步的目的，便能够明白一个打包工具的运行原理

（编辑：新余站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/5

首页