如何在Vite中实现RequireJS Shim依赖JQuery的等效配置？

要实现RequireJS里通过shims配置的jQuery依赖效果，有以下几种可行方案：

方案1：通过Esbuild全局注入jQuery #

Vite默认用Esbuild处理依赖预构建，可通过配置让Esbuild把jQuery注入全局作用域，让目标依赖能访问到window.jQuery或window.$：

在vite.config.js（或vite.config.ts）中添加配置：

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      inject: ['jquery'],
      define: {
        'window.jQuery': 'jQuery',
        'window.$': 'jQuery'
      }
    }
  }
});

此配置会让Esbuild在预构建阶段自动将jQuery挂载到全局，满足依赖项的访问需求。

方案2：Rollup全局变量配置（适配生产构建） #

如果需要确保生产构建时依赖也能正确获取jQuery，可结合Rollup的external和globals配置：

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      inject: ['jquery']
    }
  },
  build: {
    rollupOptions: {
      external: ['jquery'],
      output: {
        globals: {
          jquery: 'jQuery'
        }
      }
    }
  }
});

该配置会在生产打包时将jQuery标记为外部依赖，并映射到全局的jQuery变量，同时预构建阶段的注入保证开发环境正常运行。

方案3：手动包装依赖模块（特殊场景适配） #

如果全局注入不生效，可手动创建包装模块，先加载jQuery并挂载到全局，再导入目标依赖：

1. 在项目中创建shim-dependency-name.js文件：

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

// 导入需要依赖jQuery的目标模块
import 'dependency-name';

2. 在项目代码中，替换原有的import 'dependency-name'为：

import './shim-dependency-name.js';

这种方式完全模拟了RequireJS中shim的依赖加载顺序，确保依赖项初始化时jQuery已存在于全局环境。

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