web-dev-qa-db-ja.com

Require.jsからグローバル変数をエクスポートするにはどうすればよいですか？

Require.jsを使用して外部ライブラリを作成しようとしています。おかげで Require.jsが単一のjsファイルを正しくコンパイルしていません および Require.js（almond.js）タイミングオフ すべてを「コンパイル」する方法を理解しました単一の最適化/ビルドされたファイルに変換すると、その単一のファイルが機能します。 1つだけ問題があります。ライブラリに変数を設定する方法がわかりません。

ライブラリに_window.Foo_を作成させたいとしましょう。 _main.js_ファイルを次のように使用してみました：

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

および次のラッパー終了フラグメント：

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

ご覧のとおり、require呼び出しの内側から明示的に_window.Foo_を設定することと、終了フラグメントの戻り値を介して外側から明示的に設定することの両方によって、Fooをグローバル空間に公開しようとしました。しかし、どちらも機能しません。ビルドされたファイルをロードした直後にconsole.log(window.foo)を追加すると、_window.Foo_が未定義であることが通知されます。

Window.setTimeout _window.Foo_を実行すると、最終的に（_{someValue: 1}_に）設定されますが、ユーザーがすべてのコードをタイムアウトでラップする必要があるとはあまり期待できません。最適化/ビルドされたファイルがロードされたらすぐに_window.Foo_を定義する方法を誰かに説明してもらえますか？

requirejsalmond
9
machineghost

Jamesの指示 here に従うと、誰かが同期的にロードできるRequireJSモジュールのバンドルとして設計されたライブラリを簡単に作成できます。

私はgithubを持っています リポジトリ 全体を説明しています。重要なポイント：

  • mainモジュールはFooをグローバルスペースにエクスポートします。

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

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

return {someValue: 2};

});
_

    また、開始フラグメントによってBarとしてエクスポートされる値を返します（これは、root.Bar = factory();を示す行です）。つまり、グローバル空間にエクスポートする2つの方法を示しています。

  • _r.js_で使用されるラッパーコードは、メインで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}
_
13
Louis

require()の呼び出しはasyncです。つまり、引数として渡す関数の戻り値はnotrequire()自体によって返されます。 。問題はさまざまな方法で解決できます。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}
});
3
jgillich