2

babelifyを利用してjsを実装しています。
その中で、reactやunderscore、jqueryといったライブラリを使用するとき、アプリケーション全体で使用することが多いと思います。
このようにグローバルで使用するものは、どう扱うのが適切でしょうか。

Reactで実装する場合、使用するファイルで都度、下記のようにimportしています。

import Reacr from 'react';

これはこれで困ってはいないのですが、改善点やもっとよい方法があれば共有いただければ嬉しいです。
よろしくお願いします。

1 件の回答 1

2

いくつかアプローチを書いてみます。

- HTMLファイルで直接読み込む

React の場合は node_modules/react/dist ディレクトリにブラウザ向けのコンパイル済みファイルが配置されています。
これをコピー(またはシンボリックリンク)して、

<script src="lib/react.min.js"></script>

すると、スクリプト全体でグローバル変数 React が利用できます。
これが最も従来の方法に近いです。
複数のページで React を利用している場合、キャッシュを効率的に利用できるメリットもあります。

- エントリ ファイルで global に代入する

最初に1度だけ実行される場所 (例えば Browserify に渡す最初のファイル) にて import して、グローバル領域に代入します。

import React from "react";
Function("return this;")().React = React;

Modules を利用している場合、グローバルのthisundefinedになります。そのためホスト オブジェクトのエイリアスとして利用できません。
そこで、こんな感じ。きっと動くはず...

- import React from "react"; を都度書く

個人的には、これがベストだと思います。

1
  • ありがとうございます。 個人的にも3番目を使用しています(fluxのexampleも同様のようですね)。 2番目は、windowもしくはglobalを使用して、以下でも良いかもしれません。 window.React = React; ※どの環境まで問題ないかは確認できていませんが... 参考にさせていただきます!
    – khirayama
    Commented 2015年5月16日 23:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。