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成为现实。

 

比较总表如下:

Javascript包加载器捆绑器对比表

Javascript专题

 

 

猜你喜欢