如何将Bootstrap模块关联到WordPress内置jQuery？解决Gulp依赖报错

1. 先补上缺失的jQuery依赖 #

Bootstrap 4的JavaScript组件明确依赖jQuery，你目前只安装了Popper和Bootstrap，所以第一步要通过npm安装jQuery：

npm install jquery --save-dev

2. 在gulpfile.js中正确引入并暴露jQuery到全局 #

仅仅require('jquery')还不够，Bootstrap需要全局的jQuery和$变量才能正常初始化。修改你的gulpfile.js：

var gulp = require('gulp');
var sass = require('gulp-sass');
var jquery = require('jquery'); // 新增这行
var popperjs = require('popper.js');
var bootstrap = require('bootstrap');

// 把jQuery挂载到全局对象，让Bootstrap能找到它
global.jQuery = jquery;
global.$ = jquery;

3. 保证JS文件的加载顺序（核心要点） #

如果你的项目需要编译输出JS文件，一定要遵循jQuery → Popper → Bootstrap的加载顺序，否则Bootstrap会因为找不到依赖报错。你可以创建一个合并JS的任务：

// 先安装需要的gulp插件：npm install gulp-concat gulp-uglify --save-dev
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  return gulp.src([
      './node_modules/jquery/dist/jquery.min.js',
      './node_modules/popper.js/dist/umd/popper.min.js',
      './node_modules/bootstrap/dist/js/bootstrap.min.js',
      './src/js/your-custom-scripts.js' // 你的自定义JS
    ])
    .pipe(concat('bundle.js')) // 合并成一个文件
    .pipe(uglify()) // 可选：压缩代码
    .pipe(gulp.dest('./dist/js')); // 输出到目标目录
});

4. 编译Bootstrap Sass的额外提示（如果自定义样式） #

如果你要编译Bootstrap的Sass源码，需要让gulp-sass能找到Bootstrap的Sass文件，设置includePaths即可：

gulp.task('sass', function() {
  return gulp.src('./src/scss/style.scss')
    .pipe(sass({
      includePaths: ['./node_modules/bootstrap/scss']
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

之后你就能在自己的style.scss里直接导入Bootstrap：

@import "bootstrap";

最后验证（可选） #

如果还是有问题，可尝试清除依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

再运行你的Gulp任务，比如gulp sass或gulp scripts，应该就能解决找不到jQuery的报错了。

内容的提问来源于stack exchange，提问作者AndrewL64