最近在開(kāi)發(fā)使用Gulp構(gòu)建的前端項(xiàng)目時(shí)，遇到了一個(gè)使用jquery報(bào)錯(cuò)的問(wèn)題，令我苦惱了很長(zhǎng)時(shí)間。

我的項(xiàng)目中使用了Jquery庫(kù)，但是在使用Gulp進(jìn)行打包時(shí)，會(huì)出現(xiàn)以下錯(cuò)誤信息：

./src/js/app.js
Module not found: Error: Can't resolve 'jquery' in '/Users/xxx/project/src/js'

經(jīng)過(guò)我的多次試探和查找資料，終于找到了解決辦法。

首先，我們需要確定jquery是否已經(jīng)安裝，如果沒(méi)有安裝，可以通過(guò)npm進(jìn)行安裝：

npm install jquery --save-dev

其次，我們需要在gulpfile.js中引入jquery庫(kù)：

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
const path = require('path');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');
gulp.task('js', () =>{
return gulp.src('./src/js/app.js')
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest('./assets/js'))
.pipe(reload({ stream: true }));
});

最后，我們需要在webpack.config.js中添加jquery：

const webpack = require('webpack');
module.exports = {
entry: {
app: './src/js/app.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/assets/js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery', // 引入jquery庫(kù)
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};

完成以上步驟后，重新運(yùn)行Gulp命令，就可以成功打包引入了jquery庫(kù)的文件。

總之，在使用Gulp構(gòu)建前端項(xiàng)目時(shí)，要注意引入第三方庫(kù)的問(wèn)題，遇到報(bào)錯(cuò)問(wèn)題要多思考、多查找資料，才能解決問(wèn)題。