javascript 使用Webpack将jQuery暴露给真实的Window对象

kh212irz  于 2023-01-16  发布在  Java
关注(0)|答案(8)|浏览(216)

我想将jQuery对象公开给全局窗口对象,该对象可以在开发人员控制台的浏览器中访问。现在,在我的webpack配置中,我有以下几行:

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

这几行代码将jQuery定义添加到我的webpack模块中的每个文件中,但是当我构建项目并尝试在开发人员控制台中访问jQuery时,如下所示:

window.$;
window.jQuery;

它说这些属性是未定义的...
有什么办法可以解决这个问题吗?

ngynwnxp

ngynwnxp1#

您需要使用expose-loader

npm install expose-loader --save-dev

您可以在需要时执行此操作:

require("expose?$!jquery");

也可以在配置中执行此操作:

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

更新:自webpack 2起,您需要使用expose-loader而不是expose

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

58wvjzkj2#

ProvidePlugin通过相应的导入替换另一个源中的符号,但是不公开全局名称空间上的符号,jQuery插件就是一个典型的例子,大多数插件都希望jQuery是全局定义的,使用ProvidePlugin,你可以确保jQuery是一个依赖项(例如之前加载),并且在他们的代码中出现的jQuery将被替换为require('jquery')的webpack原始等价物。
如果您有依赖于全局名称空间中的符号的外部脚本(比如说外部托管的JS、Selenium中的Javascript调用或只是在浏览器的控制台中访问符号),您希望使用expose-loader
简而言之:ProvidePlugin管理构建时对全局符号的依赖,而expose-loader管理运行时对全局符号的依赖。

nafvub8i

nafvub8i3#

看起来window对象在所有模块中都公开。
为什么不直接导入/要求JQuery并放入:

window.$ = window.JQuery = JQuery;

在请求/导入任何使用window.JQuery的模块之前,您需要确保这一点,无论是在请求模块中还是在使用它的模块中。

mwyxok5s

mwyxok5s4#

这对我来说总是有效的。包括webpack 3window.$ = window.jQuery = require("jquery");

dldeef67

dldeef675#

以上这些方法对我都不起作用(而且我真的不喜欢expose-loader语法)。
我添加到webpack.config.js:

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

所有模块都可以通过$通过jQuery访问。
您可以通过将以下内容添加到webpack捆绑的任何模块中,将其显示在窗口中:

window.$ = window.jQuery = $
ht4b089n

ht4b089n6#

Webpack v2的更新

按照Matt Derrick所述安装expose-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" }
        ]
    }
};

(from曝光加载器文档)

vfhzx4xs

vfhzx4xs7#

对我来说很管用

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

mwecs4sa8#

    • 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"],
        }
    }]
  }]
}

相关问题