如何使用 Bootstrap 4 安装 popper.js？答案

【问题标题】：How to install popper.js with Bootstrap 4?如何使用 Bootstrap 4 安装 popper.js？
【发布时间】：2018-04-12 21:10:49
【问题描述】：

从我目前所读到的，popper.js 是 Bootstrap 4 的一大痛点。我无法让它工作。我不断收到此错误：

错误：引导下拉菜单需要 Popper.js (https://popper.js.org)

我已经尝试过 CDN 和 NPM 安装。结果相同。在我的 HTML 文件的底部，我有这个用于 NPM 安装：

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>

然后为 CDN 尝试了这个：

<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="https://cdnjs.com/libraries/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>

任何想法我做错了什么？

【问题讨论】：

检查代码时是否遇到任何与 JavaScript 相关的错误？另见：getbootstrap.com/docs/4.0/getting-started/introduction
@RobertC：该链接中的 CDN 似乎可以解决此问题。我猜至少对于 bs4，你需要 Popper 1.12.3 而不是 1.12.6（NPM 版本）。
只需转到 Bootstrap home page 并复制/粘贴脚本和 CSS 的 CDN 条目。

标签： twitter-bootstrap popper.js

【解决方案1】：

npm install bootstrap jquery --save

您不必使用 npm 安装 popper.js，因为它带有 bootstrap.bundle.js 中的 npm Bootstrap。

捆绑的 JS 文件（bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js）包括 Popper，但不包括 jQuery。

要验证的来源：Link

现在您只需在 HTML 文件中执行此操作：

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

我在学习 Node.js 时遇到了同样的问题这是我的解决方案安装 jquery

npm install jquery@1.9.1 --save
npm install popper.js@^1.12.9 --save

【讨论】：

【解决方案3】：

很简单你可以Visit this，并将文件保存为popper.min.js

然后导入它。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import 'bootstrap/dist/js/popper.min.js';
global.jQuery = require('jquery');
require('bootstrap');

【讨论】：

我觉得这很简单，虽然我不是这样用的:)
如你所愿，兄弟。但这很简单

【解决方案4】：

我有两种不同的方式来完成这项工作。

选项 1： 将这 3 个 <script> 标签添加到您的 .html 文件中，就在关闭 </body> 标签之前：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

选项 2 （选项 2 适用于 Angular，不确定其他框架）

第 1 步： 使用 NPM 安装 3 个库：

npm install bootstrap --save

npm install popper.js --save

npm install jquery --save

第 2 步： 像这样更新 angular.json 文件中的 script: 数组：

"scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]

（感谢上面 cmets 中的@rakeshk-khanapure）

【讨论】：

我尝试了这个，因为我喜欢 angular.json 解决方案。这对我不起作用。下拉按钮不起作用：/ 使用 Angular 12.2.11

【解决方案5】：

而不是从 CDN 远程放置 popper js 您可以直接将其安装在您的 Angular 项目中。

试试这个。

npm install popper.js --save

此查询安装 popper.js 的更新版本不要在那里提及任何版本，它会为你工作。

【讨论】：

【解决方案6】：

我在安装 Bootstrap 时也遇到了问题，所以我做了：

安装 popper.js： npm install popper.js@^1.12.3 --save

安装 jQuery： npm install jquery@1.9.1 --save

然后我在安装 jquery@1.9.1 时收到了 高危漏洞 消息，并收到了以下消息：

运行npm audit fix 来修复它们，或npm audit 了解详情

于是我做了npm audit fix，又一个npm audit fix --force安装成功！

【讨论】：

【解决方案7】：

这是一个解决方法：

在与您的 index.html 相同的目录中创建一个js 目录
从以下站点下载popper.min.js到上述js目录 https://github.com/FezVrasta/popper.js#installation

例如： https://unpkg.com/popper.js/dist/umd/popper.min.js

将脚本包含的 src 更改为如下所示：

src="js/popper.min.js"

请注意，您已从 npm 版本控制中删除 Popper，因此您必须手动下载更新。

【讨论】：

【解决方案8】：

Pawel和Jobayer已经提到过如何通过npm安装popper.js。

如果您正在使用像 bower 这样的前端包管理器。使用以下命令

bower install popper.js --save

【讨论】：

【解决方案9】：

Bootstrap 4 有两个依赖项：jQuery 1.9.1 和 popper.js 1.12.3。在安装 Bootstrap 4 时，需要安装这两个依赖项。

安装popper.js：npm install popper.js@^1.12.3 --save
安装jQuery：npm install jquery@1.9.1 --save
安装引导程序：npm install bootstrap@4.0.0-beta.2 --save

对于 Bootstrap 4.1

npm install popper.js@^1.14.3 --save
npm install jquery@3.3.1 --save
npm install bootstrap@4.1.1 --save

【讨论】：

我可以发誓我可以通过一个帖子，允许您对所有三个包执行单行操作....我找不到它该死的！
我已经用 npm 安装了 popper，但它仍然从 bootstrap 文件夹中引用： ERROR in ./~/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve ' popper.js' in 'D:\Code\MyApp\node_modules\bootstrap\dist\js' @ ./~/bootstrap/dist/js/bootstrap.js 7:101-121 @ ./ClientApp/boot.ts @ multi事件源-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
我只更改了 jQureey 和 Popper 的版本，并且与 Bootstrap 4 npm install popper.js@^1.12.9 --save npm install jquery@3.2.1 --save npm install bootstrap@4.0.0 --save 配合得很好
还有一个叫popper的数据包，我总是对它们感到困惑。
在scripts数组下的angular.json文件中添加脚本文件，如下所述。请注意，脚本文件的顺序很重要，您需要使用 umd 版本的 popper js。 : =============== >>>>> "脚本": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd /popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]

【解决方案10】：

尝试这样做：

npm install bootstrap jquery popper.js --save

有关更多信息，请参阅此页面：how-to-include-bootstrap-in-your-project-with-webpack

【讨论】：

为我工作，但添加特定版本。

【解决方案11】：

https://cdnjs.com/libraries/popper.js 看起来不像 popper 的正确 src，它没有指定文件

我正在使用 bootstrap 4

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

效果很好，试试看

【讨论】：

它有效。你能解释一下它们之间有什么区别吗？
This: