

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

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

[code]

    import Reacr from 'react';
    
[/code]

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


CC BY-SA 3.0
2015-05-16T10:10:43.027
10258
2016-01-12T02:16:17.087
8270
question
javascript reactjs
es6のmodulesでglobalにimportとするベストプラクティスを知りたい


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

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

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

[code]

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

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

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

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

[code]

    import React from "react";
    Function("return this;")().React = React;
    
[/code]

Modules
を利用している場合、[グローバルの`this`は`undefined`になります](http://people.mozilla.org/~jorendorff/es6-draft.html#sec-
module-environment-records-getthisbinding)。そのためホスト オブジェクトのエイリアスとして利用できません。  
そこで、こんな感じ。きっと動くはず...

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

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


CC BY-SA 3.0
2015-05-16T20:15:56.877
10267
2015-05-16T20:15:56.877
4809
10258
answer