r.js使用教程

准备

下载并安装

• NodeJS 下载

• Git 下载

• 访问其 GitHub 主页：github.com/requirejs/r… 并下载到本地。

• 将 dist 文件夹下的 r.js 复制到项目文件夹下即可。

• 压缩整个项目需要配置一个build.js文件(配置文件详情看示例)

使用

• 调用 node r.js -o build.js 进行项目的压缩

build.js配置文件示例

({
    appDir:'./',//将要被优化处理的目录(一般是项目根目录)，该目录下的所有文件都会被优化并复制到dir指定的输出目录中，相对build.js文件的路径
    dir: '../app-built',//指定顶级输出目录，所有需要被优化的文件将被复制并压缩到该目录，相对于build.js的路径，一般和项目源代码根目录并列。
    baseUrl: 'scripts/app',// 模块根目录(base url),默认情况下所有模块资源都相对此目录。此路径也是相对于appDir的
    mainConfigFile:'scripts/config.js',//使用requirejs的配置文件（路径相对于build.js），这样就不需要重复配置baseUrl、path和shim等相关属性了。【在config.js中不能使用变量】
    paths: {jquery: 'jquery.min',a: 'b',c: 'c',d: 'd'},  //特别为某些模块设定别名，值为相对于baseUrl的路径
    //需要合并的模块数组（不在此配置内的文件只会被单独压缩简化，不会被合并）,常用参数：create：如果不存在，是否创建，默认 false；include：额外引入的模块，和 name 定义的模块一起压缩合并
    modules: [
        {
            name: '../main',//页面的入口js文件，会将其依赖全部压缩合并成一个文件；相对baseUrl的路径或模块Id都可以。
            exclude:['underscore']//exclude：排除指定模块及其依赖。有些模块有公共的依赖模块，例如基础库，在合并的时候每个都会压缩进去。使用 exclude 可以把这些模块在压缩在一个更早之前加载的模块中，其它模块不用重复引入。排除之后要确保页面会在别的地方引入，否则会报错。
        },
        // 将模块ID为 foo/bar/bop 和 foo/bar/bee 的模块打包成一个文件
        {
            name: "foo/bar/bop",
            include: ["foo/bar/bee"]//可以合并不属于依赖关系中的文件及其依赖
        },
    ],
    removeCombined: true,  //如果为true，将从输出目录中删除已被合并的文件
    fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,      //匹配到的文件将不会被输出到输出目录中。它匹配了r.js、build.js和所有.scss后缀的文件。
    optimize:"uglify",   //JS代码优化方式,"uglify"：使用 UglifyJS 压缩代码，默认值；"uglify2"：使用 2.1.2+ 版本进行压缩；"none"：不做压缩合并；
    uglify: { toplevel: true, ascii_only: true,  beautify: true,  max_line_length: 1000  },    // 使用 UglifyJS 时的可配置参数
    optimizeCss:'standard',//css优化的参数，"standard.keepLines","none","standard.keepComments","standard.keepWhitespace","none"
    generateSourceMaps: false,//是否生成SourceMaps文件，便于调试压缩后的代码
    useStrict: false,// 是否开启严格模式，
    onBuildRead: function (moduleName, path, contents) {
        //Always return a value.当每个文件被读取的时候可以调用这个方法来改变文件的内容
        if (moduleName === "config") {
            return contents.replace("/Scripts", "/Scriptsbuild")
        }
        return contents;
    }
})

参数说明

• appDir：应用程序的目录（即 ）。在这个文件夹下的所有文件将会被复制到 dir 参数标注的文件夹下。

• baseUrl：相对于 appDir，代表查找文件的锚点（that represents the anchor path for finding files）。

• dir：这是一个输出目录，所有的应用程序文件将会被复制到该文件夹下。

• modules：一个包含多个对象的数组。每个对象代表一个将被优化的模块（module）。

• fileExclusionRegExp：任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把 r.js 和 build.js 放置在应用程序目录下，我们希望优化器（optimizer）排除这两个文件。 因此我们可以这样设置 /^(r|build).js$/。

• optimizeCss：RequireJS Optimizer 会自动优化应用程序下的 CSS 文件。这个参数控制 CSS 最优化设置。具体可选值见上方 css 部分。

• removeCombined：如果为true，优化器（optimizer）将从输出目录中删除已合并的文件。

• paths：模块（modules）的相对目录

• shim：为那些没有使用 define() 声名依赖关系及设置模块值的模块，配置依赖关系与“浏览器全局”出口的脚本。