管理webpack中的jQuery插件依赖

我在我的应用程序中使用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;

但尽管如此，它仍然在浏览器控制台抛出一个错误:

未定义jQuery

类似地，当我使用导入加载器时，它抛出一个错误，

Require没有定义

在这一行中:

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捆绑包中。那么我该怎么做呢?

360198 次浏览
小开
最佳答案

您混合了包括遗留供应商模块的不同方法。我是这样处理的:

1. 更喜欢未简化的CommonJS/AMD而不是dist

大多数模块在它们的package.json的main字段中链接dist版本。虽然这对大多数开发人员都很有用，但对于webpack来说，最好是别名src版本，因为这样webpack能够更好地优化依赖关系(例如，当使用DedupePlugin时)。

// webpack.config.js


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

然而，在大多数情况下，dist版本也可以很好地工作。

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

大多数遗留模块依赖于特定全局变量的存在，就像jQuery插件在$或jQuery上所做的那样。在这种情况下，你可以配置webpack，在每次遇到全局$标识符时将var $ = require("jquery")前置。

var webpack = require("webpack");


...
    

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

3.使用imports-loader来配置this

一些遗留模块依赖this作为window对象。当模块在CommonJS上下文中执行，其中this等于module.exports时，就会出现问题。在这种情况下，你可以用imports-loader覆盖this。

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

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

导入加载器还可以用于手动注入各种类型的变量。但大多数情况下，当涉及到隐式全局变量时，ProvidePlugin更有用。

4. 使用imports-loader禁用AMD

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

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

5. 使用script-loader(不再维护)全局导入脚本

如果不关心全局变量，只想让遗留脚本正常工作，也可以使用脚本加载器。它在全局上下文中执行模块，就像你通过<script>标记包含了它们一样。

6. 使用noParse来包含大的dist

当模块没有AMD/CommonJS版本并且你想包含dist时，你可以将这个模块标记为noParse。然后webpack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何需要AST的特性，比如ProvidePlugin，都不能工作。

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

我不知道我是否很好地理解了你要做的事情，但我不得不使用jQuery插件，需要jQuery在全局上下文中(窗口)，我把以下内容放在我的entry.js中:

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

我只需要在我想要的任何地方要求jqueryplugin.min.js和window.$按预期与插件扩展。

小开

对于全局访问jquery，则存在几个选项。在我最近的webpack项目中，我想要全局访问jquery，所以我在我的插件声明中添加了以下内容:

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

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

当然，你还需要通过npm安装jquery:

$ npm i jquery --save

对于这种方法的工作示例，请随时在github上fork我的应用程序

小开

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

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

然后正常使用jquery

require('jquery');

如果疼痛持续让其他脚本看到它，尝试显式地将它放在全局上下文中(在入口js中)

window.$ = jQuery;
小开

我找到的最佳解决方案是:

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

基本上，您需要在types .d中包含一个虚拟变量。ts，删除任何import * as $ from 'jquery"从你的代码，然后手动添加一个标签到jquery脚本到你的SPA html。这样，webpack就不会成为你的障碍，而且你应该能够在你的所有脚本中访问相同的全局jQuery变量。

小开

这在webpack 3:中有效

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

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

并使用ProvidePlugin

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

我尝试了一些提供的答案，但似乎没有一个奏效。然后我试了一下:

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

似乎工作，无论我使用哪个版本

小开

编辑:有时候你想把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;
小开

在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'
})
]
}
小开

这适用于我的webpack.config.js

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

在另一个javascript或HTML添加:

global.jQuery = require('jquery');
小开

在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.$ = $;

这对我很管用。：）


提交答案