使用Rollup编译Bootstrap 5时如何引入Popper.js解决未定义报错

报错根因 #

你当前配置中将@popperjs/core标记为了外部依赖，Rollup打包时不会把Popper.js的代码打包到最终产物child-theme.js中，而是会直接调用全局变量Popper。如果页面没有在加载child-theme.js之前单独引入Popper.js的UMD包，就会抛出"popper is not defined"错误。

解决方案 #

你可以根据自己的使用场景二选一：

方案1：保持Popper为外部依赖 #

不需要修改Rollup配置，只需调整页面资源引入顺序，保证child-theme.js加载前，已经完成jQuery和Popper.js的加载，且Popper.js暴露的全局变量名为Popper：

<!-- 第一步引入jQuery -->
<script src="jquery的本地路径或CDN地址"></script>
<!-- 第二步引入Popper.js UMD版本 -->
<script src="@popperjs/core/dist/umd/popper.min.js的本地路径或CDN地址"></script>
<!-- 最后引入打包好的业务脚本 -->
<script src="./js/child-theme.js"></script>

方案2：将Popper.js打包到最终产物中 #

不需要在页面单独引入Popper.js，修改Rollup配置和入口文件即可：

• 从external数组中移除@popperjs/core，修改后配置为：

const external = ['jquery']

• 从globals对象中移除@popperjs/core的对应配置，修改后配置为：

const globals = {
  jquery: 'jQuery'
}

• 在你的入口文件bootstrap.js顶部提前注入Popper到全局，避免Bootstrap组件调用时找不到依赖：

import * as Popper from '@popperjs/core'
window.Popper = Popper
// 之后再引入你需要的Bootstrap组件

内容的提问来源于stack exchange，提问作者Arvin Jill Joaquin Origenes