Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
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格式编写你的模块即可。然后使用下面命令捆绑：
npm install -g –save-dev browserify
它会递归以此发现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成为现实。
比较总表如下：
