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

Question

从我目前所读到的，popper.js 对 Bootstrap 4 来说是一个很大的问题。我无法让它工作。 我不断收到此错误：

错误：Bootstrap 下拉菜单需要 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>

任何想法我做错了什么？

Answer 1

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
• 安装 Bootstrap： 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

Answer 2

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>

它工作得很好，试一试

Answer 3

尝试这样做：

npm install bootstrap jquery popper.js --save

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

Answer 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: array(s)：

"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"]

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

Answer 5

我在安装 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之后成功安装！

Answer 6

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

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

bower install popper.js --save

Answer 7

很简单，你可以访问这个，并将文件保存为 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');

Answer 8

npm install bootstrap jquery --save

您不必使用 npm 安装 popper.js，因为它在bootstrap.bundle.js随 npm Bootstrap 一起提供。

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

验证来源：链接

现在您只需在 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>

Answer 9

这是一个解决方法：

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

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

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

   src="js/popper.min.js"

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

Answer 10

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

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

Answer 11

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

试试这个。

npm install popper.js --save 

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