常见问题：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",

    //放入一个映射，以便下面模块部分中的“requireLib"将引用require.js内容。
    paths: {
        requireLib: 'require'
    },

    //指示要用于require/requirejs/define的命名空间。
    namespace: "foo",

    modules: [
        {
            name: "foo",
            include: ["requireLib", "main"],
            //True告诉优化器可以创建新文件foo.js。
	    //通常优化器希望foo.js存在于源目录中。
            create: true
        }
    ]
}

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

感谢Ryan Florence在名称空间设计方面的帮助。

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

1)修改require.js的来源

在require.js代码周围需要包装，因此您可以将require函数设置为您选择的名称：

var myGlobalRequire = (function () {
    //在这里定义一个require对象，该对象具有任何您想要的RequireJS默认配置
    //如果没有任何要设置的配置选项，请使用简单的对象文本{}。
    //您可能至少需要设置baseUrl。
    var require = {
        baseUrl: '..'
    };

    //在此处插入require.js内容

    return require;
}());

2)修改加载的文件

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

(function (require) {
    //常规要求引用现在在这里正常工作。
}(myGlobalRequire));

按照上述步骤操作，应该可以使您使用优化工具将脚本有效地组合在一起。如果要在优化脚本中重命名的需求定义，请直接在包含优化选项中引用已修改的require.js ，如果要直接优化该文件，则将其作为名称选项。

如何加载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);
}