谈谈 external 模式的打包

模块化在前端日新月异的工程化工具的推动下已经摆脱了前端模块加载器（SeaJS、RequireJS）的束缚，现在通常的方案是使用 browserify 或 webpack 来将模块化的文件打包，然后直接在浏览器端使用。

但是通常的打包策略是将整个项目打包成一个文件 bundle.js，默认情况下 bundle.js 中囊括了所有的依赖，包括第三方的从 node_modules 中加载的文件，这会造成 bundle.js 非常臃肿，而且在生产环境中不能很好的利用静态资源的缓存策略。这些打包技术在国外非常火，生产环境提供一个 bundle.js 的做法在国外的网络环境下毫无压力，但是国内的网络环境和国外的没法比，为了下载的性能还是建议分开打包。

分开打包还有一个好处就是，目前的前端开发环境现在都流行使用监测文件的变化而使用 livereload 技术，这也意味着会存在实时动态打包的需求，分开打包对于实时打包的速度有质的影响，对于基本不会变化的第三方模块没有必要每次做实时动态打包的时候都包含进去。

browserify 和 webpack 提供了一种 external 的打包模式。external 的打包模式会将第三方的模块打包成一个独立的 js 文件，这样就能和项目本身的文件分开来。当然，这并不是打包成一个 UMD 模块。打包的这个模块不会提供全局命名空间，必须将该文件使用 script 标签的形式加载到页面中，项目文件如果要使用这个 external 模块，可以直接执行 require 来获取模块向外提供的接口。

<script src="react"></script>
<script src="react-dom"></script>
<script src="react-router"></script>

<script>
const React from 'react';
const ReactDOM from 'react-dom';
const ReactRouter from 'react-router';
</script<

那么如何将 node_modules 中的第三方的模块打包成 external 模式的包呢？这里以 browserify 为例来做说明。
首先假定已经将模块使用 npm install 的方式安装到了项目中，使用下面的命令即可进行 external 模式的打包。

$ browserify -r react-router -x react > react-router.js

现在来说说上面命令的具体含义：

-r 是 –require 的缩写，这里定义从哪里加载要打包的文件，可以是文件路径也可以是位于 node_modules 中的模块（提供的是模块名）。 -x 是 –external 的缩写，react-router 这个模块依赖了 react，在这里想将 react 也作为一个 external 模式的包来使用。 > 是最后要生成的文件路径。

如果其它包在打包的时候依赖了 react-router，必须使用 –external 来指明 react-router 是一个 external 的包，这样在打包的时候就会忽略这个包并且在打好包后还能正常使用。上面的命令 -x react 就是基于此原因。

原载于：雨夜带刀’s Blog
本文链接：http://stylechen.com/external-build.html
如需转载请以链接形式注明原载或原文地址。