如何导入 popper.js？

Posted

技术标签:

【中文标题】如何导入 popper.js？【英文标题】：How to import popper.js? 【发布时间】：2018-01-20 21:06:21 【问题描述】：

这似乎是一个蹩脚的问题，但我无法弄清楚。如何导入 Bootstrap 4 beta 自带的 popper.js？

我使用 Bower，并且安装了 Bootstrap 4 beta。现在在bower_components 文件夹中，有popper.js 目录，其中包含一些子文件夹。问题是没有dist文件夹和popper.min.js文件。

引导至 CDN 的 4 指南链接：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 下载的文件相同。

【问题讨论】：

将它（从 CDN）下载到您的服务器目录，然后从那里引用？！ 您链接到的文件创建了一个Popper 变量，因此下载该文件并通过<script> 导入它应该可以工作。 我希望用户 bower 以后能够轻松更新脚本。 Bower 已弃用，请使用 npm 【参考方案1】：

我遇到了同样的问题。

我从引导网站上的 CDN 下载了“popper.min.js”文件。

请看这里：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

比编译项目更容易。

重要提示：您必须在 jquery 之后但在 bootstrap 之前包含 popper。

【讨论】：

老兄，你是我的英雄。在我的空闲时间学习 web 开发，每个人都在谈论 Bower 和 Yarn 等。然后你就像，只要包括这个。 这种方法很酷的部分，你已经落后于我的库的最新版本，你错过了一些重要的修复。这就是依赖管理器存在的原因。 @FezVrasta 你是什么意思？ 如果你复制粘贴代码而不使用依赖管理器，你会错过重要的更新。 @FezVrasta 有道理。但是我确定使用它的人都知道，因为它是本地文件？【参考方案2】：

官方安装 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 中删除。

您应该按照 Bower 的建议将您的依赖管理迁移到现代系统，如 npm 或 Yarn。

【讨论】：

这并不容易。通过 Bower 安装 Bootstrap 4 时，它正在下载未编译的 popper.js，但下载的 jQuery 已“准备就绪”。 Bower 已弃用，您应该使用 npm npm 似乎没有安装实际的 popper.js 文件。之后还有下一步吗？ 您在 dist 文件夹中找到文件。确保安装 popper.js，而不是“popper” Fez Vrasta，你刚刚为我节省了几个小时。 npm install popper.js --save【参考方案3】：

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 路径 (more info on 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】：

我遇到了同样的问题。尝试了不同的方法，但这一种对我有用。 阅读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】：

我真的不明白为什么 javascript 世界试图做更复杂的事情。为什么不直接下载并包含在 html 中？试图在 Java 中拥有类似 Maven 的东西？但是我们必须手动将它包含在 html 中吗？那么，重点是什么？也许有一天我会明白，但不是现在。

这就是我得到它的方法

下载并安装 NodeJs 运行“npm install popper.js --save”

然后我收到这条消息

popper.js@1.12.7 在 1.215 秒内添加 1 个包

那么“添加包”在哪里？非常翔实，对吧？我在我的 C:\Users\surasin\node_modules\popper.js\dist

中找到了它

希望有帮助

【讨论】：

太多基于意见的答案，没有大量技术资源。 我也不明白为什么bootstrap 4包含外部popper.js，这意味着升级到最新版本时bootstrap变得更加复杂而不是简单。【参考方案6】：

添加 popper**.js** 作为依赖而不是 popper（仅）：查看粗体的区别。

纱线添加 popper.js ，而不是 纱线添加波普尔

它有所作为。

并根据您的需要包含脚本：

作为 html 或 库访问作为 SPA 应用程序（如 react 或 angular）中的依赖项

【讨论】：

【参考方案7】：

在bootstrap 4中你需要添加popper js作为tooltip，我也不明白为什么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.jshttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

【讨论】：

【参考方案8】：

我删除了所有现有的 popper 目录，然后运行 ​​

npm install --save popper.js angular-popper

【讨论】：

【参考方案9】：

事实证明，Popper.js doesn't provide compiled files 在其 GitHub 存储库中。因此，必须自己编译项目或从 CDN 下载编译后的文件。无法自动导入。

【讨论】：

建议的方式是实际使用npm【参考方案10】：

您可以使用 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 文件，请添加这些文件。调整版本和外部来源以满足您的需求，如果您没有在自己的域中托管文件或不信任来源，请考虑使用子资源完整性检查。

【讨论】：

【参考方案11】：

使用特定版本号安装popper.js，如下所示：

bower install popper.js@^1.16.0

现在您可以找到dist 文件夹和popper.min.js 文件。

【讨论】：

【参考方案12】：

首先通过 yarn 安装 propperJs

yarn add popper.js

然后你可以像这样导入它

import Popper from "popper.js";

【讨论】：

以上是关于如何导入 popper.js？的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap4 JS插件(多种框)

将 Bootstrap 4 JS 导入项目

如何给popper.js popper-box边距/填充，使其不会粘在窗口边框上

即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”

bootstrap4popper.js报错Uncaught ReferenceError

Bootstrap dropdown require Popper.js