RequireJS 打包工具

r.js是RequireJS的一个附产品，支持在 NodeJS环境下运行AMD程序，并且其包含了一个名为RequireJS Optimizer的工具，可以为项目完成合并脚本等优化操作

RequireJS Optimizer常规用法

写好一个配置文件, 比如 config.js，常用属性有：

({
    // 程序的根路径
    appDir: "xxx",
    // 脚本的根路径
    // 相对于程序的根路径
    baseUrl: "xxx",
    // 打包输出到的路径
    dir: "xxx",
    // 需要打包合并的js模块，数组形式，可以有多个
    // name 以 baseUrl 为相对路径，无需写 .js 后缀
    // 比如 main 依赖 a 和 b，a 又依赖 c，则 {name: 'main'} 会把 c.js a.js b.js main.js 合并成一个 main.js
    modules: [
        {
            name: "main"
        }
        ...
    ],
    // 通过正则以文件名排除文件/文件夹
    // 比如当前的正则表示排除 .svn、.git 这类的隐藏文件
    fileExclusionRegExp: /^\./
})

运行node命令

node r.js -o config.js

这时 RequireJS Optimizer 就会：

把配置信息的 modules下的所有模块建立好完整的依赖关系，再把相应的文件打包合并到 dir 目录
把所有的 css文件中，使用 @import 语法的文件自动打包合并到 dir目录
把其他文件赋值到 dir 目录，比如图片、附件等

适合老旧传统项目使用的api

modules[i].include

modules: [
    {
        name: "main",
        include: ["a", "b"]
    }
]

这里include字段提供了"强制建立依赖关系"的功能，也就是说，即使在 main.js 的代码里没有依赖 a.js 和 b.js，它们也会在合并代码的时候插入到 main.js的前面，这种打包方式非常适合传统老旧项目

two small demos using r.js to pack files

demo one：给使用`AMD`模块化开发方式的项目打包

目录结构

|——build
    |——config.js
    |——r.js
|——js
    |——moduleA.js
    |——moduleB.js
    |——moduleC.js
    |——main.js
    |——require.min.js
|——index.html

文件详情

index.html

<!-- data-main指向总的文件入口, 只能有一个入口文件 -->
<script src="js/require.min.js" data-main="js/main.js"></script>

moduleA.js

define(function () {
    return {
        a: 5
    }
});

moduleB.js

define(function () {
    return {
        b: 10
    }
});

moduleC.js

define([
    'moduleA',
    'moduleB'
], function(moduleA, moduleB) {
    'use strict';
    let a = moduleA.a;
    let b = moduleB.b;

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

    function init() {
        console.log('app init');
        console.log('the result is: ' + add(a, b));
    }

    return {
        init: init
    }
});

main.js

// don't use moduleA.js or js/moduleA.js here
require(["moduleC"], function (moduleC) {
    moduleC.init();
})

打包配置文件config.js

({
    appDir: '../',
    baseUrl: './js',
    dir: "../dist",
    keepBuildDir: false,
    // 打包结果优化; 压缩等
    optimize: "none",
    skipModuleInsertion: true,
    removeCombined: true,
    modules: [
        {
            name: "main"
        }
    ],
    fileExclusionRegExp: /^(\.|build|dist|README)/,
})

运行打包命令

node r.js -o config.js

打包结果

dist 目录结构

|——js
    |——main.js
    |——require.min.js
|——build.txt
|——index.html

打包完的 main.js；自动分析依赖，并将所有依赖到的文件统一打包到 main.js 中

define('moduleA',[],function () {
    return {
        a: 5
    }
});

define('moduleB',[],function () {
    return {
        b: 10
    }
});

define('moduleC',[
    'moduleA',
    'moduleB'
], function(moduleA, moduleB) {

    let a = moduleA.a;
    let b = moduleB.b;

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

    function init() {
        console.log('app init');
        console.log('the result is: ' + add(a, b));
    }

    return {
        init: init
    }
});

// don't use moduleA.js or js/moduleA.js here
require(["moduleC"], function (moduleC) {
    moduleC.init();
});

demo two：给传统旧项目打包

目录结构

|——build
    |——config.js
    |——r.js
|——css
    |——a.css
    |——b.css
    |——main.css
|——image
    |——a.jpg
|——js
    |——a.js
    |——b.js
    |——main.js
|——index.html

文件详情

index.html

    ...
<link rel="stylesheet" href="css/main.css">
    ...
<div><img src="data:images/a.jpg" alt=""></div>
    ...
<script src="js/main.js"></script>

mian.css

@import url(a.css)
@import url(b.css)

a.js

alert('a')

b.js

alert('b')

main.js

// ...

打包配置文件config.js

({
    // 程序的根路径
    appDir: "../",
    // 脚本的根路径
    // 若appDir值未指定，模块则相对build文件所在目录。
    // 若appDir值已指定，模块根目录baseUrl则相对appDir。
    // 相对于程序的根路径
    baseUrl: "./js",
    // 打包输出到的路径
    dir: "../dist",
    // 在 RequireJS 2.0.2 中，输出目录的所有资源会在 build 前被删除
    // 值为 true 时 rebuild 更快，但某些特殊情景下可能会出现无法预料的异常
    keepBuildDir: false,
    // RequireJS Optimizer 有个很智能的功能, 就是为没有写明 define(...) 函数
    // 的模块代码自动将其放入 define(...) 之中
    // 如果我们指定如下参数, 那么上述的处理将会被取消
    skipModuleInsertion: true,
    // If set to true, any files that were combined into a build layer will be
    // removed from the output folder.
    // 打包输出的文件夹中只留打包后的js、css
    removeCombined: true,
    // 需要打包合并的js模块, 数组形式, 可以有多个
    // name以basrUrl为相对路径, 无需写.js后缀
    // include字段提供了"强制建立依赖关系"的功能, 也就是说, 即使在main.js的代码里
    // 没有依赖 a.js 和 b.js, 它们也会在合并代码的时候插入到 main.js 的前面
    modules: [
        {
            name: "main",
            include: ["a", "b"]
        }
    ],
    // 通过正则以文件名排除文件/文件夹
    // ex 排除 .svn、.git 这类隐藏文件
    fileExclusionRegExp: /^(\.|build|dist|ignore|README)/,
    // onBuildRead 这个参数可以定义一个函数, 在处理每个 js 文件之前,
    // 会先对文件的文本内容进行预处理
    // 比如下面, 就是把 main.js 里打包前的代码全部清除(注释外的代码, 注释自动会清除)
    onBuildRead: function (moduleName, path, contents) {
        if (moduleName === 'main') {
            console.log('hello')
            contents = '/* empty code */';
            // return contents.replace(/foo/g, "bar");
        }
        return contents
    }
})

运行打包命令

node r.js -o config.js

打包结果

目录结构

|——css
    |——main.css
|——image
    |——a.jpg
|——js
    |——main.js
|——build.txt
|——index.html

打包完的 main.css；打包时自动合并a.css和b.css文件

.a-class {
    font-size: 16px;
    color: #000;
}
.b-class {
    font-size: 20px;
    color: red;
}

打包完的main.js；打包时会把a.js和b.js插入到main.js的前面，即使在main.js的代码里没有依赖它们

这是因为在打包配置文件config.js里配置了 modules[i].include 属性

alert("a module"),alert("b module");

两个demo的地址