將 jQuery 暴露給真實的 Window object 和 Webpack

Question

我想將 jQuery object 暴露給全局 window object，它可以在瀏覽器的開發人員控制台中訪問。 現在在我的 webpack 配置中有以下幾行：

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

這些行將 jQuery 定義添加到我的 webpack 模塊中的每個文件。 但是當我構建項目並嘗試在開發人員控制台中訪問 jQuery 時，如下所示：

window.$;
window.jQuery;

它說這些屬性未定義...

有沒有辦法來解決這個問題？

Answer 1

您需要使用Exposure-loader 。

npm install expose-loader --save-dev

您可以在需要時執行此操作：

require("expose?$!jquery");

或者您可以在配置中執行此操作：

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

更新：由於2的WebPack的，你需要使用暴露裝載機，而不是揭露：

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

Answer 2

ProvidePlugin 通過相應的導入替換另一個源中的符號，但不會在全局命名空間中公開該符號。 一個經典的例子是 jQuery 插件。 他們中的大多數人只是希望jQuery能夠被全局定義。 使用ProvidePlugin您將確保 jQuery 是一個依賴項（例如，之前加載）並且jQuery在其代碼中的出現將替換為 webpack 原始等效的require('jquery') 。

如果您有依賴於全局命名空間中的符號的外部腳本（比如外部托管的 JS、Selenium 中的 Javascript 調用或簡單地訪問瀏覽器控制台中的符號），您想要使用expose-loader 。

簡而言之：ProvidePlugin 管理對全局符號的構建時依賴關系，而expose-loader管理對全局符號的運行時依賴關系。

Answer 3

看起來window對象在所有模塊中都暴露了。

為什么不直接導入/需要JQuery並放置：

window.$ = window.JQuery = JQuery;

您需要確保在要求/導入任何使用window.JQuery模塊之前發生這種情況，無論是在要求模塊中還是在使用它的模塊中。

Answer 4

這總是對我有用。 包括webpack 3 window.$ = window.jQuery = require("jquery");

Answer 5

以上都不適合我。 （而且我真的不喜歡expose-loader 語法）。 反而，

我添加到 webpack.config.js：

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

比所有模塊都可以通過 $.jQuery 訪問。

您可以通過將以下內容添加到 webpack 捆綁的任何模塊來將其公開給窗口：

window.$ = window.jQuery = $

Answer 6

Webpack v2 的更新

按照 Matt Derrick 的描述安裝Exposure-loader ：

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 ）

Answer 7

在我的情況下有效

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

Answer 8

更新 Webpack v2

webpack 5 升級后，您可能會遇到此警告。

[DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[7].use[0].options)

只需將options更改為

options: {
 exposes: ["$", "jQuery"],
}

看起來像這樣：

module: {
rules: [{
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        {
           exposes: ["$", "jQuery"],
        }
    }]
  }]
}