javascript – 在Webpack中使用jQuery

2023年1月15日 157次阅读

我正在从RequireJS迁移到Webpack,我在为模块需要jQuery时遇到了一些麻烦.

我知道有一些关于这方面的答案,我已经完成了它们,但我无法让它工作.这一个：Managing Jquery plugin dependency in webpack是我读过的那个.

我的webpack.config.js看起来像这样：

var webpack = require("webpack");
var bower_dir = __dirname + '/bower_components';

var config = {
    addVendor: function(name, path) {
        this.resolve.alias[name] = path;
        //this.module.noParse.push(new RegExp(path));
    },
    entry: {
        app: ['./app/js/main.js'],
        vendors: ['jquery', 'bootstrap']
    },
    resolve: { alias: {} },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jquery": "jquery"
        })
    ],
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    module: {
        noParse: [bower_dir + '/bootstrap/dist/js/bootstrap.min.js'],
        loaders: []
    }
};

config.addVendor('jquery', bower_dir + '/jquery/jquery.js');
config.addVendor('bootstrap', bower_dir + '/bootstrap/dist/js/bootstrap.min.js');

module.exports = config;

我正在使用ProvidePlugin在每个使用它的模块上都需要jQuery.
另外,我将供应商库放在vendors.js文件中,将我的模块放在main.js中.

我的main.js文件有几行代码只是为了测试$是否解析为jQuery：

$(".search-toggle").on("click", function(e) {
    e.preventDefault();
    $(".search-container").toggle();
});

我的index.html有以下几行：

<script src="<s:url  value="/resources/build/vendors.js"/>"></script>
<script src="<s:url  value="/resources/build/bundle.js"/>"></script>

当我运行我的应用程序时,我得到Uncaught TypeError：$即使$在全局范围内,也不是控制台中的函数.

我真的很感激你是否可以帮助我,因为我一直在编写和重写我的代码而无处可去.

非常感谢你提前！

最佳答案 而不是webpack.ProvidePlugin,你可以使用
https://github.com/webpack/expose-loader：

装载机：[{
  test：require.resolve(‘jquery’),
  loader：’expose？$！expose？jQuery’,
}]

点赞