如何在Bootstrap 5中仅引入所需独立JS文件？

Bootstrap 5的独立组件JS文件必须依赖Popper.js才能正常运行，这是你直接引入dist文件夹中单个组件文件报错的核心原因。以下是具体实现步骤：

步骤1：引入Popper.js依赖 #

首先需要引入Popper.js的核心文件，它是dropdown、carousel等组件实现定位交互的必要依赖。你可以从Bootstrap安装包的dist/js目录中找到popper.min.js文件，通过script标签优先引入：

<script src="你的文件路径/popper.min.js"></script>

步骤2：按需引入目标组件JS文件 #

在Popper.js之后，引入你需要的组件JS文件（顺序不影响核心功能，可按需调整）：

<!-- 折叠（collapse）功能 -->
<script src="你的文件路径/bootstrap-collapse.min.js"></script>
<!-- 下拉菜单（dropdown）功能 -->
<script src="你的文件路径/bootstrap-dropdown.min.js"></script>
<!-- 轮播（carousel）功能 -->
<script src="你的文件路径/bootstrap-carousel.min.js"></script>

注意事项 #

• 确保文件路径正确，Windows环境下可使用正斜杠/或反斜杠\，比如js/popper.min.js
• 所有独立组件JS文件都不能脱离Popper.js单独运行，必须先引入Popper
• 若对体积要求不高，也可直接引入bootstrap.bundle.min.js（该文件已包含Popper.js和所有Bootstrap组件），但无法实现按需缩减体积的需求

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