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="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");
