在Webpack中管理jQuery插件依赖性


451

我在应用程序中使用Webpack,在其中创建两个入口点-所有JavaScript文件/代码的bundle.js,以及jQuery和React之类的所有库的vendor.js。为了使用以jQuery为依赖项的插件,我想怎么做?我也想在vendor.js中使用它们吗?如果这些插件具有多个依赖项怎么办?

目前,我正在尝试在此处使用此jQuery插件-https: //github.com/mbklein/jquery-elastic。Webpack文档中提到了providePlugin和imports-loader。我使用了ProvidePlugin,但是jQuery对象仍然不可用。这是我的webpack.config.js的样子-

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

但是尽管如此,它仍然在浏览器控制台中引发错误:

未捕获的ReferenceError:未定义jQuery

同样,当我使用imports-loader时,它会引发错误,

要求未定义”

在这一行:

var jQuery = require("jquery")

但是,当我不将其添加到vendor.js文件中时,可以使用相同的插件,而是以正常的AMD方式要求它,就像我如何包含其他JavaScript代码文件一样,例如-

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

但这不是我想要做的,因为这意味着jquery.elastic.source.js与我的JavaScript代码一起捆绑在bundle.js中,并且我希望我所有的jQuery插件都在vendor.js捆绑包中。那么我该如何实现呢?


3
不知道这是否是您的问题,但您肯定需要将windows.jQuery更改为“ window.jQuery”:“ jquery”。webpack网站上有一个错字,我假设您从那里得到了代码。
亚历克斯·霍金斯

@AlexHawkins哦,是的,我注意到并修复了它。感谢您指出!
booleanhunter 2015年

Answers:


770

您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法:

1.优先使用最小的CommonJS / AMD dist

大多数模块dist在其main字段中链接版本package.json。尽管这对于大多数开发人员很有用,但对于webpack而言,最好为src版本加上别名,因为webpack能够更好地优化依赖关系(例如,使用时DedupePlugin)。

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

但是,在大多数情况下,该dist版本也可以正常工作。


2.使用ProvidePlugin注入隐式全局变量

大多数旧版模块依赖于特定全局变量的存在,例如jQuery插件on $jQuery。在这种情况下,您可以配置webpack,使其在var $ = require("jquery")每次遇到全局$标识符时都在前面。

var webpack = require("webpack");

    ...

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

3.使用imports-loader进行配置this

一些旧模块依赖于this成为window对象。当模块在thisequals 的CommonJS上下文中执行时,这将成为问题module.exports。在这种情况下,您可以this使用imports-loader覆盖。

运行npm i imports-loader --save-dev然后

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

imports-loader也可以用于手动注入各种变量。但是在大多数情况下,ProvidePlugin当涉及到隐式全局变量时,它会更有用。


4.使用imports-loader禁用AMD

有些模块支持不同的模块样式,例如AMD,CommonJS和legacy。但是,大多数情况下,他们首先检查define然后使用一些古怪的代码导出属性。在这些情况下,通过设置可以帮助强制CommonJS路径define = false

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5.使用脚本加载器全局导入脚本

如果您不关心全局变量,而只希望使用旧脚本,则也可以使用脚本加载器。它将在全局上下文中执行模块,就像您已通过<script>标签将其包括在内一样。


6. noParse用于包括大距离

如果该模块没有AMD / CommonJS版本,并且要包含dist,则可以将该模块标记为noParse。然后,webpack将仅包含模块而不对其进行解析,这可用于缩短构建时间。这意味着任何需要AST的功能(例如ProvidePlugin)都将无法使用。

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

3
ProvidePlugin应用在所有文件中指定的标识符的所有事件。本imports-loader可以在特定的文件只适用,但你不应该为同一变量/依赖性同时使用。
Johannes Ewald 2015年

5
我对此感到困惑。jQuery实际来自哪里?本地还是CDN?3.不清楚是否有必要。使用webpack将jquery集成到项目中的实际步骤是什么?它会绕过CDN上可用的版本吗?
HelpMeStackOverflowMyOnlyHope'5

2
CDN中的所有内容都超出了webpack的范围,因此这是指本地jquery安装。可能只需要Jquery,就不需要集成它的特殊步骤。这个问题是关于如何整合依赖于全局$变量的jQuery插件。
约翰内斯·埃瓦尔德

8
做了所有这些,仍然没有用;然后添加:"module": { "loaders": [ { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },它工作正常。
musicformellons

5
要做所有这些,只包含一个jquery包?,真是太痛苦了。我要回到我的大吃一惊
Rahul Gupta

89

为了全局访问jquery,则存在多个选项。在我最近的webpack项目中,我希望全局访问jquery,因此在插件声明中添加了以下内容:

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

这意味着可以通过全局引用$和jQuery从JavaScript源代码中访问jquery。

当然,您还需要通过npm安装jquery:

$ npm i jquery --save

有关此方法的可行示例,请随时将我的应用程序分叉到github上


2
如果您将投票的等级降级,说明原因,请留下您的评论。以上信息是准确的。请使用上述方法在github.com/arcseldon/react-babel-webpack-starter-app上查看我的工作应用程序。
arcseldon

我不是拒绝投票的人,但这也许是因为ProvidePlugin您建议的解决方案已经提出了吗?
黎奥林(LéoLam)2015年

@LéoLam-感谢您的评论。感谢您的意见-我已经通过单独的询问推导出了答案,并在这里分享了我认为与希望效仿我的人最相关的摘录。没错,官方答案确实涵盖了此选项。
arcseldon

1
它正在工作,但我收到2条警告:./~/jQuery/dist/jquery.js There is another module with an equal name when case is ignored.而同一条警告./~/jquery/dist/jquery.js
pistou

7
我需要添加'window.jQuery': 'jquery'到该列表中,以加载ms-signalr-client npm软件包。我也提出'window.$': 'jquery'了充分的措施:)
Sammi

57

我不知道我是否能很好地理解您要做什么,但是我不得不使用需要jQuery处于全局上下文(窗口)中的jQuery插件,并将以下内容放入我的entry.js

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

我只需要在我想要的地方就可以了,jqueryplugin.min.js并且window.$按预期扩展了插件。


2
基本上,我犯了使用ProvidePlugin和noParse条件的错误。如答案中第6点所述,如果我们执行NoParse,则诸如ProvidePlugin之类的插件将无法工作。您可以在代码中看到该错误
booleanhunter,2015年

是的,我发现跨插件的工作要比提供插件等的工作更一致。尤其是如果您通过脚本加载器引入angular1.x。
Tracker1

27

在Webpack 3.8.1及以下版本中,将它们作为全局变量公开时$,我的工作一切正常jQuery

将jQuery安装为项目依赖项。您可以省略@3.2.1安装最新版本或指定其他版本。

npm install --save jquery@3.2.1

expose-loader如果尚未安装,请作为开发依赖项安装。

npm install expose-loader --save-dev

配置Webpack为我们加载和公开jQuery。

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

5
您忘了提及您需要安装expose-loader才能正常工作 npm install expose-loader --save-dev
Paulo Griiettner

4
这对我有用。jQuery:3.3.1,暴露加载器:0.7.5,Webpack:4.20.2
AKT

expose-loaded为我做。编译时没有出现错误,但在Chrome开发人员工具中。现在解决了。
约翰·维格

谢谢!这适用于“ jquery”:“ ^ 3.4.1”和“ webpack”:“ ^ 4.41.5”。是我还是让jQuery与Webpack一起使用不应该这么荒谬?
Carles Alcolea

18

将此添加到webpack.config.js中的插件数组

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

然后通常需要jQuery

require('jquery');

如果仍然很难让其他脚本看到它,请尝试通过(在条目js中)将其显式地放置在全局上下文中。

window.$ = jQuery;

18

在您的webpack.config.js文件中添加以下内容:

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

使用npm安装jQuery:

$ npm i jquery --save

在app.js文件中,添加以下几行:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

这对我有用。:)


如果您有前任,将如何处理。app.js和jquery-module.js都需要jquery ?,对我来说,我在窗口中获得了jquery13981378127和jquery12389723198吗?
Martea

8

我尝试了提供的一些答案,但似乎都没有用。然后我尝试了这个:

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

不管我使用哪个版本,都可以正常工作


+1似乎是一种误解,认为此处添加的全局变量会自动设置在窗口上,似乎无法像您需要的那样工作。
詹姆斯

正确,这不会将其添加到窗口对象。它在webpack内创建一个窗口别名。因此,如果您尝试在$Webpack所需文件之外使用,则该文件将是未定义的。
卡姆·图洛斯

7

这适用于webpack 3:

在webpack.config.babel.js文件中:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

并使用ProvidePlugin

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

1
(!像我)对于其他人来说是超级新在的WebPack“决心”去你的webpack.config.js下module.exports = {}就像输入,输出,插件,模块等。
DavGarcia

1
并且新的webpack.ProvidePlugin进入了plugins数组。
DavGarcia


2

这对我在webpack.config.js上有效

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

在另一个JavaScript或HTML中添加:

global.jQuery = require('jquery');

0

编辑:有时您只想将webpack用作简单Web项目的模块捆绑器-保持自己的代码井井有条。以下解决方案适用于那些只希望外部库在其模块内按预期工作的用户,而又无需花费大量时间来研究webpack设置。(在-1之后编辑)

快速简便的解决方案(es6),如果您仍在挣扎或希望避免使用外部配置/其他webpack插件配置:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

在模块内部:

const { jQuery: $, Underscore: _, etc } = window;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.