前端优化：RequireJS Optimizer 的使用和配置方法（二）

前言

上一篇文章粗略介绍了r.js的使用和示例。但是，仔细的人就会发现，build.js配置太尼玛简单了，有没有问题啊？

有问题，哈哈，当我在正式的开发中准备下手使用时，发现了问题。

问题类似于此：r.js打包问题

参数说明

有一点疑问，appDir究竟是指的哪个根目录呢？我把r.js和build.js放在同一级，个人猜测是相对于r.js的目录而言，和Gruntfile.js是一个道理。

如果你要在grunt中使用的话，可以使用grunt-contrib-requirejs插件。

buld.js配置

问题就在于，js中的require 配置，r.js并不管。所以，打包就会失败。

解决办法就是在build.js中进行重定义。

注意到，build.js中有个参数mainConfigFile，这个就是用来进行重新定义模块的配置js文件。

当然，我们照样可以不用它，直接写到build.js中，参考我项目中的一个配置：

({
    appDir: "./",
    baseUrl: "js",
    dir: "../build",
    paths: {
        'jquery':'libs/jquery-1.8.2',
        'easyDialog':'utils/easyDialog',
        'easySwitch':'utils/easySwitch',
        'easyValidator':'utils/easyValidator',
        'miniNotification':'utils/miniNotification',
        'scoreToRank':'utils/scoreToRank',
        'score-intro':'app/score-intro',
        'convert-center':'app/convert-center'
    },
    shim:{
        'easyDialog': ['jquery'],
        'easySwitch':['jquery'],
        'easyValidator':['jquery'],
        'miniNotification':['jquery']
    },
    modules: [{
        name: 'score-intro'
    },{
        name: 'convert-center'
    }]
})

libs下面的都是公用js，utils文件下是插件及其它模块，app下是启动文件，他们都会依赖于libs和utils中的某个文件。

这样呢，打包就成功了。

注意：paths和shim中，文件名称保持和写在js中的require.config中的名称保持一致。

require.config({
    baseUrl: 'js/',
    paths: {
        'jquery': 'libs/jquery-1.8.2',
        'scoreToRank': 'utils/scoreToRank'
    }
});

这样，运行命令node r.js -o build.js，app文件中的js依赖全都拼合了进来。

ps：有疑问及其它问题，请联系本人。

注意事项：

使用grunt的童鞋，可以使用grunt-contrib-requirejs。

1.css的压缩，不需要再使用grunt-contrib-cssmin，否则会有打包bug，grunt-contrib-rquirejs可以压缩css;

2.若要合并rquier.js和其配置文件，一旦更改了配置文件(目前bug是删除了某个js模块)，也要更改合并的文件，否则，打包就会报错。（没道理啊，配置文件更改了，合并模块concat竟然没有检查更新机制么？）

项目示例

参考：

r.js 配置文件 example.build.js 不完整注释