如何在Electron应用中正确引入Bootstrap 4 JS？标签页无法切换

首先，你的问题核心是Bootstrap的依赖（jQuery和Popper）没有正确挂载到全局window对象上，导致Bootstrap JS无法初始化标签页这类交互组件。我帮你梳理下修复步骤：

1. 确认依赖安装正确 #

先确保你已经安装了所有必需的包，在项目根目录执行：

npm install jquery popper.js bootstrap --save

注意是popper.js而不是popper，Bootstrap 4+依赖的是这个包。

2. 修改JS导入代码 #

把你HTML里的<script>部分改成下面这样：

<script>
// 先挂载jQuery到全局
window.$ = window.jQuery = require('jquery');
// 正确导入Popper（注意要取default导出）
window.Popper = require('popper.js').default;
// 最后导入Bootstrap
require('bootstrap');
// 保留你的renderer.js导入
require('./renderer.js');
</script>

为什么要这么改？ #

• jQuery必须挂载到window上，Bootstrap会全局查找jQuery对象
• Popper.js的CommonJS导出是通过default暴露的，直接require('popper.js')拿不到正确的对象，必须加.default
• 导入顺序很重要：jQuery → Popper → Bootstrap，Bootstrap依赖前两者先存在

3. 修复标签页的HTML代码（可选但推荐） #

你从Bootstrap官网复制的代码可能是旧版本的，Bootstrap 4+里tab-pane的in类已经被移除了，改成show类，所以把这一行：

<div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>

改成：

<div role="tabpanel" class="tab-pane fade show active" id="profile">...</div>

这样更符合Bootstrap最新版本的规范，避免不必要的样式问题。

做完这些步骤后，重启你的Electron应用，标签页应该就能正常切换了。

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