是,Bootstrap 5 内置并强制依赖 @popperjs/core v2,用于 Dropdown、Tooltip、Popover 的核心定位功能,不可移除或降级为 v1。
Bootstrap 5 的下拉菜单还依赖 Popper 吗?
不依赖外部 popper.js,但 bootstrap 5 内置了精简版 @popperjs/core(v2),且必须存在——它被直接打包进 bootstrap.js 或作为 peer dependency 强制要求。
你不能删掉它,也不能用 Popper v1 替代;否则 Dropdown、Tooltip、Popover 全部失效,控制台会报 Popper is not defined 或 Cannot read properties of undefined (reading 'createPopper')。
- CDN 引入时,Bootstrap 5 官方 JS 文件已内联 Popper 逻辑,无需额外 script 标签
- npm 安装时,
bootstrap包的package.json明确声明"@popperjs/core": "^2.11.8"为 dependencies(不是 dev) - 如果你用 ES 模块手动引入(如
import { Dropdown } from 'bootstrap'),构建工具会自动解析并捆绑@popperjs/core
为什么不用 Popper v1 或自己写定位逻辑?
Popper v2 重构了 API,移除了 offset、flip 等旧插件概念,改用 modifiers 数组配置行为;Bootstrap 5 的 JS 源码完全基于这套新机制编写,和 v1 不兼容。
更重要的是:Bootstrap 5 移除了所有自研定位代码,彻底交由 Popper 处理边界检测、翻转、偏移、防溢出等——它不是“可选增强”,而是核心定位引擎。
- 试图替换为
popper.js(v1)会导致createPopper is not a function - 删掉
@popperjs/core后,new Dropdown()实例化会静默失败,下拉框点击无反应 - 自定义定位(比如用
position: absolute+ JS 计算)无法处理滚动容器、视口边界、RTL 等场景,稳定性远不如 Popper
CDN 使用时要注意什么?
官方 CDN 提供两个 JS 版本:bootstrap.bundle.js(含 Popper)和 bootstrap.js(不含)。绝大多数人应该用前者,否则要手动加 Popper 的 CDN 链接。
- ✅ 正确:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> - ❌ 错误:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>(没 Popper,下拉菜单不工作) - ⚠️ 如果你非要用
bootstrap.min.js,必须额外引入:<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>,且顺序要在 Bootstrap 之前
构建时 Tree-shaking 会影响 Popper 吗?
不会。Bootstrap 5 的模块导出(如 Dropdown)在内部动态 import 了 @popperjs/core,Webpack/Rollup 能识别并保留依赖。但注意:不要在构建配置里把 @popperjs/core 设为 external,否则运行时报错。
- ESM 场景下,即使只 import
{ Dropdown },打包后仍会包含 Popper 的必要逻辑 - Vite 用户需确保
optimizeDeps.include没排除@popperjs/core(默认不会) - 如果用了
sideEffects: false,请在package.json中显式保留:"sideEffects": ["./dist/css/*", "@popperjs/core"]
ReferenceError: Popper is not defined。











