如何在ESM环境中为非模块JavaScript插件注入jQuery？

步骤1：配置importmap映射jQuery #

先在HTML的<script type="importmap">或单独的importmap.json中添加jQuery的映射：

{
  "imports": {
    "jquery": "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
  }
}

步骤2：将jQuery挂载到全局window对象 #

创建一个专门的模块脚本（比如setup-jquery.js），把jQuery暴露给全局环境——非模块的select2entity-bundle只会从window读取jQuery：

// setup-jquery.js
import $ from 'jquery';
// 同时挂载jQuery和$两个常用全局变量
window.jQuery = window.$ = $;

步骤3：按正确顺序加载脚本 #

在HTML中严格按以下顺序引入脚本，确保全局jQuery先被初始化，再加载select2entity-bundle：

<!-- 加载importmap配置 -->
<script type="importmap">
  {
    "imports": {
      "jquery": "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
    }
  }
</script>

<!-- 执行jQuery全局挂载脚本 -->
<script type="module" src="/path/to/setup-jquery.js"></script>

<!-- 加载非模块的select2entity-bundle -->
<script src="/path/to/select2entity-bundle.js"></script>

<!-- 你的业务逻辑模块 -->
<script type="module" src="/path/to/your-app.js"></script>

关键注意事项 #

• 模块脚本默认是异步加载的，但按HTML中的书写顺序会依次执行，所以必须保证setup-jquery.js在select2entity-bundle之前加载。
• 不要尝试直接用import导入非模块的select2entity-bundle，它不支持ES模块规范，必须用传统<script>标签加载。
• 如果select2entity-bundle依赖Select2，也要确保Select2在它之前加载——若Select2是模块，同样需要先挂载到全局，或用相同的shim方式处理。

替代方案：用ES模块Shim包装插件 #

若想全程用模块管理，可创建一个shim脚本包装select2entity-bundle：

// select2entity-shim.js
import $ from 'jquery';
// 临时挂载全局jQuery供插件读取
window.jQuery = window.$ = $;
// 动态加载非模块插件
await import('/path/to/select2entity-bundle.js');
// 可选：用完移除全局挂载，避免污染
delete window.jQuery;
delete window.$;
// 导出插件（假设插件挂载到window.Select2Entity）
export default window.Select2Entity;

然后在业务模块中导入使用：

import Select2Entity from './select2entity-shim.js';
// 正常初始化插件
$('.select2entity').select2entity();

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