官网文档云:
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")
感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/16.html
邮箱:glowrypauky@gmail.com
QQ: 892413924