带有Webpack 2的jQuery [英] jQuery with Webpack 2
问题描述
我的webpack.config.js如下所示:
My webpack.config.js looks as below :
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var node_dir = __dirname + '/node_modules';
const autoprefixer = require('autoprefixer');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: ['tether',
'font-awesome-loader',"bootstrap-loader","./js/client.js"],
resolve: {
extensions: ['.js', '.styl'],
alias: {
'jquery': node_dir + '/jquery/src/jquery.js',
}
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
},
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000',
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader',
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'stylus-loader',
/*options: {
use: [stylus_plugin()],
},*/
},
],
},
// Use one of these to serve jQuery for Bootstrap scripts:
// Bootstrap 4
{ test: /bootstrap\/dist\//, use: 'imports-loader?jQuery=jquery' },
]
},
output: {
path: __dirname + "/dist/",
filename: "client.min.js"
},
plugins: [
//new webpack.optimize.DedupePlugin(),
//new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports-loader?Util!bootstrap/js/dist/util",
}),
new webpack.LoaderOptionsPlugin({
postcss: [autoprefixer],
})
],
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React, Babel, Webpack 2</title>
</head>
<body class="container">
<div id="app"></div>
<script src="jquery.timeago.js"></script>
<script src="client.min.js"></script>
</body>
</html>
但是当我尝试使用jQuery.timeago()函数时，我遇到了错误提示.
But when I try to use jQuery.timeago() function I am getting below error.
我一直在关注React By Example本书.当我输入window.jQuery时，在jQuery之后出现了一些奇怪的数字.但是当我只输入jQuery时，我就变得不确定了.当引导程序4和$ .ajax()运行时，我确定包含了jQuery，但不确定为什么jQuery显示未定义.
I was following React By Example book. When I type window.jQuery I am getting some wierd numbers appearing after jQuery. But when I just type jQuery I am getting undefined. As bootstrap 4 and $.ajax() is working I am sure that jQuery is included but not sure why jQuery shows undifined.
任何人都可以解释一下如何包含jQuery以及我在做什么错.
Can anybody explain how jQuery is being included and what am I doing wrong.
推荐答案
将插件添加到webpack配置的插件部分，如下所示:
Add plugin to plugin section of your webpack config like this:
var webpack = require('webpack')
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
})
]
您具有循环依赖性:
timeago: jquery
client: timeago jquery
，但jquery和client是同一束.尝试像这样在html中切换包含js捆绑包:
but jquery and client is same bundle. Try to switch of include js bundles in html like this:
<script src="client.min.js"></script>
<script src="jquery.timeago.js"></script>
代替:
<script src="jquery.timeago.js"></script>
<script src="client.min.js"></script>
如果这没有帮助，或者您遇到其他错误，则需要将jquery提取到单独的包中，并将其包含在timeago之前.另一种方法是像在cdn中那样包含jquery之类的老学校，并让webpack像这样:
If that does not help or you have another errors you need to extract jquery to separated bundle and include it before timeago. Another way is to include jquery like old school for example from cdn and make webpack know that like this:
externals: {
jquery: 'jQuery'
}
要将jquery提取到单独的包中，并使其在timeago中可见，请包含以下序列:
To extract jquery to separated bundle and make it visible for timeago use include sequence like this:
<script src="common.js"></script>
<script src="jquery.timeago.js"></script>
<script src="client.min.js"></script>
并使用如下所示的webpack通用块插件:
And use webpack common chunk plugin like this:
entry: {
common: ["jquery"],
...
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "common.js",
minChunks: Infinity,
})
],
这篇关于带有Webpack 2的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
