如何导入 popper.js？
[英]How to import popper.js?
问题描述
这似乎是一个蹩脚的问题，但我无法弄清楚。 如何导入与 Bootstrap 4 beta 一起提供的 popper.js？
我使用 Bower，并且安装了 Bootstrap 4 beta。 现在在bower_components文件夹中，有popper.js目录，其中包含几个子文件夹。 问题是没有dist文件夹和popper.min.js文件。
CDN 的 Bootstrap 4 指南链接： https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js 。
如何在没有 CDN 的情况下导入popper.js ？ 在哪里可以找到popper.min.js文件？
编辑：即使我从 popper.js 网站下载了一个zip文件，它包含的文件与我从Bower下载的文件相同。
12 个解决方案
解决方案1
35 2017-08-13 06:21:39
我遇到了同样的问题。
我从引导程序网站上的 CDN 下载了“popper.min.js”文件。
见这里： https : //cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
比编译项目更容易。
重要提示：您必须在 jquery 之后但在引导程序之前包含 popper。
解决方案2
14 2017-08-13 10:18:47
安装 Popper.js 的官方方法是通过 npm、Yarn 或 NuGet。
使用以下任一命令：
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
所有内容都在库自述文件中进行了描述。
关于“下载 zip”，该 zip 明确指出它包含库的源代码。
编辑：
从版本1.12.0开始，Popper.js 可用作 Bower 依赖项。
这种安装方法将只支持1.x版本的 Popper.js 并将在2.x删除。
您应该将您的依赖项管理迁移到现代系统，如 npm 或 Yarn，正如 Bower 所建议的那样。
解决方案3
8 2017-10-01 16:46:58
popper.js 获取方式：打包、CDN、本地文件
最好的方法取决于你是否有一个像 npm 这样的包管理器的项目。
包管理器
如果您使用的是包管理器，请使用它来获取 popper.js，如下所示：
npm install popper.js --save
CDN
对于原型或游乐场环境（如http://codepen.io ）或可能只想要一个指向 CDN 文件的 URL：
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd /popper.min.js
注意：Bootstrap 4 需要umd路径下的版本（有关 popper/bs4 的更多信息） 。
本地文件
只需保存其中一个 CDN 文件即可在本地使用。 例如，将这些 URL 之一粘贴到浏览器中，然后另存为...以获取本地副本。
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd /popper.min.js
解决方案4
7 2017-11-02 05:15:26
我有同样的问题。 尝试了不同的方法，但这个方法对我有用。 从http://getbootstrap.com/阅读说明。
按照给定的方式（这很重要）复制 Javascript（Popper、jQuery 和 Bootstrap）的 CDN 路径。
<head> //Path to jQuery <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> ////Path to Popper - it is for dropsdowns etc in bootstrap <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> //Path to bootsrap <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head>
解决方案5
6 2017-11-11 14:05:24
我真的不明白为什么 Javascript 世界试图做更复杂的事情。 为什么不直接下载并包含在 html 中？ 试图在 Java 中使用 Maven 之类的东西？ 但是无论如何我们必须手动将它包含在 html 中？ 那么，重点是什么？ 也许有一天我会明白，但不是现在。
这就是我可以得到它的方法
- 下载并安装 NodeJs
- 运行“npm install popper.js --save”
然后我收到这条消息
popper.js@1.12.7 在 1.215s 内添加了 1 个包
那么“添加包”在哪里？ 信息量很大，对吧？ 我在我的 C:\\Users\\surasin\\node_modules\\popper.js\\dist 中找到它
希望这有帮助
解决方案6
3 2019-02-14 02:04:12
添加 popper**.js** 作为依赖项而不是 popper（仅）：以粗体查看差异。
yarn add popper.js ，而不是 yarn add popper
这很重要。
并根据您的需要包含脚本：
作为 html 或库访问作为 SPA 应用程序（如 react 或 angular）中的依赖项
解决方案7
2 2019-09-05 05:54:02
在 bootstrap 4 中你需要为 tooltip 添加 popper js，我也不明白为什么 bootstrap 4 包含外部 popper.js，这意味着当升级到最新版本时，bootstrap 变得更加复杂而不是简单。
您可以在 angular 或简单的 html 上的引导程序之前导入 popper js，Angular 导入将是这样的
npm install popper.js --save
然后转到 .angular-cli.json 并更改如下顺序。
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
您还可以使用 CDN 直接调用 popper js 到您的任何项目中。
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd /popper.min.js
解决方案9
0 2018-08-15 15:26:32
您可以使用Fetch Injection使用单个命令下载并导入所有 Bootstrap 和 Popper：
fetchInject([
'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js',
'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js'
]));
如果您也需要 CSS 文件，请添加这些文件。 调整版本和外部源以满足您的需求，如果您不在自己的域中托管文件或不信任源，请考虑使用子资源完整性检查。
解决方案10
0 2019-04-07 18:51:20
我删除了所有现有的 popper 目录，然后运行
npm install --save popper.js angular-popper
解决方案11
0 2020-02-19 15:21:31
使用popper.js版本号安装popper.js ，如下所示：
bower install popper.js@^1.16.0
现在你可以找到dist文件夹和popper.min.js文件。
解决方案12
0 2021-07-11 02:48:03
首先从yarn安装propperJs
yarn add popper.js
然后你可以像这样导入它
import Popper from "popper.js";
如何在 angular 项目中包含 popper.js 和 bootstrap.js
[英]How to include popper.js and bootstrap.js in angular project
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.