转载

后端程序员的 JavaScript 之旅 - 模块化（三）

后端程序员的 JavaScript 之旅 - 模块化（三）这篇文章是「模块化」系列的最后一篇文章，聊一聊前端模块加载器。上一篇文章《模块化（二）》中提到的实现 AMD 规范的 RequireJS 就是一种比较常用的模块加载器，除此之外比较常用的有 Browserify 和 Webpack，接下来逐一介绍。

Browserify

npm 的模块非常丰富，但是其模块符合 CommonJS 规范，对浏览器不友好。Browserify 就是为了解决这个问题而生，递归分析应用中 require() 的调用顺序，将所有依赖的模块打包成一个 js 文件，浏览器通过一个 <script> 标签即可加载。

接下来再以 browserify 实现前两篇文章中的示例。

前提：node 和 npm 环境准备就绪，jQuery 已安装。

安装 browserify

npm install -g browserify

www/scripts 目录

math.js

exports.add = function(x, y) {
    return x + y;
};

increment.js

var math = require('./math');
exports.increment = function(val) {
    return math.add(val, 1);
}

mian.js

var $ = require('jquery');
var inc = require('./increment').increment;

$(function() {
    $(':button').click(function() {
        var val = parseInt($('#val').val());
        var res = inc(isNaN(val) ? 0 : val);
        $('#val').val(res);     
    })
});

browserify 打包

在 www 目录下，使用 browserify 打包

browserify ./scripts/main.js -o bundle.js

index.html

www目录下的index.html文件

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div>
        Input Number: <input type="text" id="val">
        <input type="button" value="Plus One">
        </div>
        <script src="./bundle.js"></script>
    </body>
</html>

Webpack

Webpack 是一种功能强大的模块加载器，与 Browserify 相比，可以灵活按配置将 js 打成多个包按需加载，提高首次访问页面的速读，同时也支持 css 、图片等静态文件的管理。

同样，以 webpack 实现 incrememnt 功能。

前提：node 和 npm 环境准备就绪。

安装 webpack

npm install webpack -g

示例中还演示了加载 css 的功能，需要在 www 目录安装 css-loader 和 style-loader ，不带 -g 参数。

npm install css-loader style-loader

www/styles 目录

style.css

body {
    background: #98887B;
}

www/scripts 目录

math.js 和 increment.js 同 Browserify，lib子目录有 jquery-2.2.0.js 文件。

main.js 文件略微不同，还加载了 css 文件。

require('../styles/style.css');

var $ = require('./lib/jquery-2.2.0');
var inc = require('./increment').increment;

$(function() {
    $(':button').click(function() {
        var val = parseInt($('#val').val());
        var res = inc(isNaN(val) ? 0 : val);
        $('#val').val(res); 
    })
});

www 目录

www 目录增加 webpack 配置文件 webpack.config.js

module.exports = {
    entry: "./scripts/main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: //.css$/, loader: "style!css" }
        ]
    }
};

webpack 打包

在 www 目录下，使用 webpack 打包，由于存在配置文件，直接运行命令 webpack 即可

webpack

index.html

www 目录下的 index.html 同 Browserify 中的例子，由于加载了 css 底色会有不同。

模块加载器比较

这个表格是 Webpack 官网上所列的 RequireJS、Browserify、Webpack 支持特性的比较：

Feature	webpack/webpack	jrburke/requirejs	substack/node-browserify
CommonJs `require`	yes	only wrapping in `define`	yes
CommonJs `require.resolve`	yes	no	no
CommonJs `exports`	yes	only wrapping in `define`	yes
AMD `define`	yes	yes	deamdify
AMD `require`	yes	yes	no
AMD `require` loads on demand	yes	with manual configuration	no
ES2015 `import` / `export`	no	no	no
Generate a single bundle	yes	yes♦	yes
Load each file separate	no	yes	no
Multiple bundles	yes	with manual configuration	with manual configuration
Additional chunks are loaded on demand	yes	yes	no
Multi pages build with common bundle	with manual configuration	yes
Concat in require `require("./fi" + "le")`	yes	no♦	no
Indirect require `var r = require; r("./file")`	yes	no♦	no
Expressions in require (guided) `require("./templates/" + template)`	yes (all files matching included)	no♦	no
Expressions in require (free) `require(moduleName)`	with manual configuration	no♦	no
Requirable files	file system	web	file system
Plugins	yes	yes	yes
Preprocessing	loaders, transforms	loaders	transforms
Watch mode	yes	not required	yes
Debugging support	SourceUrl, SourceMaps	not required	SourceMaps
Node.js built-in libs `require("path")`	yes	no	yes
Other Node.js stuff	process, __dir/filename, global	-	process, __dir/filename, global
Replacement for browser	`web_modules` , `.web.js` , package.json field, alias config option	alias option	package.json field, alias option
Minimizing	uglify	uglify, closure compiler	uglifyify
Mangle path names	yes	no	partial
Runtime overhead	243B + 20B per module + 4B per dependency	14.7kB + 0B per module + (3B + X) per dependency	415B + 25B per module + (6B + 2X) per dependency
Dependencies	19MB / 127 packages	11MB / 118 packages	1.2MB / 1 package