终于到了重头戏啦?本文主要说明的是这两款构建工具(coolie 和 webpack),是分别如何完成模块化构建的,以及它们之间的优缺点。

预备

首先准备以下文件和目录,基本是承接上文的。

- demo
|-- src
|    |-- body.png
|    |-- entry1.js
|    |-- entry2.js
|    |-- module1.js
|    |-- module2.js
|    |-- single1.css
|    `-- single2.css
|-- coolie.json
|-- index.html
`-- weboack.config.js

entry1.js 的内容为:

define(function(require){
    require('./module.js');
    require('./single1.css');
    require('./single2.css');
});

引用关系为

entry1.js => module1.js + single1.css + ( single2.css => body.png )

entry2.js 的内容为:

define(function(require){
    require('./module.js');
    require('./single1.css');
});

引用关系为,惟独缺少了 single2.css

entry1.js => module1.js + single1.css

其他文件内容都在前文说到。

webpack

webpack.config.js

修改 webpack.config.js 为(可能作者对 webpack 的使用和配置可能不当,若有错误欢迎指正):

var path = require("path");

module.exports = {
    entry: {
        entry1: './src/entry1.js',
        entry2: './src/entry2.js'
    },
    output: {
        path: path.join(__dirname, '../out'), 
        filename: '[name].js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

loader 插件

需要先安装以下两个插件:

npm i -SD style-loader css-loader

构建

然后再执行:

➜  webpack
Hash: 55a90533e92c37e40c33
Version: webpack 1.9.11
Time: 441ms
    Asset     Size  Chunks             Chunk Names
entry1.js  13.7 kB       0  [emitted]  entry1
entry2.js  13.5 kB       1  [emitted]  entry2
   [0] ./src/entry1.js 131 bytes {0} [built]
   [0] ./src/entry2.js 94 bytes {1} [built]
   [1] ./src/module.js 49 bytes {0} {1} [built]
   [2] ./src ^\.\/.*$ 360 bytes {0} {1} [built] [5 warnings]
   [3] ./src/body.png 0 bytes [built] [failed]
   [4] ./src/single1.js 24 bytes {0} {1} [optional] [built]
   [9] ./src/single2.js 24 bytes {0} {1} [optional] [built]
    + 6 hidden modules

WARNING in ./src/entry2.js
Critical dependencies:
3:4-11 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/entry2.js 3:4-11

WARNING in ./src/entry1.js
Critical dependencies:
3:4-11 require function is used in a way in which dependencies cannot be statically extracted
4:4-11 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/entry1.js 3:4-11 4:4-11

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src/body.png
Module parse failed: /path/to/demo/src/body.png Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src ^\.\/.*$

呵呵,无法正常处理 css 引用的图片。

结果

看下目标目录的 entry1.js

// 省略...

// 注意点 1
var map = {
    "./module": 1,
    "./module.js": 1,
    "./single1": 4,
    "./single1.css": 5,
    "./single1.js": 4,
    "./single2": 9,
    "./single2.css": 10,
    "./single2.js": 9
};

// 省略...

// 注意点 2
if(!content.locals) {
    module.hot.accept("!!./../node_modules/css-loader/index.js!./single1.css", function() {
        var newContent = require("!!./../node_modules/css-loader/index.js!./single1.css");
        if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
        update(newContent);
    });
}

// 省略...

单从注意点 1 和 注意点 2 来看,就知道 webpack 构建的完全错误了。

coolie

修改的有点多,但值得,因为一旦配置完善,后续的配置都不会再变了。

coolie.json

{
  "js": {
    "src": [
      "./src/entry1.js", 
      "./src/entry2.js"
    ],
    "coolie-config.js": "./src/coolie-config.js",
    "dest": "./src/"
  },
  "css": {
    "dest": "./src/",
    "minify": {
      "compatibility": "ie7"
    }
  },
  "html": {
    "src": [
      "./*.html"
    ],
    "minify": true
  },
  "resource": {
    "dest": "./src/",
    "minify": true
  },
  "copy": [],
  "dest": {
    "dirname": "../dest/",
    "host": ""
  }
}

相比较之前,主要修改了 JS 的配置,增加了srccoolie-config.js两个配置:

  • src:需要构建的入口模块,通常我们将入口模块放在一个文件夹内,使用通配符即可。
  • coolie-config.js:模块加载器的配置文件。

coolie.js

在 src 目录下新增 coolie.min.js,使用

coolie pull

下载即可。

➜  src  coolie pull

            ╔═══════════════════════════════════════════════════════╗
            ║          coolie.cli@0.20.11                           ║
            ║          The front-end development builder.           ║
            ╚═══════════════════════════════════════════════════════╝

  pull coolie.min.js => https://raw.githubusercontent.com/cloudcome/coolie/master/coolie.min.js
  pull coolie.min.js => /path/to/demo/src/coolie.min.js

coolie-config.js

在 src 目录下新增 coolie-config.js(模块加载器的配置文件):

coolie.config({
    base: "./"
}).use();

html 修改

将 index.html 修改为:

<!DOCTYPE html>

<!-- coolie -->
<link rel="stylesheet" type="text/css" href="./src/single1.css">
<link rel="stylesheet" type="text/css" href="./src/single2.css">
<!-- /coolie -->

<!-- coolie -->
<script src="./src/single1.js"></script>
<script src="./src/single2.js"></script>
<!-- /coolie -->

<script coolie src="./src/coolie.min.js" data-config="./coolie-config.js" data-main="entry1.js"></script>

主要新增了一个模块加载器,并添加了:

  • coolie属性:标志这个script属于 coolie 的管辖范围。
  • data-config属性:标志了模块加载的配置文件路径,相对于src属性。
  • data-main属性:标志了模块入口文件路径,相对于coolie-config.js里的base(而base是相对于coolie-config.js本身)。

关于路径关系,f详细看这里

entry

为了方便的引入 css 文件,需要修改 entry1.js 为:

define(function(require){
    require('./module.js');
    require('./single1.css', 'css');
    require('./single2.css', 'css');
});

修改 entry2.js 为:

define(function(require){
    require('./module.js');
    require('./single1.css', 'css');
});

require 添加第二个参数,是不是觉得奇怪?coolie 支持的 require 语法为:

require(path, [type]);
  • path:模块的路径,相对于当前模块。
  • type:模块的类型,默认为js模块,还支持htmlcsstextjsonimage一共 6 种模块。

这种语法定义的原因:

  • 路径关系可以在 webstorm 里按 cmd + 单击直达模块,而如果加入了css!这种前缀就不可以了。
  • 清晰的路径,可以直接在 webstorm 里拖动模块层级,而不必手动修改模块的路径。
  • 独立的 type 非常清晰的标识了模块的类型。

构建

在 demo 目录下执行:

➜  coolie build

            ╔═══════════════════════════════════════════════════════╗
            ║          coolie.cli@0.20.11                           ║
            ║          The front-end development builder.           ║
            ╚═══════════════════════════════════════════════════════╝


                 1/5 => copy files

                 2/5 => build main
                  √  => /path/to/demo/src/entry1.js
                  √  => /path/to/demo/src/entry2.js

                 3/5 => overwrite config
                  √  => base: "./"
                  √  => version: "{
                          "entry1.js": "0ba981967e8b2712d6da6114ae90675c",
                          "entry2.js": "1c9621d551021410aa19acb2ecac94dc"
                        }"
                  √  => callbacks: 0
                  √  => /path/to/dest/src/coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js

                 4/5 => build html css
                  √  => /path/to/dest/src/bdd8e022ce7470f06d7183daabac0b79.css
                  √  => /path/to/dest/src/6c762d4e4b7d1e9504281bc12abd65b9.js
                  √  => /path/to/dest/src/coolie.min.js
                  √  => /path/to/demo/*.html

                 5/5 => generator relationship map
                  √  => /path/to/dest/relationship-map.json

       build success => copy 1 file(s),
                        build 2 main file(s),
                        build 2 js file(s),
                        build 1 html file(s),
                        build 2 css file(s),
                        build 1 resource file(s),
                        past 157 ms

构建的过程非常的清晰,说下构建结果:

  • 复制了一个文件,就是coolie.min.js文件,即模块加载器。
  • 构建两个入口文件,即entry1.jsentry2.js
  • 构建了两个 JS 文件,即single1.jssingle2.js
  • 构建了一个 HTML 文件,即index.html
  • 构建了两个 CSS 文件,即single1.csssingle2.css
  • 构建了一个资源文件,即body.png

结果

看下目标目录

.dest
|-- src
|    |-- 6c762d4e4b7d1e9504281bc12abd65b9.js
|    |-- a821bd973bf1114e6ed1d9170b6e84eb.png
|    |-- bdd8e022ce7470f06d7183daabac0b79.css
|    |-- coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js
|    |-- coolie.min.js
|    |-- entry1.0ba981967e8b2712d6da6114ae90675c.js
|    `-- entry2.1c9621d551021410aa19acb2ecac94dc.js
|-- index.html
`-- relationship-map.json

来看下 entry1.js(为了便于阅读,已省略了 base64 编码):

/*coolie@0.20.11*/
define("0",["1","2","3"],function(n){n("1");n("2");n("3")});
define("1",[],function(){console.log("module")});
define("2",[],function(y,d,r){r.exports="html{margin:0;padding:0}"});
define("3",[],function(y,d,r){r.exports="body{background:url(data:image/png;base64...)}"});

来看下 entry2.js:

/*coolie@0.20.11*/
define("0",["1","2"],function(n){n("1");n("2")});
define("1",[],function(){console.log("module")});
define("2",[],function(y,d,r){r.exports="html{margin:0;padding:0}"});

看下 index.html(为了便于阅读已折行和注释处理):

<!DOCTYPE html>
<!--1-->
<link rel="stylesheet" href="/src/bdd8e022ce7470f06d7183daabac0b79.css">
<!--2-->
<script src="/src/6c762d4e4b7d1e9504281bc12abd65b9.js"></script>
<!--3-->
<script src="/src/coolie.min.js" data-config="./coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js" data-main="entry1.js"></script>
<!--coolie@0.20.11-->

非常的清晰明了:

  1. fCSS 文件的合并、压缩、版本管理
  2. fJS 文件的合并、压缩、版本管理
  3. 模块文件的构建。

最后看看relationship-map.json

{
    "index.html": {
        "css": {
            "src/bdd8e022ce7470f06d7183daabac0b79.css": [
                "src/single1.css",
                "src/single2.css"
            ]
        },
        "js": {
            "src/6c762d4e4b7d1e9504281bc12abd65b9.js": [
                "src/single1.js",
                "src/single2.js"
            ]
        },
        "main": "src/entry1.js",
        "deps": [
            "src/module.js",
            "src/single1.css",
            "src/single2.css"
        ]
    }
}

与前文相比,多了maindeps

  • main:入口模块。
  • deps:入口模块的依赖模块。

总结

在模块构建上:

webpack

  • 优点
    • 自由定制。
  • 缺点
    • 需要安装各种插件,无法基本满足通用化需求。
    • 和 gulp、grunt 是没有本质区别的,都是自己实现一个 runner,然后来跑各种插件。
    • 出现了构建错误,依赖分析错误。
    • 无法正常构建 css 和 css 里引用的图片文件。
    • 需要丰富经验才能驾驭配置。

coolie

  • 优点
    • 构建完全正确
    • 非常优秀的版本管理。
    • 模块路径进行了压缩,将原有的./module1.js这种路径压缩成了1这种单个字符,极大减少了文件体积。
    • 支持 html/css/text/image/json 模块构建(部分未在本文涉及到)。
    • 支持 html/css 里引用的静态资源构建(本文未涉及)。
  • 缺点
    • 需要搭配订制的模块加载器。
    • 部分写法有些特殊。

综合,coolie 显而易见的完全胜出,得满分 40 分,webpack 得 1 分。