クライアント側プログラミングに React Starter Kit を使用しています。React と Webpack を使用します。index.html や編集する HTML はなく、すべて js ファイルです。質問は、クラウドからベンダー js ライブラリをロードしたい場合、どうすればいいかということです。
HTML ファイルでそれを実行するのは簡単です。<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
ただし、js ファイルでは、npm でインストールされたパッケージのみが使用されます。html ファイルなしで上記のライブラリをインポートするにはどうすればよいですか? import と require を試しましたが、これらはローカル ファイルに対してのみ機能します。
更新 2015 年 10 月 21 日 これまで 2 つの方法を試しましたが、どちらも理想的ではありません。
- @minheq はい、React Start Kit 用の HTML ファイルのようなものが存在します。これは src/components/Html の下の html.js です。次のようにして、クラウド ライブラリとそのすべての依存関係をそこに配置できます。
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
良いニュースは、それが機能することです。js ファイルで他に何もする必要はありません。インポートや require は必要ありません。ただし、現在、2 つの jquery ライブラリが異なる方法でロードされています。1 つはここにあり、もう 1 つは npm と webpack 経由です。後で問題が発生するのではないかと思います。使用している react-routing では、サーバー側の読み込みが原因で、ブラウザー ウィンドウに non-home パスを入力すると、「未定義の変数」エラーが発生します。したがって、この解決策はあまり良くありません。
- webpack 外部機能を使用します。これは次のように文書化されています:リンク. 「既存の API をバンドルにインポートする場合は、アプリケーションの外部オプションも使用できます。つまり、CDN から jquery を使用したい場合 (別のタグ) で、バンドルで require("jquery") を使用したい場合です。external: { externals: { jquery: "jQuery" } } と指定するだけです。」ただし、いくつかの場所で見つけたドキュメントでは、これを正確に行う方法についてすべて細かい説明がされています。今のところ、これを
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>HTML で置き換えるためにどのように使用すればよいのかわかりません。