jQuery 和 webpack：如何要求

Posted 2023-03-07

【中文标题】jQuery 和 webpack：如何要求

【英文标题】：jQuery and webpack: how to require

【发布时间】：2016-04-03 12:34:44

【问题描述】：

我知道有关此问题的 *** 上有几个类似的问题，但我已经关注了很多问题，但它们只提供了部分帮助。

我正在尝试使用 webpack 在我的 Angular 应用程序中使用 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。我已经删除了我在阅读 *** 上的其他一些帖子后所做的修改：

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（无论如何你都应该这样做，因为$ 可以是noConflicted 以指向完全不同的东西）。

【参考方案1】：

由于 webpack 使用模块，但 jQuery 需要是全局的，因此需要一种解决方法。

你需要使用expose loader

require("expose?$!jquery");

或

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

更详细的解释见： https://65535th.com/jquery-plugins-and-webpack/

【参考方案2】：

将您的 require 语句替换为以下内容：

window.$ = window.jQuery = require('jquery');

这会正确设置窗口对象上的$（和jQuery）属性（类似于在基本JS中使用脚本标签）

【讨论】：

您为什么想要在窗口对象上设置它们？将 jQuery 作为模块加载的重点不是污染全局对象。

因为看起来他正试图在别处使用它。如果他愿意，他可以摆脱window. 的两个实例并在不污染全局对象的情况下使用它

拥有多个全局属性不会伤害任何人。如果您无法控制如何维护变量，那么开发应用程序还为时过早。

真的只是为了支持使用jquery的遗留组件。 @SlashmanX 这不起作用；我曾经尝试过，但 $ 仍然未定义。我想让它在不真正修改组件代码的情况下工作。我会继续摆弄。

这对于让一些 3rd 方 CDN 加载代码 (JIRA) 与 VueJS 应用程序一起工作很有用 - 它修复了这个错误：未捕获的类型错误：无法读取未定义的属性 'noConflict'（在尝试时得到了那个）使用 import $,jQuery from 'jquery'; 语法）