我在我的应用程序中使用了 Webpack,其中我为所有 JavaScript 文件/代码创建了两个入口点 - bundle.js,以及为所有库(如 jQuery 和 React)创建.js供应商。为了使用以jQuery作为依赖项的插件,我该怎么办,并且我也想将它们放在供应商中.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
同样,当我使用导入加载器时,它会抛出一个错误,
未定义要求'
在这一行中:
var jQuery = require("jquery")
但是,当我不将其添加到我的供应商.js文件中时,我可以使用相同的插件,而是以正常的 AMD 方式需要它,就像我如何包含我的其他 JavaScript 代码文件一样,例如
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
但这不是我想要做的,因为这意味着jquery.elastic.source.js与我的JavaScript代码捆绑在一起.js,我希望我所有的jQuery插件都在供应商.js捆绑包中。那么我该如何实现这一目标呢?
您混合了如何包含旧供应商模块的不同方法。这就是我解决它的方式:
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. 使用导入加载器配置this
一些遗留模块依赖于this
作为window
对象。当模块在 CommonJS 上下文中执行时,这成为一个问题,其中 this
等于 module.exports
。在这种情况下,您可以使用导入加载器覆盖this
。
运行npm i imports-loader --save-dev
然后
module: {
loaders: [
{
test: /[/\]node_modules[/\]some-module[/\]index.js$/,
loader: "imports-loader?this=>window"
}
]
}
导入加载器也可用于手动注入各种变量。但大多数时候,当涉及到隐式全局变量时,ProvidePlugin
更有用。
4. 使用导入加载程序禁用 AMD
有些模块支持不同的模块样式,如AMD,CommonJS和Legacy。但是,大多数情况下,他们首先检查define
,然后使用一些古怪的代码导出属性。在这些情况下,它可以通过设置define = false
来强制使用 CommonJS 路径。
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$/
]
}
对于对jquery的全局访问,存在几个选项。在我最近的 webpack 项目中,我希望全局访问 jquery,所以我在我的插件声明中添加了以下内容:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
这意味着 jquery 可以通过全局引用 $ 和 jQuery 从 JavaScript 源代码中访问。
当然,你还需要通过 npm 安装 jquery:
$ npm i jquery --save
有关此方法的工作示例,请随时在 github 上分叉我的应用程序
我是否非常理解你想做什么,但我不得不使用jQuery插件,这些插件要求jQuery在全局上下文(窗口)中,我把以下内容放在我的entry.js
中:
var $ = require('jquery');
window.jQuery = $;
window.$ = $;
我只需要在我想要jqueryplugin.min.js
的地方要求,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文件添加如下:
var webpack = require("webpack");
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
使用 npm 安装 jQuery:
$ npm i jquery --save
在应用程序中.js文件添加以下行:
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
这对我有用。:)
将其添加到 webpack.config 中的插件数组中.js
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
然后正常需要jQuery
require('jquery');
如果让其他脚本看到它仍然存在痛苦,请尝试通过(在条目 js 中)将其显式放置在全局上下文中
window.$ = jQuery;
我尝试了一些提供的答案,但似乎都没有用。然后我试了这个:
new webpack.ProvidePlugin({
'window.jQuery' : 'jquery',
'window.$' : 'jquery',
'jQuery' : 'jquery',
'$' : 'jquery'
});
似乎无论我使用哪个版本都可以工作
在 webpack 3 中有效:
在 webpack.config.babel.js 文件中:
resolve: {
alias: {
jquery: "jquery/src/jquery"
},
....
}
并使用提供插件
new webpack.ProvidePlugin({
'$': '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;
我找到的最佳解决方案是:
https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059
基本上,你需要在 typings.d.ts 上包含一个虚拟变量,从代码中删除任何"import * as $ from 'jquery",然后手动将 jQuery 脚本的标签添加到你的 SPA html 中。这样,webpack 就不会妨碍你,你应该能够在所有脚本中访问相同的全局 jQuery 变量。
这在webpack.config上对我有用.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
在另一个JavaScript中或添加到HTML中:
global.jQuery = require('jquery');
无论谁在应用此处找到的良好解决方案后遇到任何问题,您所需要的只是按照 webpack.config.js 文件中的明确说明进行操作:
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
通过取消注释此行,您将获得良好的工作!