web-dev-qa-db-ja.com

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

私はクライアント側のプログラミングに反応スターターキットを使用しています。 reactとwebpackを使用します。 index.htmlまたは編集するHTMLはありません。すべてのjsファイル。私の質問は、ベンダーjs libをクラウドからロードしたい場合、どうすればいいですか？

HTMLファイルでそれを行うのは簡単でしょう。 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

ただし、jsファイルでは、npmインストール済みパッケージのみを使用します。上記のライブラリをhtmlファイルなしでインポートするにはどうすればよいですか？インポートを試みましたが、ローカルファイルでのみ機能します。

update 10/21/15これまでのところ、2つの方向を試しましたが、どちらも理想的ではありません。

  1. @minheqはい、反応開始キット用の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ファイルで他に何もする必要はなく、インポートも要求もありません。しかし、今では2つのjqueryライブラリがさまざまな方法でロードされています。 1つはここにあり、もう1つはnpmとwebpackを介しています。後で問題が発生するのだろうか。私が使用する反応ルーティングは、サーバー側の読み込みのためにブラウザウィンドウにホームパスを入力しないと「未定義変数」エラーが発生します。したがって、このソリューションはあまり良くありません。

  1. Webpackエクスターナル機能を使用します。これは link として文書化されています。 「既存のAPIをバンドルにインポートする場合は、アプリケーションの外部オプションも使用できます。つまり、CDNからjquery（別個のタグ）を使用し、バンドルでrequire（ "jquery"）を使用したい場合。 external：{externals：{jquery： "jQuery"}}として指定します。 "しかし、私がいくつかの場所で見つけたドキュメントは、これを正確に行う方法についてすべてうるさいです。これまでのところ、htmlの<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>を置き換えるためにそれを使用する方法がわかりません。
javascriptnode.jsreactjswebpack
40
jay.m

Jsバンドルが添付されているユーザーに提供するために使用されているHTMLファイルが1つあります。おそらく、あなたはそのHTMLファイルにスクリプトタグを添付することができます

0
minheq

externalsは、これを可能にすることを意図したものではありません。 「このリソースを自分で組み込むため、このリソースを最終的なバンドルにコンパイルしないでください」という意味です。

必要なのは、 script.js などのスクリプトローダーの実装です。また、さまざまなスクリプトローダーの実装を比較する簡単なアプリを作成しました： link 。

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

JSでスクリプトタグを次のように作成できます。

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

Webpackの externals を使用します。

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

3
Griffith