webpackを使用してCDNまたは外部ベンダーのjavascript libをhtmlファイルではなくjsファイルにロードする方法

Question

私はクライアントサイドプログラミングのために反応スターターキットを使用しています。それは反応とウェブパックを使用します。 index.htmlもhtmlでも編集することはできません。すべてのjsファイル。私の質問は、クラウドからベンダーのjs libをロードしたいのですが、どうすればいいですか？

htmlファイルで簡単に行うことができます。 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

ただし、jsファイルでは、インストールされているnpmパッケージのみが使用されます。上記のlibをhtmlファイルなしでインポートするにはどうすればよいですか？私はインポートを試して、彼らはローカルファイルのためにのみ動作する必要があります。

更新10/21/15 これまでのところ私は2つの方向を試しましたが、いずれも理想的ではありません。

1. @minheqはい反応開始キットのHTMLファイルがあります。 src/components/Htmlのhtml.jsです。私はこのようにそこクラウドlibとそのすべての依存関係を置くことができます：

 <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ファイルで他に何も何の輸入を必要としない、または必要としません。しかし、今では2つのjqueryライブラリが異なる方法でロードされています。 1つはここに、もう1つはnpmとwebpackを通して。私はそれが後で私にトラブルを与えるだろうかと思う。私が使用する反応ルーティングは、私が推測するサーバ側の負荷のために、ブラウザウィンドウにnoneホームパスを入力すると、私に「未定義の変数」エラーを与えます。だから、この解決法はあまり良くありません。

2. ウェブパック外観機能を使用します。これは、linkと記載されています。既存のAPIをバンドルにインポートする場合は、アプリケーション用にexternalsオプションを使用することもできます。バンドルにCDN（別のタグ）からjqueryを使用したい場合でも（jquery）を必要としたい場合external：{externals：{jquery： "jQuery"}}と指定します。 しかし、私がいくつかの場所を見つけた文書は、これを正確に行う方法についてはすべて綿密です。これまでのところ、私はそれを使用して<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>をhtmlに置き換える方法を知らない。

Answer 1

として、あなたのJSにスクリプトタグを作成することができます。おそらくあなたはそのHTMLファイルにスクリプトタグをつけることができます。

Answer 2

利用のWebPACKのexternals：

externalsあなたは のWebPACKによって解決されていないライブラリの依存関係を指定しますが、出力の依存関係になることができます。この は、実行時に環境からインポートされることを意味します。

Answer 3

あなたは間違いなくあなたの添付JSバンドルを持つユーザーに提供するために使用されている1つのHTMLファイルがあり

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>")) 

Answer 4

externalsはこれを行なわせることを意図していません。これは、「このバンドルを最終バンドルにコンパイルしないでください」という意味です。

script.jsなどのスクリプトローダーの実装が必要です。私はまた別のスクリプトローダーの実装を比較する簡単なアプリを書いた：link。

Answer 5

var $script = require("scriptjs"); 
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() { 
    $('body').html('It works!') 
});