我在“index.html”文件中编写了RequireJS的开发配置:
<script src="require-2.1.5.min.js"></script>
<script>
require.config({
baseUrl: 'js',
paths: {
angular: 'libraries/angular-1.1.5.min',
jquery: 'libraries/jquery-2.0.0.min',
underscore: 'libraries/underscore-1.4.4.min',
...
zeroclipboard: 'plugins/zeroclipboard-1.0.7.min',
tablesorter: 'plugins/jquery.tablesorter-2.9.1.min',
...
},
shim: {
'angular': {
exports: 'angular'
},
'underscore': {
exports: '_'
}
},
packages: [
{
name: 'index',
location: 'app/index',
main: 'main'
}
]
});
require(['index']);
</script>
但是在生产环境中,我只有两个已经合并的文件用于库和插件:
js/libraries.js // all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated
js/plugins.js // all plugins (already an AMD modules, no need for "shim" config) concatenated
那么,我现在该如何编写我的配置“路径”呢?我没有任何'libraries/angular-1.1.5.min.js'和其他路径。
我的解决方案是编写:
paths: {
angular: 'libraries',
underscore: 'libraries'
}
我将AngularJS和Underscore库与'libraries.js'文件关联起来,一切运作良好(无需jQuery及其所有插件;它们已经是AMD模块)。
但是这种方式是否正确?我的解决方案似乎有点不够优雅,不是最佳实践的解决方案。
我的r.js构建过程:
({
baseUrl: 'scripts',
paths: {
jquery: 'jquery-2.0.0.min',
...
tablesorter: 'jquery.tablesorter-2.0.5.min',
zeroclipboard: 'zeroclipboard-1.0.7.min'
},
name: 'foo/main',
exclude: [
'angular',
'jquery',
...
'tablesorter',
'zeroclipboard'
],
optimize: 'uglify',
out: 'production/js/foo.js'
})
更新1:
我想要的是:
www.mysite.com/about.html:
<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //-->
<script src="js/plugins.js"></script><-- all AMD //-->
<script>
require.config({
baseUrl: 'js',
paths: {
angular: WHAT I NEED TO WRITE HERE?,
underscore: WHAT I NEED TO WRITE HERE?
},
shim: {
'angular': {
exports: 'angular'
},
'underscore': {
exports: '_'
}
},
packages: [
{
name: 'about',
location: 'js',
main: 'about'
}
]
});
require(['about']); // will load "js/about.js"
</script>
更新2:
好的,现在“优先级”已经清楚了,所以我不需要第一个和第二个“script”标签(但我需要将“Require.js”与“libraries.js”分开)。RequireJS会自动加载它们。但是对于“libraries.js”文件中的非AMD库应该怎么办呢?
AngularJS和UnderscoreJS都是非AMD模块,这就是为什么我必须使用“shim”的原因,对吧?但是为了让“shim”起作用,我还需要使用“paths”,这样“shim”才能找到被shimmed的模块,对吧?但是我只有一个文件——“libraries.js”,我无法将其写入“path”选项中……真的很困惑……