如何导出原生Bootstrap JS文件供ES6规范的React项目导入使用？

你遇到的导出失效问题核心原因是：Bootstrap 4 的 JS 构建包是 UMD 格式，仅会将所有组件方法挂载到 window.bootstrap 全局对象上，没有遵循 ES 模块规范显式声明导出内容，因此直接使用 export * 语法无法捕获到可导出的项。

以下是可直接落地的修改方案：

步骤1：修改 assets 包的入口文件 index.js #

根据你的使用需求选择对应写法：

场景1：仅需要统一加载 Bootstrap JS 副作用（无需调用 JS API） #

只需要保留副作用导入即可，不需要额外写导出语句：

// 加载Bootstrap JS，自动挂载所有组件逻辑到全局
import "bootstrap/dist/js/bootstrap.bundle"

场景2：需要将 Bootstrap 实例导出给业务项目调用 API #

手动导出全局挂载的 Bootstrap 对象：

import "bootstrap/dist/js/bootstrap.bundle"

// 导出完整Bootstrap对象
export default window.bootstrap
// 也可以按需导出常用组件，方便业务端直接引入
export const { Modal, Dropdown, Tooltip, Popover, Collapse } = window.bootstrap

步骤2：核对包配置 #

• 首先确认 assets 包的 package.json 正确配置了 main 字段指向入口文件，否则业务项目导入时会找不到模块：

{
  "name": "@bit/X.Y.Z.assets",
  "version": "1.0.0",
  "main": "index.js", // 此处路径要和你实际的入口文件路径匹配
  "dependencies": {
    "bootstrap": "^4.5.3"
  }
}

• 其次修正业务项目 package.json 里的依赖路径写法，你当前的写法少了冒号：

// 错误写法
"@bit/X.Y.Z.assets": "file./components/assets"
// 正确写法
"@bit/X.Y.Z.assets": "file:./components/assets"

步骤3：业务项目导入使用 #

• 仅需要加载 Bootstrap JS 逻辑时，直接导入即可生效：

import "@bit/X.Y.Z.assets"

• 需要调用 Bootstrap API 时，按需导入即可：

import { Modal } from "@bit/X.Y.Z.assets"

// 示例：手动触发模态框显示
const myModal = new Modal(document.getElementById("exampleModal"))
myModal.show()

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