1下载

使用 coolie demo 命令下载本 demo。

  1. ➜ coolie demo 8

2资源模块

资源模块指的是图片、样式、html片段等非脚本模块（在 coolie 的世界里，一切皆是模块）。

使用方法：

  1. require('style.css');

coolie 支持的模块类型。

3demo

3.1初始化目录结构

新建coolie-demo8目录：

  1. coolie-demo8
  2. └── webroot-dev
  4. 1 directory, 0 files

3.2初始化文件

准备一张图片coolie.png，放在 webroot-dev 目录下。

3.2.1style.css

然后在 webroot-dev 目录下新建style.css：

  1. body{
  2.     background: url(coolie.png);
  3.     color: #AF00FF;
  4.     font-size: 60px;
  5. }

3.2.2template.html

然后继续在 webroot-dev 目录下新建template.html：

  1. <h1>Hello coolie</h1>

3.2.3index.js

然后在 webroot-dev 目录下新建入口模块index.js：

  1. // 引入样式文件模块，并自动插入到 style 标签里
  2. require('./style.css', 'css|style');
  4. // 在文档里插入 html 片段
  5. document.getElementById('demo').innerHTML = require('./template.html');

3.2.4package.json

新建 package.json:

  1. {
  2.   "name": "coolie-demo8-webroot",
  3.   "version": "2.0.0"
  4. }

3.2.5coolie.js

使用命令下载模块加载器：

  1. ➜  npm install --save coolie.js
  3. coolie.js@2.0.8 node_modules/coolie.js

3.2.6coolie-config.js

再写模块加载器配置文件，使用命令生成配置文件（coolie-config.js）：

  1. ➜  coolie init -j
  3. ┌────────────────────────────────────┐
  4. │ coolie-cli                         │
  5. │ coolie@1.6.4                       │
  6. │ The front-end development builder. │
  7. └────────────────────────────────────┘
  9.         init success >> /coolie-demo6/src/coolie-config.js

修改其内容为：

  1. /**
  2.  * ======================================================
  3.  * coolie.js 配置文件 `coolie-config.js`
  4.  * 使用 `coolie init -j` 生成 `coolie-config.js` 文件模板
  5.  * 前端模块加载器配置文件
  6.  *
  7.  * @link http://coolie.ydr.me/guide/coolie-config.js/
  8.  * @author ydr.me
  9.  * @version 2.0.0
  10.  * @create 2016-05-28 20:34:17
  11.  * ======================================================
  12.  */
  14. coolie.config({
  15.     // 模块模式，开发环境为 COMMONJS
  16.     mode: 'CJS',
  18.     // 入口模块基准路径，相对于当前文件
  19.     mainModulesDir: '/',
  21.     // node_modules 目录指向，相对于 mainModulesDir
  22.     nodeModulesDir: '/node_modules/',
  24.     // 手动指定 node 模块的入口文件，此时将不会去加载模块的 package.json
  25.     // 除非你非常肯定，你加载的 node 模块的入口路径都是一致的
  26.     // 否则不要修改配置此项
  27.     // nodeModuleMainPath: 'src/index.js',
  29.     // 是否为调试模式，构建之后会修改为 false
  30.     debug: true,
  32.     // 全局变量，用于模块构建的预定义变量判断压缩
  33.     global: {}
  34. }).use();

主要修改了base值，使入口模块基准路径指向当前文件所在的目录。

3.2.7index.html

最后写index.html：

  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <div id="demo"></div>
  5. <script src="/node_modules/coolie.js/coolie.js"
  6.         coolie
  7.         data-config="/coolie-config.js"
  8.         data-main="index.js"></script>

3.3前端构建前运行

在src目录下，使用构建资源模块（demo8） - 图1sts执行：

  1. ➜  sts
  2.                  sts >> A static server is running.
  3.                 open >> http://192.168.0.156:60880

构建资源模块（demo8） - 图2

3.4前端构建配置

使用命令生成前端构建配置文件：

  1. ➜  coolie init -c
  3. ┌────────────────────────────────────┐
  4. │ coolie-cli                         │
  5. │ coolie@1.6.4                       │
  6. │ The front-end development builder. │
  7. └────────────────────────────────────┘
  9.         init success >> /coolie-demo8/src/coolie.config.js

修改配置文件（coolie.config.js）为：

  1. /**
  2.  * ======================================================
  3.  * coolie-cli 配置文件 `coolie.config.js`
  4.  * 使用 `coolie init -c` 生成 `coolie.config.js` 文件模板
  5.  * 当前配置文件所在的目录为构建的根目录
  6.  *
  7.  * @link http://coolie.ydr.me/guide/coolie.config.js/
  8.  * @author ydr.me
  9.  * @version 1.6.4
  10.  * @create 2016-01-26 20:59:40
  11.  * =======================================================
  12.  */
  14. 'use strict';
  16. module.exports = function (coolie) {
  17.     // coolie 配置
  18.     coolie.config({
  19.         // 是否在构建之前清空目标目录
  20.         clean: true,
  22.         // 目标配置
  23.         dest: {
  24.             // 目标目录，相对于当前文件
  25.             dirname: '../webroot-pro/',
  26.             // 目标根域
  27.             host: '',
  28.             // 版本号长度
  29.             versionLength: 32
  30.         },
  32.         // js 构建
  33.         js: {
  34.             // 入口模块，相对于当前文件
  35.             main: [
  36.                 // 支持 glob 语法
  37.                 //【1】
  38.                 'index.js'
  39.             ],
  40.             // coolie-config.js 路径，相对于当前文件
  41.             //【2】
  42.             'coolie-config.js': 'coolie-config.js',
  43.             // js 文件保存目录，相对于 dest.dirname
  44.             dest: './static/js/',
  45.             // 分块配置
  46.             chunk: []
  47.         },
  49.         // html 构建
  50.         html: {
  51.             // html 文件，相对于当前文件
  52.             src: [
  53.                 // 支持 glob 语法
  54.                 //【3】
  55.                 'index.html'
  56.             ],
  57.             // 是否压缩
  58.             minify: true
  59.         },
  61.         // css 构建
  62.         css: {
  63.             // css 文件保存目录，相对于 dest.dirname
  64.             dest: './static/css/',
  65.             // css 压缩配置
  66.             minify: {
  67.                 compatibility: 'ie7'
  68.             }
  69.         },
  71.         // 资源
  72.         resource: {
  73.             // 资源保存目录，相对于 dest.dirname
  74.             dest: './static/res/',
  75.             // 是否压缩
  76.             minify: true
  77.         },
  79.         // 原样复制文件，相对于当前文件
  80.         copy: [
  81.             // 支持 glob 语法
  82.             //【4】
  83.             //'./favicon.ico',
  84.             //'./robots.txt'
  85.         ]
  86.     });
  88.     // 使用 coolie 中间件
  89.     // coolie.use(require('coolie-*'));
  91.     // 自定义 coolie 中间件
  92.     //coolie.use(function (options) {
  93.     //    // do sth.
  94.     //    return options;
  95.     //});
  96. };
  • 【1】：修改了入口模块路径为index.js
  • 【2】：修改了模块加载器配置文件路径为coolie-config.js
  • 【3】：修改了 html 路径为index.html
  • 【4】：取消了复制文件路径

3.5前端构建

执行前端构建：

  1. ➜  coolie build
  3. ┌──────────────────────────────┐
  4. │ coolie@2.0.0                 │
  5. │ 前端工程化构建工具           │
  6. │ 官网：https://coolie.ydr.me/ │
  7. └──────────────────────────────┘
  10.             step 1/6  >>  parse coolie-cli profile
  11.        coolie config  >>  /coolie-demo8/webroot-dev/coolie.config.js
  12.          src dirname  >>  /coolie-demo8/webroot-dev
  13.         dest dirname  >>  /coolie-demo8/webroot-pro/
  15.             step 2/6  >>  copy files
  16.           copy files  >>  no files are copied
  18.             step 3/6  >>  build main modules
  19.         parse module  >>  1 modules parsed
  20.           build main  >>  will build 1 main modules
  21.                  1/1  >>  /index.js
  23.             step 4/6  >>  generate coolie.js profile
  24.     coolie-config.js  >>  mainModulesDir: "/static/js/main/"
  25.     coolie-config.js  >>  asyncModulesDir: "../async/"
  26.     coolie-config.js  >>  chunkModulesDir: "../chunk/"
  27.     coolie-config.js  >>  callbacks: 0
  28.     coolie-config.js  >>  ../webroot-pro/static/js/334e1ea3301b33071eb3c5c1a510fd2d.js
  30.             step 5/6  >>  build htmls
  31.                  1/1  >>  /index.html
  33.             step 6/6  >>  generate coolie map
  34.           coolie map  >>  ../webroot-pro/coolie-map.json
  36.        build success  >>  elapsed 585ms, at 2016-05-28 21:57:49.934

从构建日志上也可以看出，构建了哪些模块。

3.6前端构建后运行

切换到 webroot-pro 目录，执行 构建资源模块（demo8） - 图3sts执行：

  1. ➜  cd ../webroot-pro
  2. ➜  sts
  3.                  sts >> A static server is running.
  4.                 open >> http://192.168.0.176:60786

构建资源模块（demo8） - 图4

  • 主要区别是在控制台，加载时间从原来的 93ms 缩减到 16ms
  • 界面上显示正常

3.7分析构建结果

3.7.1coolie-map.json

首先看看构建之后的 coolie-map.json（资源关系解读）:

  1. {
  2.   "/index.html": {
  3.     "main": [
  4.       {
  5.         "src": "../webroot-dev/index.js",
  6.         "dest": "/static/js/main/664c0ade7b31b0bafe89a6fe8685b2e1.js",
  7.         "deps": [
  8.           "../webroot-dev/style.css",
  9.           "../webroot-dev/template.html",
  10.           "../webroot-dev/coolie.png"
  11.         ]
  12.       }
  13.     ],
  14.     "js": [
  15.       {
  16.         "dest": "/static/js/0996319be2c4f9517575b54dcc4af897.js",
  17.         "deps": [
  18.           "../webroot-dev/node_modules/coolie.js/coolie.js"
  19.         ]
  20.       }
  21.     ],
  22.     "css": [],
  23.     "res": []
  24.   }
  25. }

3.7.2index.html

index.html页面引用了index.js模块，并且该模块构建之后的文件名为664c0ade7b31b0bafe89a6fe8685b2e1.js，该入口模块引用了style.css、template.html和coolie.png（图片是在 style.css 里引用的）三个模块。

我们来看下入口模块664c0ade7b31b0bafe89a6fe8685b2e1.js的内容：

  1. /*coolie built*/
  2. define("0",["1","2"],function(e,n,d){e("1");document.getElementById("demo").innerHTML=e("2")});
  3. define("1",[],function(){return coolie.importStyle("body{background:url(/static/res/7d9bbb425d679ca6c75f1cbbc66785fa.png);color:#AF00FF;font-size:60px}")});
  4. define("2",[],function(){return"<h1>Hello coolie</h1>"});

从上可知模块 ID 的对应关系：

  1. index.js => 0
  2. style.css => 1
  3. template.html => 2
  4. coolie.png => /static/res/7d9bbb425d679ca6c75f1cbbc66785fa.png

其中样式模块里使用了coolie.importStyle方法来自动加载样式。

4github

构建资源模块（demo8） - 图5github.com

原文: https://coolie.ydr.me/guide/build-resource-module