使用Gulp安装jQuery&Bootstrap4时出现未定义属性错误求助

嘿，我之前搭建Bootstrap4 + WordPress + Gulp项目时，也踩过这个一模一样的坑！这个报错本质上是Bootstrap的JavaScript模块找不到全局的jQuery对象导致的，给你几个具体的解决步骤：

1. 严格控制JS文件的加载顺序 #

Bootstrap4的JS完全依赖jQuery和Popper.js，必须按照「jQuery → Popper.js → Bootstrap JS」的顺序加载，否则就会出现找不到依赖的报错。

在你的Gulp脚本任务中，把src的文件顺序调整成这样：

gulp.task('scripts', function() {
  return gulp.src([
    // 先加载jQuery核心
    'node_modules/jquery/dist/jquery.min.js',
    // 然后是Popper.js（注意是Bootstrap4依赖的旧版popper.js，不是@popperjs/core）
    'node_modules/popper.js/dist/umd/popper.min.js',
    // 最后才加载Bootstrap的JS
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    // 你的自定义JS文件放在最后
    'src/js/**/*.js'
  ])
  .pipe(concat('app.js')) // 合并成一个文件
  .pipe(gulp.dest('./wp-content/themes/你的主题/js/')); // 输出到WordPress主题目录
});

2. 确保jQuery被挂载为全局变量 #

有时候即使你导入了jQuery，模块化环境下它不会自动挂载到window对象上，Bootstrap找不到$或jQuery全局变量就会报错。你可以在自定义JS的顶部手动挂载：

// 在你的主JS文件顶部添加这行代码
window.jQuery = window.$ = require('jquery');

如果用ES6语法：

import $ from 'jquery';
window.jQuery = window.$ = $;

3. 检查依赖版本兼容性 #

Bootstrap4对依赖版本有严格要求，别装错了：

• jQuery：必须是1.9.1 ~ 3.5.x之间的版本，不要用jQuery 4.x（Bootstrap4不支持），安装指定版本：

  npm install jquery@3.5.1 --save-dev
  

• Popper.js：必须安装旧版的popper.js包，不是给Bootstrap5用的@popperjs/core，安装命令：

  npm install popper.js@1.16.1 --save-dev
  

4. 验证修复效果 #

运行Gulp任务后，打开浏览器控制台，输入$或jQuery，如果能返回jQuery对象，说明全局挂载成功了。此时再测试Bootstrap的组件（比如下拉菜单、模态框），应该就能正常工作了。

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