質問: babelifyを利用してjsを実装しています。 その中で、reactやunderscore、jqueryといったライブラリを使用するとき、アプリケーション全体で使用することが多いと思います。 このようにグローバルで使用するものは、どう扱うのが適切でしょうか。 Reactで実装する場合、使用するファイルで都度、下記のようにimportしています。 ``` import Reacr from 'react'; ``` これはこれで困ってはいないのですが、改善点やもっとよい方法があれば共有いただければ嬉しいです。 よろしくお願いします。
回答: いくつかアプローチを書いてみます。 - HTMLファイルで直接読み込む ================= React の場合は `node_modules/react/dist` ディレクトリにブラウザ向けのコンパイル済みファイルが配置されています。 これをコピー(またはシンボリックリンク)して、 ``` ``` すると、スクリプト全体でグローバル変数 `React` が利用できます。 これが最も従来の方法に近いです。 複数のページで React を利用している場合、キャッシュを効率的に利用できるメリットもあります。 - エントリ ファイルで global に代入する ========================= 最初に1度だけ実行される場所 (例えば Browserify に渡す最初のファイル) にて `import` して、グローバル領域に代入します。 ``` import React from "react"; Function("return this;")().React = React; ``` Modules を利用している場合、グローバルの`this`は`undefined`になります。そのためホスト オブジェクトのエイリアスとして利用できません。 そこで、こんな感じ。きっと動くはず... - `import React from "react";` を都度書く ==================================== 個人的には、これがベストだと思います。