requerejs, webpack, browserify 的对比

更新日期: 2015-12-12 阅读次数: 13288 分类: Javascript

JS 的依赖管理工具真是层出不穷,最近用 React 又发现了两个新工具 Browserify, Webpack。 测试一下其中的异同。

简单的应用场景

现在通过简单的应用场景来看一下,这三个依赖管理工具的异同。

示例来自于 RequireJS 的官网教程

project-directory/
|_ project.html
|_ scripts/
   |_ main.js
   |_ helper/
      |_util.js

使用 RequireJS 进行管理

代码结构如下

project-directory/
|_ project.html
|_ scripts/
   |_ main.js
   |_ require.js 
   |_ helper/
      |_util.js

即,require.js 置于 scripts 的根目录下,与 APP 代码 main.js 平级。将代码

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

置于 body 标签的尾部,以防止加载 js 阻塞了页面的渲染。 这行代码的含义是,在加载完 require.js 之后,再加载 main.js。

main.js 内部代码结构

define(function (require) {
    // 当前函数只有在 util.js 加载完之后才会被调用。
    // 如果 util.js 使用了 define(), 那么只有当 util.js 的依赖都被加载完之后
    // 当前函数才会被执行。
    var util = require('helper/util');

    console.log("Hello RequireJS!");
});
require(["helper/util"], function(util) {
});

为何不用

require(["helper/util"], function(util) {
    // ...
});

这种格式的原因,参考 RequireJS 的语法糖 Simplified CommonJS Wrapping

使用 Browserify 进行管理

Browserify 相对 RequireJS 增加了依赖自动管理的功能,基于 npm, Browserify 可以自动下载一个类库的依赖, 并自动打包依赖到一个文件。这种优势,在不需要依赖太多三方类库的情况下,优势并不明显。

Browserify 最贴心的一点是,将所有依赖加实现打包成一个 js 文件。 并且页面不需要加载 Browserify, 页面只需要加载生成的 js 文件即可。

代码结构 (npm 安装 Browserify, 所以无需在项目中引入)

project-directory/
|_ project.html
|_ scripts/
   |_ main.js
   |_ helper/
      |_util.js

main.js

(function() {
    var util = require('helper/util');
    //...
    console.log("Hello Browserify!");
})();

将代码及依赖打包

browserify main.js -o app.js

然后在 project.html 中加入

    <script src="app.js"></script>

使用 Webpack 进行管理

// TODO

写在最后

这些都不过是工具,再好的工具遇到不靠谱的开发人员也是白搭。 RequireJS 虽然原始,但是 Instagram 依然使用 React 结合 RequireJS 写出了漂亮的页面。

参考

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日