Webpack Encore集成Bootstrap 5 ESM时全局变量缺失、jQuery插件加载失败如何解决

1. Bootstrap全局变量无法访问问题 #

ESM版本默认不会将Bootstrap实例挂载到window全局对象，官方文档提到的默认全局变量是UMD版本的行为，需手动挂载：

• 修改app.js中的引入代码：

// 全量引入Bootstrap ESM
import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.js'
// 手动挂载到全局
window.bootstrap = bootstrap

• 如果仅在Stimulus控制器中使用Bootstrap组件，更推荐直接在控制器内按需引入对应组件，无需挂载全局：

// 示例：Stimulus控制器中引入Modal组件
import { Controller } from '@hotwired/stimulus'
import { Modal } from 'bootstrap'

export default class extends Controller {
  // 直接使用Modal即可
}

2. Bootstrap jQuery插件未加载问题 #

Bootstrap 5已将jQuery设为可选依赖，ESM版本默认不会自动注册jQuery插件，需手动配置：

• 首先在webpack.config.js中开启jQuery自动注入：

Encore
  // 原有其他配置保持不变
  .autoProvidejQuery()

• 然后修改app.js代码，手动注册所有Bootstrap的jQuery插件：

import $ from 'jquery'
import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.js'

// 挂载全局Bootstrap变量
window.bootstrap = bootstrap

// 批量注册jQuery插件
Object.entries(bootstrap).forEach(([name, Plugin]) => {
  // 跳过内部私有属性、非插件对象
  if (name.startsWith('_') || typeof Plugin.jQueryInterface !== 'function') return
  $.fn[Plugin.NAME] = Plugin.jQueryInterface
  $.fn[Plugin.NAME].Constructor = Plugin
})

• 如果仅需兼容部分旧插件调用，也可以单独注册对应组件，无需遍历全量：

// 示例：仅注册Modal和Tooltip的jQuery调用
$.fn.modal = bootstrap.Modal.jQueryInterface
$.fn.tooltip = bootstrap.Tooltip.jQueryInterface

修改完成后重启Webpack Encore服务即可生效。

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