如果你使用了类似于入门指导中的项目布局,你的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”没有指定为一个依赖,则很可能会出现错误。