如果你使用了类似于入门指导中的项目布局,你的web项目应大致以如下的布局开始(基于Node/Rhino的项目也是类似的,只不过使用scripts目录中的内容作为项目的顶层目录):
project-directory/ project.html scripts/ require.js
而下面的示例中使用了两个包,cart及store:
project-directory/ project.html scripts/ cart/ main.js store/ main.js util.js main.js require.js
project.html 会有如下的一个script标签:
<script data-main="scripts/main" src="scripts/require.js"></script>
对“cart”的依赖请求会从scripts/cart/main.js中加载,因为“main”是RequireJS默认的包主模块。对“store/util”的依赖请求会从scripts/store/util.js加载。
如果“store”包不采用“main.js”约定,如下面的结构:
project-directory/ project.html scripts/ cart/ main.js store/ store.js util.js main.js package.json require.js
则RequireJS的配置应如下:
require.config({
packages: [
"cart",
{
name: "store",
main: "store"
}
]
});
减少麻烦期间,强烈建议包结构遵从“main.js”约定。
§ 4.2 多版本支持
如配置项一节中所述,可以在同一页面上以不同的“上下文”配置项加载同一模块的不同版本。require.config()返回了一个使用该上下文配置的require函数。下面是一个加载不同版本(alpha及beta)模块的示例(取自test文件中):
<script src="../require.js"></script>
<script>
var reqOne = require.config({
context: "version1",
baseUrl: "version1"
});
reqOne(["require", "alpha", "beta",],
function(require, alpha, beta) {
log("alpha version is: " + alpha.version); //prints 1
log("beta version is: " + beta.version); //prints 1
setTimeout(function() {
require(["omega"],
function(omega) {
log("version1 omega loaded with version: " +
omega.version); //prints 1
}
);
}, 100);
});
var reqTwo = require.config({
context: "version2",
baseUrl: "version2"
});
reqTwo(["require", "alpha", "beta"],
function(require, alpha, beta) {
log("alpha version is: " + alpha.version); //prints 2
log("beta version is: " + beta.version); //prints 2
setTimeout(function() {
require(["omega"],
function(omega) {
log("version2 omega loaded with version: " +
omega.version); //prints 2
}
);
}, 100);
});
</script>
注意“require”被指定为模块的一个依赖,这就允许传递给函数回调的require()使用正确的上下文来加载多版本的模块。如果“require”没有指定为一个依赖,则很可能会出现错误。
