r.js 本是 RequireJS 的一个附属产品，支持在 NodeJS、Rhino 等环境下运行 AMD 程序，并且其包含了一个名为 RequireJS Optimizer 的工具，可以为项目完成合并脚本等优化操作。
r.js 的介绍中明确写道它是 RequireJS 项目的一部分，和 RequireJS 协同工作。但我发现，RequireJS Optimizer 提供了丰富的配置参数，可以让我们完全跳出 AMD 和 RequireJS 程序的束缚，为我们的前端程序服务。
首先，简单介绍一下 RequireJS Optimizer 的“正派”用法 (以 NodeJS 环境为例)：
事先写好一个配置文件，比如 config.js，它是 JSON 格式的，常用属性有：
{
// 程序的根路径
appDir: "some/path/trunk",
// 脚本的根路径
// 相对于程序的根路径
baseUrl: "./js",
// 打包输出到的路径
dir: "../some/path/release",
// 需要打包合并的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 r.js -o config.js
这时 RequireJS Optimizer 就会：
modules 下的所有模块建立好完整的依赖关系，再把相应的文件打包合并到 dir 目录css 文件中，使用 @import 语法的文件自动打包合并到 dir 目录dir 目录，比如图片、附件等等我已经把 RequireJS 和 r.js 整套东西用到了 H5Slides 上。觉得蛮方便的。
不过工作中的前端开发工作并不是绝对理想化的，有些旧的项目，并不是 AMD 的模块化开发方式，而是传统的 js 程序，开发一个页面时可能需要一口气引入三到五个 css 文件、十来个 js 文件…… 上线的时候为了减少流量及 HTTP 请求数又需要把代码尽可能重用和合并。这个时候就需要一个方便快捷的打包工具帮助我们了，下面就介绍一下 RequireJS Optimizer 是如何完成这项工作的。
说到这里，必须要额外介绍几个 RequireJS Optimizer 的参数了：
modules: [
{
name: "main",
include: ["d", "e"]
}
]
这里的 include 字段提供了“强制建立依赖关系”的功能，也就是说，即使在 main.js 的代码里没有依赖 d.js 和 e.js，它们也会在合并代码的时候插入到 main.js 的前面
在介绍这个参数之前需要说明的是，RequireJS Optimizer 有一个很智能的功能，就是为没有写明 define(...) 函数的模块代码自动将其放入 define(...) 之中。如果我们写明：
skipModuleInsertion: true
则这种处理将会被取消。
这个参数可以定义一个函数，在处理每个 js 文件之前，会先对文件的文本内容进行预处理。比如下面这个例子里，我会把 main.js 里的代码全部清除：
onBuildRead: function (moduleName, path, contents) {
if (moduleName === 'main') {
contents = '/* empty code */';
}
return contents;
}
这时，我们的资源已经足够了。比如我现在的项目有：
1 个 html
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="css/a.css">
<link rel="stylesheet" href="css/b.css">
</head>
<body>
...
<script src="js/a.js"></script>
<script src="js/b.js"></script>
<script src="js/c.js"></script>
</body>
</html>
2 个 css
3 个 js
1 个图片文件夹
新建一个 css 文件，叫 css/main.css，内容为：
@import url(a.css);
@import url(b.css);
然后把 index.html 中的 2 个 <link> 标签改成一个
<link rel="stylesheet" href="css/main.css">
合并 js 文件的步骤略复杂些。首先也是新建一个 js 文件，叫 js/main.js：
document.write('<script src="js/a.js"></script>');
document.write('<script src="js/b.js"></script>');
document.write('<script src="js/c.js"></script>');
然后把 index.html 中的 3 个 <script> 标签改成一个
<script src="js/main.js"></script>
接下来就是配置打包工具的时间了。
skipModuleInsertion: true
modules: [{name: 'main', include: ['a', 'b', 'c']}]
这样打包出来的 main.js 是这样的：
// code from a.js
// code from b.js
// code from c.js
document.write('<script src="js/a.js"></script>');
document.write('<script src="js/b.js"></script>');
document.write('<script src="js/c.js"></script>');
onBuildRead: function (moduleName, path, contents) {
if (moduleName === 'main') {
contents = '/* empty code */';
}
return contents;
}
这样的话，打包工具就会把 document.write(...) 的代码去掉，得到干净的
// code from a.js
// code from b.js
// code from c.js
/* empty code */
运行 node r.js -o config.js 就可以得到一个打包成功的项目了，并且打包前后的代码都可以正常运行
附件是这个项目例子的源代码：project.zip
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。