JS 构建

优质

小牛编辑

136浏览

2023-12-01

JS 合并

JS 压缩

JS 压缩采用的是 uglify-js 模块，默认配置为：

{
    // 连续单语句，逗号分开
    // 如： alert(1);alert(2); => alert(1),alert(2)
    sequences: false,
    // 重写属性
    // 如：foo['bar'] => foo.bar
    properties: false,
    // 删除无意义代码
    dead_code: false,
    // 移除`debugger;`
    drop_debugger: true,
    // 使用以下不安全的压缩
    unsafe: false,
    // 不安全压缩
    unsafe_comps: false,
    // 压缩if表达式
    conditionals: true,
    // 压缩条件表达式
    comparisons: true,
    // 压缩常数表达式
    evaluate: true,
    // 压缩布尔值
    booleans: true,
    // 压缩循环
    loops: true,
    // 移除未使用变量
    unused: false,
    // 函数声明提前
    hoist_funs: true,
    // 变量声明提前
    hoist_vars: false,
    // 压缩 if return if continue
    if_return: true,
    // 合并连续变量省略
    join_vars: true,
    // 小范围连续变量压缩
    cascade: true,
    // 显示警告语句
    warnings: false,
    // 全局变量，会在构建之后，删除
    global_defs: {
        DEBUG: false
    }
}

demo

初始化目录

新建一个coolie-demo2目录：

coolie-demo2
└── src

1 directories, 0 files

初始化文件

写 2 个 JS 文件，分别为 1.js 和 2.js：

// 1.js
window.onload = function(){
    alert('hello');
};

// 2.js
window.onload = function(){
    alert(window.onload.toString());
};

在来个index.html:

<!doctype html>
<meta charset="utf-8">

<!--coolie-->
<script src="1.js"></script>
<script src="2.js"></script>
<!--/coolie-->

此时的目录结构为：

coolie-demo2
└── src
    ├── 1.js
    ├── 2.js
    └── index.html

1 directories, 3 files

构建前运行

使用 sts 执行：

➜  cd src
➜  sts
                 sts >> A static server is running.
                open >> http://192.168.0.162:62019

前端构建配置

使用coolie init -c生成coolie.config.js（前端构建工具的配置文件）：

➜  coolie init -c

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

        init success >> /coolie-demo2/src/coolie.config.js

修改coolie.config.js为：

/**
 * ======================================================
 * coolie-cli 配置文件 `coolie.config.js`
 * 使用 `coolie init -c` 生成 `coolie.config.js` 文件模板
 * 当前配置文件所在的目录为构建的根目录
 *
 * @link http://coolie.ydr.me/guide/coolie.config.js/
 * @author ydr.me
 * @version 1.0.22
 * @create 2015-12-14 16:17:27
 * =======================================================
 */

'use strict';

module.exports = function (coolie) {
    // coolie 配置
    coolie.config({
        // 是否在构建之前清空目标目录
        clean: true,

        // js 构建
        js: {
            // 入口模块
            main: [
                //【1】
            ],
            // coolie-config.js 路径
            //【2】
            'coolie-config.js': null,
            // js 文件保存目录
            dest: './static/js/',
            // 分块配置
            chunk: []
        },

        // html 构建
        html: {
            // html 文件
            src: [
                //【3】
                'index.html'
            ],
            // 是否压缩
            minify: true
        },

        // css 构建
        css: {
            // css 文件保存目录
            dest: './static/css/',
            // css 压缩配置
            minify: {
                compatibility: 'ie7'
            }
        },

        // 资源
        resource: {
            // 资源保存目录
            dest: './static/res/',
            // 是否压缩
            minify: true
        },

        // 原样复制文件
        copy: [
            //【4】
        ],

        // 目标配置
        dest: {
            // 目标目录
            dirname: '../dest/',
            // 目标根域
            host: '',
            // 版本号长度
            versionLength: 32
        }
    });

    // 使用 coolie 中间件
    // coolie.use(require('coolie-*'));

    // 自定义 coolie 中间件
    //coolie.use(function (options) {
    //    // do sth.
    //    return options;
    //});
};

修改点：

【1】：去除了入口文件路径
【2】：去除了模块加载器配置文件的路径
【3】：修改了 html 文件路径
【4】：去除了原样复制文件配置

此时的目录结构为：

coolie-demo2
└── src
    ├── 1.js
    ├── 2.js
    ├── coolie.config.js
    └── index.html

1 directories, 4 files

前端构建

执行构建：

➜  coolie build

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


                 1/6 >> parse coolie config
       coolie config >> /coolie-demo2/src/coolie.config.js
         src dirname >> /coolie-demo2/src
        dest dirname >> /coolie-demo2/dest/

                 2/6 >> copy files
          copy files >> no files are copied

                 3/6 >> build main module
           build app >> no main modules

                 4/6 >> override coolie-config.js
      overide config >> `coolie-config.js` is not defined

                 5/6 >> build html
                   √ >> /static/js/06f5f56a93baa9089b10b901861c36dd.js
                   √ >> /index.html

                 6/6 >> generate a resource relationship map
                   √ >> ../dest/coolie-map.json

       build success >> past 118ms

构建之后的目录结构为：

coolie-demo2
├── dest
│   ├── coolie-map.json
│   ├── index.html
│   └── static
│       └── js
│           └── 06f5f56a93baa9089b10b901861c36dd.js
└── src
    ├── 1.js
    ├── 2.js
    ├── coolie.config.js
    └── index.html

4 directories, 7 files

构建后运行

切换到dest目录再次执行：

➜  cd ../dest
➜  sts
                 sts >> A static server is running.
                open >> http://192.168.0.162:62282

分析构建结果

通过两次弹窗内容，就可以知道构建之后的内容是经过压缩了。来看看构建之后的资源地图 coolie-map.json（详细介绍点这里）：

{
  "/index.html": {
    "main": [],
    "async": [],
    "js": [
      {
        "dest": "/static/js/06f5f56a93baa9089b10b901861c36dd.js",
        "deps": [
          "../src/1.js",
          "../src/2.js"
        ]
      }
    ],
    "css": [],
    "res": []
  }
}

标记了index.html引入了static/js/06f5f56a93baa9089b10b901861c36dd.js文件，并且该文件是由1.js和2.js合并而来。

看看index.html：

<!doctype html><meta charset="utf-8"> <script src="/static/js/06f5f56a93baa9089b10b901861c36dd.js"></script>
<!--coolie@1.0.22-->

代码经过压缩，并且合并了之前标记的1.js和2.js为06f5f56a93baa9089b10b901861c36dd.js。

看看06f5f56a93baa9089b10b901861c36dd.js：

/*coolie@1.0.22*/
window.onload=function(){alert("hello")};
window.onload=function(){alert(window.onload.toString())};