Javascript模块加载捆绑器Browserify Webpack和SystemJS用法

转自 http://www.jdon.com/idea/js/javascript-module-loaders.html

Javascript中模块加载器从最初小而简单的LABjs到RequireJS、Browserify、Webpack和SystemJS一直在演进发展。

LAB和curl等最初懒加载Javascript库包的方式虽然解决了浏览器加载大量不必要JS库包造成的堵塞问题，但是不利于维护。

Require.JS

Require是出现在2009年，它完全不同于之前的那些懒加载器，它将脚本标签写入到DOM中，监听完成的事件，然后递归加载依赖：

<script src="tools/require.js" data-main="myAppInit.js" ></script>

…或者如下调用指明的函数名称…

<script src="tools/require.js"></script>
<script>
require(['myAppInit', 'libs/jQuery'], function (myApp, $) { // ...
</script>

上面两个用法不建议同时使用。虽然Require存在各种特殊情况，但是其灵活性和强大性还是支持它成为浏览器端流行的加载器。

Browserify

Browserify允许CommonJS格式模块在前端使用，因此，它不只是一个模块加载器，而是模块捆绑器(bundler)，是一个完整的代码构建段的工具，提供客户端能加载一堆代码的功能。

首先需要node和npm已经安装，获得包：

npm install -g –save-dev browserify

以CommonaJS格式编写你的模块即可。然后使用下面命令捆绑：

browserify entry-point.js -o bundle-name.js

它会递归以此发现entry-point中所有依赖包，然后将它们组装在一个单个文件中：

<script src="bundle-name.js"></script>

对于前端，你可以最小化合并核心代码，然后让可选模块在之后需要时加载，这样即节约了带宽也不影响模块编程功能实现。

Webpack

Webpack遵循Browserify的模块捆绑器路线，但是假如足够多功能来实现构建系统，不仅支持AMD还支持ES6格式，也支持CSS样式和HTML模板。

Webpack运行在一个称为“loaders”的概念上，这是一个插件注册用于处理文件类型，比如，一个loader能处理ES6 transpilation 或SCSS编译。

Loaders将数据喂给一个chunk，chunk开始于一个起点（类似于Browserify的捆绑器），一旦Webpack被设置好，只要配置产生变化，这些chunk会被自动重新产生，这就非常自动化强大。

关于热点模块替代问题，当运行webpack-dev-server，当你修改源码时，它能知道并修改浏览器中的代码，类似于其他源码监控器，它不需要浏览器重新载入或重启，这样就节约大量开发时间。

安装：

npm install -g –save-dev webpack

打包到一个起点文件：

webpack ./entry-point.js bundle-name.js

SystemJS

SystemJS可看成是ES6模块加载器Polyfill的浏览器接口，Polyfill不仅能在浏览器中使用，而且可以在Node环境通过NPM使用。

SystemJS实现类似于RequireJS：

<script src="system.js"></script>
<script>
// 设置我们的 baseURL 引用路径
System.config({baseURL: '/app'
});
// loads /app/main.js
System.import('main.js');
</script>

SystemJS是Angular.js 2.0的推荐加载器，它也支持非JS文件类型，使用systemjs-builder插件工具可以实现捆版和优化文件。

SystemJS 最强大的组件是JSPM，或称为Javascript包管理器，基于ES6模块加载器Polyfill和npm建立，JSPM能够使得isomorphic同构Javascript成为现实。

比较总表如下：

Loader category	Loader module format	Server filers	Server module format	Loader code
Tiny loaders	vanilla JS	和本地文件一样	Same format as local files	curl('entryPoint.js')
RequireJS	AMD	改变且最小化	AMD	requirejs('entryPoint.js',function(eP){/startup code/});
Browserify	CommonJS	改变且最小化	CommonJS inside AMD wrapper	<script src="browserifyBundle.js"></script>
Wabpack	AMD and/or CommonJS (mixed OK)	"Chunked" - Concat and minify into feature groups	Webpack proprietary wrapper	<script src="wabpackChunk.js"></script>
SystemJS	vanilla, AMD, CommonJS, ES6	和本地文件一样	SystemJS proprietary wrapper	System.import('entryPoint.js').then(function(eP){/startup code/});

JavaScript专题 http://www.jdon.com/js.html