使用 RequireJS 优化 Web 应用前端 （3）配置 RequireJS

look_w

配置 RequireJS
前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在 require 一个模块时，这个模块是如何映射到具体的 JavaScript 文件上去？这就涉及到如何配置 RequireJS。
最简化的加载 RequireJS 的方式如清单 2 所示，在这种情况下，我们没有指定一个 baseUrl 和 paths 给 RequireJS，如果通过如清单 10 所示方式，则 data-main 指定了一个在当前 index.html 目录并行的文件夹下的 /js/main.js 作为程序入口，而 /js 目录也将作为 baseUrl 在其他模块定义时候使用。
清单 10. 载入 require.js

1	<script data-main="js/main" src="scripts/require.js"></script>

因此，我们前面示例中的所有模块依赖，都可以去掉”js/”，直接写 ”student”， ”class”，”manager” 等。
一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如清单 11 所示。
清单 11. 配置 RequireJS

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript" src="./js/require.js"></script> <script type="text/javascript"> require.config({    baseUrl: "./js",    paths: {        "some": "some/v1"    }, waitSeconds: 10 }); require( ["some/module", "my/module", "./js/a.js"],    function(someModule,    myModule) {} ); </script>

baseUrl指明的是所有模块的 base URL，比如”my/module”所加载的 script实际上就是 /js/my/module.js。注意，以 .js 结尾的文件加载时不会使用该 baseUrl，它们仍然会使用当前 index.html所在的相对路径来加载，所以仍然要加上”./js/”。如果 baseUrl没有指定，那么就会使用 data-main中指定的路径。
paths 中定义的路径是用于替换模块中的路径，如上例中的 some/module 具体的 JavaScript 文件路径是 /js/some/v1/module.js 。
waitSeconds 是指定最多花多长等待时间来加载一个 JavaScript  文件，用户不指定的情况下默认为 7 秒。
另外一个重要的配置是 packages，它可以指定其他符合 CommonJS AMD 规范的目录结构，由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。
其他可配置的选项还包括 locale、context、deps、callback等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。