Webpackの「グローバル変数をインポートする」

Question

従来のJSスクリプトを使用するサイトに統合するWebpackアプリケーションがあり、そのスクリプトはグローバル変数を定義します。

私たちのWebpackアプリケーションの中で、importにはすでにページにスクリプトとして存在しているライブラリがあります。スクリプトとしてもう一度同じコードを2回ダウンロードしてwebpackバンドルに埋め込むのではなく、webpackにスクリプトのようにページに既に含まれているライブラリのコードを含めないようにしますが、それでもES import問題のスクリプトコードが実際にグローバル変数によってライブラリを利用できるようにしたとしても、私たちのモジュール内のコードを "インポート"するための構文を使用します。

私たちのページには<script src="jquery.js">があります。 jquery.jsおそらくこのような何かを行いますWebPACKのでコンパイル

window.jQuery = {}; 

そして、我々のコードでは、私たちがやってみたい：

import jQuery from 'jquery'; 
jQuery === window.jQuery // true 

は、特定の依存関係を解決するように構成することがWebPACKのための方法はあります、上の例のような "jquery"のようにして、importコードをそのグローバル変数への参照に変換する必要があると判断しますか？

ここでの意図は、レガシーアプリケーションの新しいコードで新しいESモジュールの構文を徐々に選択しながら、同じコードがすでにスクリプトとしてページ上に利用可能であるという事実を利用していることです。

私はWebpack's guide on "shimming"をチェックしましたが、これは私がこの記事で説明した以外のすべての機能を提供するようです。

Answer 1

使用のWebPACKのexternals：

防ぎ、特定のインポートされたパッケージのバンドルし、代わりに、実行時に これらの外部依存関係を取得します。

externals: { 
    jquery: 'jQuery' 
}