常见问题解答：RequireJS 高级用法

如何重命名 require/define/requirejs？§ 1

RequireJS 及其优化工具需要版本 0.26.0 或更高版本才能正常工作。

为什么要这样做？您可能对全局命名空间有非常严格的要求，或者您可能正在使用已经定义了 require/define 的代码，并且您希望避免冲突。

关于此功能的一些说明

  • 确保使用 require.js 的源代码版本，而不是压缩版本。
  • 确保 require.js 的版本包含在优化中，因为 require.js 文件内容已更改以使命名空间正常工作。
  • 像往常一样使用 require/define 编写模块代码，然后进行构建以命名空间值。不要使用命名空间 require/define 编写模块代码。这将使您的代码可移植性降低，并且其他人无法使用。
  • 此转换/优化仅能执行一次。不要将此优化的输出用作另一个优化/构建阶段的输入。

以下示例优化配置基于优化页面示例中使用的目录结构。此配置将 require.js 与 main.js 合并到一个新的 foo.js 文件中。 define() 被重命名为 foo.define()，require() 被重命名为 foo.require()


{
    appDir: "../",
    baseUrl: "scripts",
    dir: "../../appdirectory-build",

    //Put in a mapping so that 'requireLib' in the
    //modules section below will refer to the require.js
    //contents.
    paths: {
        requireLib: 'require'
    },

    //Indicates the namespace to use for require/requirejs/define.
    namespace: "foo",

    modules: [
        {
            name: "foo",
            include: ["requireLib", "main"],
            //True tells the optimizer it is OK to create
            //a new file foo.js. Normally the optimizer
            //wants foo.js to exist in the source directory.
            create: true
        }
    ]
}

完成此优化后，需要修改引用 require.js 的 HTML 以引用 foo.js。

感谢 Ryan Florence 对命名空间设计的帮助。

另一种重命名方法，如果您希望对内容进行更直接的控制，并且希望使用修改提交源代码。此方法不应与上面演示的“命名空间”优化一起使用。

1) 修改 require.js 的源代码

需要在 require.js 代码周围有一个包装器，以便您可以将 require 函数设置为您选择的名称

var myGlobalRequire = (function () {
    //Define a require object here that has any
    //default configuration you want for RequireJS. If
    //you do not have any config options you want to set,
    //just use an simple object literal, {}. You may need
    //to at least set baseUrl.
    var require = {
        baseUrl: '..'
    };

    //INSERT require.js CONTENTS HERE

    return require;
}());

2) 修改加载的文件

对于您使用此新函数加载的任何文件，如果这些文件以任何方式引用了 require，您需要将它们包装在一个匿名函数中，以将 require 的值设置为您在步骤 1 中设置的新函数名称

(function (require) {

    //Regular require references now work correctly in here.

}(myGlobalRequire));

按照上述步骤，您应该能够使用优化工具有效地将脚本组合在一起。如果您希望在优化脚本中使用重命名的 require 定义，请直接在 include 优化选项中引用您修改后的 require.js，或者如果您想直接优化该文件，请将其作为 name 选项。

感谢 Alex Sexton 和 Tobie Langel 对此解决方案的部分建议。

如何加载 CSS？§ 2

理想情况下，RequireJS 可以将 CSS 文件作为依赖项加载。但是，在知道 CSS 文件何时加载方面存在问题，尤其是在 Gecko/Firefox 中从另一个域加载文件时。一些历史记录可以在此 Dojo 工单中找到。

知道文件何时加载非常重要，因为您可能只想在样式表加载后获取 DOM 元素的尺寸。

有些人已经实现了一种方法，即他们查找应用于特定 HTML 元素的已知样式，以了解样式表是否已加载。由于该解决方案的特殊性，它不适合 RequireJS。知道链接元素何时加载引用的文件将是最强大的解决方案。

由于无法可靠地知道文件何时加载，因此在 RequireJS 加载中显式支持 CSS 文件没有意义，因为这会导致浏览器行为出现错误报告。如果您不关心文件何时加载，您可以通过执行以下操作轻松编写自己的函数来按需加载 CSS

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}