Javascript 如何导入 popper.js？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45650583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import popper.js?
提问by Qrzysio
It seems to be a lame question, but I cannot to figure it out. How to import popper.js which comes toghether with Bootstrap 4 beta?
这似乎是一个蹩脚的问题，但我无法弄清楚。如何导入 Bootstrap 4 beta 附带的 popper.js？
I use bower and I've installed Bootstrap 4 beta. Now in bower_componentsfolder there is popper.jsdirectory, which contains a few sub-folders. The problem is there is no distfolder and popper.min.jsfile.
我使用凉亭并且我已经安装了 Bootstrap 4 beta。现在bower_components文件夹中有popper.js目录，其中包含几个子文件夹。问题是没有dist文件夹和popper.min.js文件。
Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Bootstrap 4 CDN 指南链接：https: //cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
But how to import popper.js without CDN? Where to find popper.min.jsfile?
但是如何在没有 CDN 的情况下导入 popper.js？在哪里找popper.min.js文件？
EDIT: Even if I download zipfrom popper.js website it contains exactly the same files as from bower.
编辑：即使我zip从 popper.js 网站下载，它也包含与bower.
回答by Sora
I ran into the same problem.
我遇到了同样的问题。
I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.
我从引导程序网站上的 CDN 下载了“popper.min.js”文件。
See here: 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
Easier than compiling the project.
比编译项目更容易。
Important: You must include popper after jquery but BEFORE bootstrap.
重要提示：您必须在 jquery 之后但在引导程序之前包含 popper。
回答by Fez Vrasta
The official way to install Popper.js is trough npm, Yarn or NuGet.
安装 Popper.js 的官方方法是通过 npm、Yarn 或 NuGet。
Use either one of the following commands :
使用以下任一命令：
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Everything is described in the library readme.
所有内容都在库自述文件中进行了描述。
Regarding the "downloads the zip", the zip clearly states that it contains the source codeof the library.
关于“下载 zip”，该 zip 明确指出它包含库的源代码。
Edit:
编辑：
Starting from version 1.12.0, Popper.js is available as Bower dependency.
从 version 开始1.12.0，Popper.js 可用作 Bower 依赖项。
This installation method is going to be supported only for the 1.xversion of Popper.js and will be removed in 2.x.
此安装方法将仅支持1.xPopper.js 版本，并将在2.x.
You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.
您应该将您的依赖项管理迁移到现代系统，如 npm 或 Yarn，正如 Bower 所建议的那样。
回答by whitneyland
Ways to get popper.js: Package, CDN, and Local file
popper.js 获取方式：打包、CDN、本地文件
The best way depends on whether you have a project with a package manager like npm.
最好的方法取决于你是否有一个像 npm 这样的包管理器的项目。
Package manager
If you're using a package manager, use it to get popper.js like this:
包管理器
如果您使用的是包管理器，请使用它来获取 popper.js，如下所示：
npm install popper.js --save
CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:
CDN
对于原型或操场环境（如http://codepen.io）或可能只想要一个指向 CDN 文件的 URL：
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.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
note: Bootstrap 4 requires the versions under the umdpath (more info on popper/bs4).
注意：Bootstrap 4 需要umd路径下的版本（有关 popper/bs4 的更多信息）。
Local file
本地文件
Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.
只需保存其中一个 CDN 文件即可在本地使用。例如，将这些 URL 之一粘贴到浏览器中，然后另存为...以获取本地副本。
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.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
回答by MrGreen
I had the same problem. Tried different approches, but this one worked for me. Read the instruction from http://getbootstrap.com/.
我有同样的问题。尝试了不同的方法，但这个方法对我有用。从http://getbootstrap.com/阅读说明。
Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.
按照给定的方式（这很重要）复制 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-vFJXuSJphRtheitroadBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 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>回答by Surasin Tancharoen
I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.
我真的不明白为什么 Javascript 世界试图做更复杂的事情。为什么不直接下载并包含在 html 中？试图在 Java 中使用 Maven 之类的东西？但是无论如何我们必须手动将它包含在 html 中？那么，重点是什么？也许有一天我会明白，但不是现在。
This is how I can get it
这就是我可以得到它的方法
- download & install NodeJs
- run "npm install popper.js --save"
then I get this message
[email protected] added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist
- 下载并安装 NodeJs
- 运行“npm install popper.js --save”
然后我收到这条消息
[email protected] 在 1.215s 内添加了 1 个包
那么“添加包”在哪里？信息量很大，对吧？我在我的 C:\Users\surasin\node_modules\popper.js\dist 中找到它
Hope this help
希望这有帮助
回答by andhdo
add popper**.js** as dependency instead of popper (only): see the difference in bold.
添加 popper**.js** 作为依赖项而不是 popper（仅）：以粗体查看差异。
yarn add popper.js , instead of yarn add popper
yarn add popper.js ，而不是 yarn add popper
it makes the difference.
这很重要。
and include the script according your needs:
并根据您的需要包含脚本：
as html or the library access as a dependency in SPA applications like react or angular
作为 html 或库访问作为 SPA 应用程序（如 react 或 angular）中的依赖项
回答by rpd
I deleted any existing popper directories, then ran
我删除了所有现有的 popper 目录，然后运行
npm install --save popper.js angular-popper
回答by Ajit Kumar
IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.
在 bootstrap 4 中你需要为 tooltip 添加 popper js，我也不明白为什么 bootstrap 4 包含外部 popper.js，这意味着当升级到最新版本时，bootstrap 变得更加复杂而不是简单。
You can import popper js before bootstrap on angular or a simple html, Angular import would be like this
您可以在 angular 或简单的 html 上的引导程序之前导入 popper js，Angular 导入将是这样的
npm install popper.js --save
then go to .angular-cli.json and change the order like below.
然后转到 .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"
],
you can also use CDN direct call popper js into your any project.
您还可以使用 CDN 直接调用 popper js 到您的任何项目中。
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.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
回答by msmhsnl
Install popper.jswith spesific version number like this:
popper.js使用特定版本号安装，如下所示：
bower install popper.js@^1.16.0
Now u can find distfolder and popper.min.jsfile.
现在你可以找到dist文件夹和popper.min.js文件。
回答by Josh Habdas
You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:
您可以使用Fetch Injection使用单个命令下载并导入所有 Bootstrap 和 Popper ：
fetchInject([
'https://npmcdn.com/[email protected]/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/[email protected]/dist/js/tether.min.js'
]));
Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.
如果您也需要 CSS 文件，请添加这些文件。调整版本和外部源以满足您的需求，如果您不在自己的域中托管文件或不信任源，请考虑使用子资源完整性检查。
