requerejs, webpack, browserify 的对比

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 写出了漂亮的页面。

参考

• Browserify and Gulp Workflow for React
• RequireJS
• Browserify
• choosing the correct packaging tool for react.js

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式