开发总结 — requirejs篇（配置及使用）

官网文档云：

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

本站后台用requirejs+angularjs搭建的，现在此简述一下requirejs的配置及使用。

配置

配置文件（requirejs-config.js）

requirejs.config({
    // 所有模块的查找根路径（window.staticDomain为url形式）
    baseUrl: window.staticDomain || '',
    // path config是相对 baseUrl 解析的，而且不用包含".js"，因为 path config 指向的可能是目录
    paths :{
        jquery        :'bower_components/jquery/dist/jquery',
        bootstrap     :"bower_components/bootstrap/dist/js/bootstrap",
        underscore    :'bower_components/underscore/underscore',
        md5           :'bower_components/js-md5/js/md5',
        angular       :'bower_components/angular/angular',
        // 缩短加载的目录
        C:'js/controllers'
    },
    // 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置
    shim  :{
        // exports： 设置加载该模块后的默认全局变量；deps：设置该模块的默认依赖模块
        'jquery'         :{exports:'$'},
        'underscore'     :{exports:'_'},
        'md5'            :{exports:'md5'},
        'angular'        :{deps:['jquery']},
        'C/module':{deps:['jquery']}
    }
});

使用

合并优化配置文件（build.js）

{
    // app顶级目录，非必选项。如果指定值，baseUrl则会以此为相对路径
    'appDir':'../js',
    // 模块根目录。默认情况下所有模块资源都相对此目录。
    // 若该值未指定，模块则相对build文件所在目录。
    // 若appDir值已指定，模块根目录baseUrl则相对appDir。
    'baseUrl':'./',
    // 指定输出目录，若值未指定，则相对 build 文件所在目录
    'dir'    :'../js-dist',
    // 设置模块别名
    // RequireJS 2.0 中可以配置数组，顺序映射，当前面模块资源未成功加载时可顺序加载后续资源
    'paths'  :{
        'jquery'        :'../bower_components/jquery/dist/jquery',
        'bootstrap'     :'../bower_components/bootstrap/dist/js/bootstrap',
        'underscore'    :'../bower_components/underscore/underscore-min',
        'md5'           :'../bower_components/js-md5/js/md5',
        'angular'       :'../bower_components/angular/angular',
        'C':'controllers'
    },
    // 模块的依赖与导出
    'shim'   :{
        'jquery'         :{exports:'$'},
        'underscore'     :{exports:'_'},
        'md5'            :{exports:'md5'},
        'angular'        :{deps:['jquery']},
        'C/module':{deps:['jquery']}
    },
    // 2.1.11中：如果dir被声明且不为”none”，并且skipDirOptimize 为false，通常所有的JS文件都会被压缩，这个值自动设置为”all”。
    // 为了让JS文件能够在压缩过正确执行，优化器会加一层define()调用并且会插入一个依赖数组。当然，这样会有一点点慢如果有很多文件或者有大文件的时候。
    // 所以，设置该参数为”skip”这个过程就不会执行，如果optimize设置为”none”也一样。如果你想手动设置值的话：
    // 1）优化后：如果你打算压缩没在modules声明的JS文件，在优化器执行过后，你应该设置这个值为”all”
    // 2）优化中：但在动态加载过后，你想做一个会文件优化，但不打算在动态加载这些文件可以设置成”skip”
    // 最后：所有生成的文件（无论在不在modules里声明过）自动标准化
    "normalizeDirDefines": "skip",
    // 模块设置
    'modules':[
        {
            // 模块 alias 名称
            'name':'main',
            // 不打包的依赖模块
            'exclude': [
                'jquery'
            ]
        }
    ]
}

入口文件(index.jade):

script(src="#{staticDomain}/bower_components/requirejs/require.js")
script(src="#{staticDomain}/js/requirejs-config.js")
if config.ENV !== 'dev'
    //- 生产及测试环境
    script(src="#{staticDomain}/js-dist/bower_components/jquery/jquery.js")
    script(src="#{staticDomain}/js-dist/main.js")
else
    //- 本地环境
    script(src="#{staticDomain}/js/bower_components/jquery/jquery.js")
    script(src="#{staticDomain}/js/main.js")

参考资料

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