如何使 Electron 与最新版本的 jQuery、Popper 和 Bootstrap 一起工作？答案

【问题标题】：How to make Electron work with the most recent versions of jQuery, Popper and Bootstrap?如何使 Electron 与最新版本的 jQuery、Popper 和 Bootstrap 一起工作？
【发布时间】：2021-08-01 04:55:42
【问题描述】：

我正在尝试使我的 Electron 应用程序与最新版本的 jQuery、Popper 和 Bootstrap 一起工作。不幸的是，在 index.html（渲染器进程）的 <head> 部分中引用 jQuery、Popper 和 Bootstrap 或“要求”它们都不起作用。

我试过了（选项 1）：

<script src='./node_modules/jquery/dist/jquery.min.js'></script>
<script src='./node_modules/@popperjs/core/dist/cjs/popper.js'></script>
<script src='./node_modules/bootstrap/dist/js/bootstrap.min.js'></script>
<link rel='stylesheet' type='text/css' media='screen' href='./node_modules/bootstrap/dist/css/bootstrap.min.css'>

我尝试了（选项 2）：

<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>require('bootstrap');</script>
<link rel='stylesheet' type='text/css' media='screen' href='./node_modules/bootstrap/dist/css/bootstrap.min.css'>

无论如何，如果可能的话，我想维护nodeIntegration: false。因此，我更喜欢第一个选项（没有require）。

我收到这些错误（选项 1）：

未捕获的 ReferenceError：“popper.js”中未定义导出 ...

index.html:85 Uncaught ReferenceError: $ is not defined ...

我得到了错误（选项 2）：

未捕获的错误：找不到模块“popper.js” ...

jQuery.Deferred 异常：$(...).tooltip 不是函数 TypeError: $(...).tooltip 不是函数 ...

TypeError: $(...).tooltip 不是函数 ...

这些是我正在使用的 npm 包：

@popperjs/core": "^2.9.2"
"bootstrap": "^5.0.0"
"electron": "^12.0.7"
"jquery": "^3.6.0"

在我的 Electron 应用程序中包含 Bootstrap 5.0（包括所需的“包”jQuery 和 Popper）是否有任何“最佳实践”方式？

PS：我在网上找到了很多教程和提示，但我发现的方法似乎都不适用于最新版本的 Bootstrap 等。

【问题讨论】：

标签： jquery electron bootstrap-5 popper.js

【解决方案1】：

在您明确提及之前，您不能引用node_modules。此外，明确提及是一种安全威胁

对于 Bootstrap 5 只需添加：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

对于 jQuery 添加：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

您只需复制他们的CDN 文件就像您在为浏览器编程时通常做的那样。它也适用于 Electron。

【讨论】：

如果有帮助，请您接受答案
electron 的一个特点是您可以构建独立的应用程序，而无需任何互联网连接。使用 CDN 将再次依赖在线资源。

【解决方案2】：

我设法使用：

package.json

"bootstrap": "^5.0.2",
"@popperjs/core": "^2.9.2",
"jquery": "^3.6.0"

在renderer.js

window.$ = window.jQuery = require('jquery');
window.bootstrap = require('bootstrap');

现在一切似乎都正常了

【讨论】：