jQuery和webpack:如何使用require函数

3

我知道stackoverflow上有几个关于这个问题的类似问题,但我已经跟随了很多解答,它们只有部分地帮助了我。

我正在尝试在我的Angular应用程序中使用webpack来引用jQuery。然而,浏览器报错说找不到jQuery ($):

Uncaught TypeError: Cannot read property 'fn' of undefined

以及引发此错误的代码:

$.fn[_iCheck] = function(options, fire) { ... }

我已经检查过代码,发现此时$未定义。我认为我在webpack中正确地设置了jQuery。我已经使用npm安装了它,并像这样要求它:

var jQuery = require('jquery');

但我仍然遇到了错误,提示$未定义。

这是我的webpack.config.js文件。为了避免影响,我已经删除了之前在stackoverflow上看到的一些修改:

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
var toString = Function.prototype.call.bind(Object.prototype.toString);
var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    debug: true,
    devServer: {
        historyApiFallback: true,
        contentBase: 'src/public',
        publicPath: '/__build__'
    },
    entry: {
        'app': './src/app/bootstrap',
        'vendor': './src/app/vendor.ts'
    },
    output: {
        path: root('__build__'),
        filename: '[name].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.html']
        // ,
        // alias: { jquery: 'jquery/src/jquery'}
    },
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json' },
            { test: /\.css$/, loader: 'raw' },
            { test: /\.html$/, loader: 'html' },
            {
                test: /\.ts$/,
                loader: 'ts',
                exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
            },
            {
                test: /\.(woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
    ]
};

function root(args) {
    args = sliceArgs(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

function rootNode(args) {
    args = sliceArgs(arguments, 0);
    return root.apply(path, ['node_modules'].concat(args));
}

有人能帮忙吗?


var jQuery = ...并不能神奇地创建一个名为$的变量。要么将var jQuery重命名为var $,要么更改代码以使用jQuery.fn而不是$.fn(无论如何,您都应该这样做,因为$可以被noConflict指向完全不同的东西)。 - DCoder
2个回答

2

由于webpack使用模块,但jQuery需要全局,因此需要一个解决方法。

您需要使用expose loader

require("expose?$!jquery");

或者

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

更详细的说明请见:https://65535th.com/jquery-plugins-and-webpack/

1
请将您的require语句替换为以下内容:
window.$ = window.jQuery = require('jquery');

这将正确地在window对象上设置$(和jQuery)属性(类似于在基本JS中使用脚本标签)。

1
你为什么想要将它们设置在window对象上?将jQuery作为模块加载的整个意义就是不污染全局对象。 - DCoder
因为看起来他想在其他地方使用它。如果他希望,可以摆脱window.的两个实例,并且在不污染全局对象的情况下使用它。 - SlashmanX
2
拥有几个全局属性并不会伤害任何人。如果您无法控制如何维护变量,那么开发应用程序还为时过早。 - Ram
这只是为了支持使用 jQuery 的旧组件。@SlashmanX,这行不通;我之前已经尝试过了,但$仍然未定义。我希望能够在不真正修改组件代码的情况下使其正常工作。我将继续摆弄。 - serlingpa
1
这对于让VueJS应用程序与一些第三方CDN加载的代码(JIRA)配合使用非常有用 - 它修复了这个错误:Uncaught TypeError: Cannot read property 'noConflict' of undefined(当尝试使用import {$,jQuery} from 'jquery';语法时会出现此错误)。 - Elijah Lofgren

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接