使用Gulp合并代码后，jQuery在核心应用文件中无法调用的问题求助

兄弟，我之前用Gulp做JS拆分打包时也踩过这个坑！按你说的加载顺序完全没问题，核心问题大概率出在打包配置或者jQuery的全局暴露上，给你几个实用的排查和解决方向：

1. 先确认Vendor任务是否正确包含jQuery #

首先得检查你的Gulp Vendor任务里，是不是真的把jQuery的文件路径加到了源文件列表里，而且要保证jQuery排在所有依赖它的第三方文件前面。比如你的Gulp代码应该类似这样：

gulp.task('vendor-js', function() {
  return gulp.src([
    'node_modules/jquery/dist/jquery.min.js', // 必须把jQuery放在最前面
    // 其他第三方依赖文件（比如bootstrap、swiper等）...
  ])
  .pipe(concat('app-vendor.js'))
  .pipe(uglify())
  .pipe(gulp.dest('dist/'));
});

如果jQuery没被正确加入Vendor打包，那全局自然找不到$或者jQuery变量。

2. 压缩插件可能把jQuery全局变量混淆/隐藏了 #

如果你用了uglify-es或者terser这类压缩混淆插件，它们默认会把“看起来像局部变量”的内容混淆甚至移除，这就会导致jQuery的全局$被隐藏。解决办法是给压缩插件加配置，强制保留jQuery和$这两个全局变量：

const terser = require('gulp-terser');

gulp.task('vendor-js', function() {
  return gulp.src([/* 源文件列表 */])
  .pipe(concat('app-vendor.js'))
  .pipe(terser({
    mangle: {
      reserved: ['jQuery', '$'] // 告诉压缩工具别碰这两个变量
    }
  }))
  .pipe(gulp.dest('dist/'));
});

没加这个配置的话，压缩后的jQuery可能就不再暴露全局的$，核心应用自然找不到它。

3. 模块化环境下要手动把jQuery挂载到全局 #

如果你的核心应用用了ES模块/CommonJS规范，而jQuery是通过npm安装的，它默认是模块化导出的，不会自动挂载到window对象上。这时候可以加一个小垫片文件来强制全局暴露：
创建一个vendor-shim.js，内容很简单：

window.jQuery = window.$ = jQuery; // 如果是直接加载jQuery文件，用这个
// 或者如果是用require引入的：window.jQuery = window.$ = require('jquery');

然后把这个垫片文件加到Vendor任务的源文件列表里（要放在jQuery之后），这样就能确保jQuery被挂载到全局，核心应用就能访问到了。

4. 排查浏览器缓存问题 #

有时候你改了打包配置，但浏览器还缓存着旧的dist文件。可以试试：

• 强制刷新浏览器（Ctrl+F5 或者 Cmd+Shift+R）
• 给打包后的文件名加哈希值（比如app-vendor-[hash].js），彻底避免缓存，Gulp可以用gulp-rev插件实现。

5. 检查核心应用的jQuery使用方式 #

确认你的核心应用代码是直接用全局的$或者jQuery，而不是用模块化导入（比如import $ from 'jquery'）。如果核心代码用了模块化导入，但你没在核心打包时引入jQuery，那肯定会报错。

先从这几个方向排查，大概率能解决问题！

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