web-dev-qa-db-ja.com

Webpackおよび外部ライブラリ

私はwebpack（ http://webpack.github.io/ ）を試していますが、本当にすてきに見えますが、ここでちょっと立ち往生しています。

ライブラリにCDNを使用しているとします（f.ex jQuery）。それから私のコードでは、モジュールからインクルードしようとする代わりに、require('jquery')が自動的にグローバルjqueryインスタンスを指すようにします。

IgnorePluginのようなプラグインを使用してみました：

new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))

これはライブラリを無視するために機能しますが、webpackerを実行するときに必要なモジュールが「欠落」していると依然として述べています。

どういうわけか、webpackにjqueryを代わりにグローバルコンテキストから選択する必要があることを伝える必要があります。一般的なユースケースのように思えるので、ドキュメントがこれを特に対象としていないことにちょっと驚きました。

javascriptrequirecommonjswebpack
47
David Hellsing

Webpack documentation によると、configオブジェクトのexternalsプロパティを使用して、「webpackでは解決されないが、出力の依存関係になるライブラリの依存関係を指定できます。これはランタイム中に環境からインポートされることを意味します[sic]。」

そのページの例は、jQueryを使用してそれを非常によく示しています。簡単に言えば、通常のCommonJSスタイルでjQueryを要求できます。

var jQuery = require('jquery');

次に、configオブジェクトでexternalsプロパティを使用して、jQueryモジュールをグローバルjQuery変数にマップします。

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

Webpackによって作成された結果のモジュールは、既存のグローバル変数をエクスポートするだけです（簡潔にするために、ここでは多くのものを省略しています）。

{
    1: function(...) {
        module.exports = jQuery;
    }
}

私はこれを試してみましたが、説明どおりに機能します。

72
Garrett