如何安装 popper.js 和 Bootstrap 4？

Question

根据我目前所读的内容，popper.js 对 Bootstrap 4 来说是一个很大的痛苦。我无法让它工作。我不断收到此错误：

Error: Bootstrap dropdown require 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

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

with 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 2

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

安装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 3

尝试这样做：

npm install bootstrap jquery popper.js --save

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

Answer 4

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

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

bower install popper.js --save

Answer 5

这是一个解决方法：

在与 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，因此您必须手动下载更新。

Answer 6

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

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

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

然后我在安装 jquery@1.9.1 时遇到 高严重性漏洞 消息并收到此消息：

run npm audit fix to fix them, or npm audit for details

于是就npm audit fix，又npm audit fix --force安装成功！

Answer 7

我使用两种不同的方法来完成这项工作。

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

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

Answer 8

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

Try this.

npm install popper.js --save

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

Answer 9

很简单，你可以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');

Answer 10

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

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

Answer 11

npm install bootstrap jquery --save

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

Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not 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>

如何安装 popper.js 和 Bootstrap 4？

How to install popper.js with Bootstrap 4?

twitter-bootstrap

popper.js