9

我正在尝试使用 Require.js 创建一个外部库。感谢Require.js 没有正确编译单个 js 文件和Require.js (almond.js)超时，我已经想出了如何将所有内容“编译”到单个优化/构建的文件中，并且该单个文件可以工作。只有一个问题：我不知道如何为我的库设置变量。

假设我希望我的库创建window.Foo. 我尝试使用以下main.js文件：

window.Foo = require([], function() {
    window.Foo = {someValue: 1};
    return {someValue: 2};
});

和一个包装结束片段：

    return require('main');
}));

如您所见，我尝试通过window.Foo从 require 调用内部显式设置以及通过结束片段的返回值从外部显式设置来将 Foo 暴露给全局空间。但是没有一个工作；如果我console.log(window.foo)在加载构建文件后添加一个权利，它会告诉我这window.Foo是未定义的。

如果我做一个 window.setTimeoutwindow.Foo最终确实被设置（到{someValue: 1}），但我不能很好地期望我的用户必须用超时来包装他们的所有代码。谁能解释一下window.Foo我的优化/构建文件加载后如何被定义？

4

2 回答 2

13

如果您按照此处的 James 说明操作，您可以轻松地生成一个库，该库设计为一组可以同步加载的 RequireJS 模块。

我有一个 github存储库来说明整个事情。重点：

  • main模块导出Foo到全局空间：

    define('main', ["./modC"], function () {

console.log("inside");
window.Foo = {someValue: 1};

return {someValue: 2};

});

    它还返回一个由起始片段导出的值Bar（即表示 的行root.Bar = factory();）。因此，它说明了导出到全局空间的两种方法。

  • 使用的包装代码r.js以同步形式启动 main require：

    require(`main`);

如果加载它，您将看到以下输出：

outside
loaded modC
inside
out in the HTML!
value of window.Foo: Object {someValue: 1}
value of window.Bar: Object {someValue: 2}
于 2014-03-07T01:06:21.777 回答
3

调用require()是async，这意味着您作为参数传递的函数的返回值本身不会返回require()。您的问题可以通过不同的方式解决，RequireJS 方式是在模块中定义您的代码并将其作为依赖项：

// mymodule.js
define([], function() {
    window.Foo = {someValue: 1};
    return {someValue: 2};
});

// main.js
require(['mymodule'], function (mymodule) {
    console.log(window.Foo); // {someValue: 1}
    console.log(mymodule); // {someValue: 2}
});
于 2014-03-05T22:09:01.213 回答