web-dev-qa-db-ja.com

Webpackを使用してjQueryを実際のWindowオブジェクトに公開する

ブラウザの開発者コンソール内でアクセス可能なグローバルウィンドウオブジェクトにjQueryオブジェクトを公開したくありません。今、私のwebpack configには次の行があります：

plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                })
            ]

これらの行は、jQuery定義をWebpackモジュールの各ファイルに追加します。しかし、プロジェクトをビルドして、次のように開発者コンソールでjQueryにアクセスしようとすると：

window.$;
window.jQuery;

これらのプロパティは未定義であると言います...

これを修正する方法はありますか？

javascriptjquerywebpack
99
ferbolg

expose-loader を使用する必要があります。

npm install expose-loader --save-dev

必要なときにこれを行うことができます。

require("expose?$!jquery");

または、設定でこれを行うことができます：

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE：webpack 2の時点では、expose-loaderexposeの代わりに：

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}
124
Matt Derrick

ProvidePluginは、それぞれのインポートを通じて別のソースのシンボルを置き換えますが、グローバルネームスペースでシンボルを公開しません。典型的な例はjQueryプラグインです。それらのほとんどは、単にjQueryがグローバルに定義されることを期待しています。 ProvidePluginを使用すると、jQueryが依存関係（たとえば、前にロードされている）であり、コード内でのjQueryの出現が、require('jquery')と同等のwebpack rawに置き換えられることを確認できます。

グローバルネームスペースにあるシンボルに依存する外部スクリプトがある場合（外部でホストされているJS、JavascriptがSeleniumで呼び出す、またはブラウザのコンソールで単にシンボルにアクセスするなど）、 expose-loader を使用します=代わりに。

要するに、ProvidePluginはグローバルシンボルへのビルド時の依存関係を管理するのに対し、expose-loaderはグローバルシンボルへの実行時の依存関係を管理します。

68
Joscha

windowオブジェクトはすべてのモジュールで公開されているように見えます。

なぜJQueryを単にインポート/要求し、次のように入力しないのですか：

window.$ = window.JQuery = JQuery;

window.JQueryを使用するモジュールを要求/インポートする前に、要求モジュールまたはそれが使用されているモジュールで、これが発生することを確認する必要があります。

35
mhess

これは私のために常に働いた。 webpackwindow.$ = window.jQuery = require("jquery");を含む

13
SharpCoder

私の場合は動作します

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
2
FeDev

Webpack v2のアップデート

インストール expose-loader Matt Derrickの説明に従って：

npm install expose-loader --save-dev

次に、次のスニペットをwebpack.config.jsに挿入します。

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

（ expose-loader docs から）

1
Cologne_Muc

上記のどれも私にとってはうまくいきませんでした。代わりに、

Webpack.config.jsに追加しました：

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

すべてのモジュールが$を介してjQueryを介してアクセスするよりも。

あなたはそれをウィンドウに公開することができます：

window.$ = window.jQuery = $
0
Antoine Vo