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

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 categoryLoader module formatServer filersServer module formatLoader code
Tiny loadersvanilla JS和本地文件一样Same format as local filescurl('entryPoint.js')
RequireJSAMD改变且最小化AMDrequirejs('entryPoint.js',function(eP){/*startup code*/});
BrowserifyCommonJS改变且最小化CommonJS inside AMD wrapper<script src="browserifyBundle.js"></script>
WabpackAMD and/or CommonJS (mixed OK)"Chunked" - Concat and minify into feature groupsWebpack proprietary wrapper<script src="wabpackChunk.js"></script>
SystemJSvanilla, AMD, CommonJS, ES6和本地文件一样SystemJS proprietary wrapperSystem.import('entryPoint.js').then(function(eP){/*startup code*/});

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值