ProvidePlugin 不适用于 jquery - webpack [英] ProvidePlugin not working with jquery - webpack

问题描述

我正在尝试在我的应用程序中访问 jquery根据 webpack 网站上的信息，您可以使用 webpack 创建全局变量

知道为什么会这样吗?

解决方案

我知道为时已晚，但对于 Google 员工(或 Duck Duck 粉丝，如果您关心隐私)，我遇到了同样的问题:

如果我使用 $: 'jquery' 它抛出

<块引用>

无法解析'jquery'

如果我用过

const jquery = require('jquery');$: jquery

它扔了

<块引用>

无法导入模块未定义"

这终于对我有用:

new webpack.ProvidePlugin({$: require.resolve('jquery'),jQuery: require.resolve('jquery')})

I am trying to access jquery in my application according to information on webpack website you are able to create global variable using webpack https://webpack.js.org/plugins/provide-plugin/

here is my webpack set up

module.exports = {
    entry: {
        index: "./scripts/index.js",
        vendorJS: ["jquery", "jquery-validation", "jquery-validation-unobtrusive"]
    }
    ,
    output: {
        path: path.join(__dirname, '/wwwroot/'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss', '.sass']
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.css$/i,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader']
                })
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['url-loader?limit=10000&mimetype=application/font-woff&name=/fonts/[name].[ext]'],
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['file-loader?name=/fonts/[name].[ext]'],
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['./wwwroot']),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        css
    ],

}

using thius set up i am unable to access my $ - jquery in console menu.

any idea why this is happening?

解决方案

I know it's late, but for Googlers (or Duck Duck goers if you care about privacy), I had the same problem:

if I used $: 'jquery' It threw

Can't resolve 'jquery'

If I used

const jquery = require('jquery');
$: jquery

It threw

Can't import module "undefined"

This finally worked for me:

new webpack.ProvidePlugin({
    $: require.resolve('jquery'),
    jQuery: require.resolve('jquery')
})

这篇关于ProvidePlugin 不适用于 jquery - webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！