使用esbuild时，依赖jQuery的文件提示“jQuery is not defined”的解决问询

问题原因 #

你之前的尝试无效，核心原因是ES模块的import语句会被引擎优先提升执行。哪怕你把window.jQuery = jQuery;写在import './otherFile.js';前面，实际执行顺序是先加载所有import的模块，再执行赋值代码，导致依赖文件加载时全局还没有jQuery。

可行解决方案 #

方案1：用esbuild的全局注入配置（推荐） #

通过esbuild的inject配置，把jQuery挂载到全局的代码注入到每个模块的最前面，确保所有依赖文件加载前jQuery已经存在。

1. 创建一个shim文件（比如jquery-shim.js），内容如下：

import jQuery from './jquery-3.7.1.js';
window.jQuery = window.$ = jQuery;

2. 在esbuild的构建配置里添加inject参数：

• 命令行方式：

esbuild your-entry-file.js --bundle --inject:./jquery-shim.js --outfile=dist/bundle.js

• 配置文件方式（比如esbuild.config.js）：

require('esbuild').build({
  entryPoints: ['your-entry-file.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  inject: ['./jquery-shim.js'],
}).catch(() => process.exit(1));

之后直接在入口文件里导入依赖文件即可，不用额外处理：

import './otherFile.js';

方案2：修改依赖文件为ES模块规范 #

如果otherFile.js是你自己维护的代码，直接在里面通过import引入jQuery，不用依赖全局变量：

// otherFile.js
import jQuery from './jquery-3.7.1.js';
// 之后正常使用jQuery即可
$('.foo').show();

这种方式符合现代模块规范，不需要全局挂载，是最干净的方案。

方案3：为第三方依赖配置全局别名 #

如果依赖文件是第三方库（无法修改源码），还可以通过esbuild的globals配置，把模块导入映射到全局变量：

在构建配置里添加globals：

require('esbuild').build({
  entryPoints: ['your-entry-file.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  globals: {
    jquery: 'jQuery' // 把模块名"jquery"映射到全局变量jQuery
  },
  external: ['jquery'] // 如果jQuery是通过npm安装的，需标记为外部依赖，配合CDN引入
}).catch(() => process.exit(1));

这种情况下需要在HTML里先通过CDN引入jQuery，再加载打包后的文件：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="dist/bundle.js"></script>

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