如何導入 popper.js？

Question

這似乎是一個蹩腳的問題，但我無法弄清楚。 如何導入與 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下載的文件相同。

Answer 1

我遇到了同樣的問題。

我從引導程序網站上的 CDN 下載了“popper.min.js”文件。

見這里： https : //cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

比編譯項目更容易。

重要提示：您必須在 jquery 之后但在引導程序之前包含 popper。

Answer 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刪除。

您應該將您的依賴項管理遷移到現代系統，如 npm 或 Yarn，正如 Bower 所建議的那樣。

Answer 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路徑下的版本（有關 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

Answer 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>

Answer 5

我真的不明白為什么 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 中找到它

希望這有幫助

Answer 6

添加 popper**.js** 作為依賴項而不是 popper（僅）：以粗體查看差異。

yarn add popper.js ，而不是 yarn add popper

這很重要。

並根據您的需要包含腳本：

作為 html 或庫訪問作為 SPA 應用程序（如 react 或 angular）中的依賴項

Answer 7

在 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

Answer 8

事實證明，Popper.js沒有在其 GitHub 存儲庫中提供編譯文件。 因此，必須自己編譯項目或從 CDN 下載編譯文件。 不能自動導入。

Answer 9

您可以使用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 文件，請添加這些文件。 調整版本和外部源以滿足您的需求，如果您不在自己的域中托管文件或不信任源，請考慮使用子資源完整性檢查。

Answer 10

我刪除了所有現有的 popper 目錄，然后運行

npm install --save popper.js angular-popper

Answer 11

使用popper.js版本號安裝popper.js ，如下所示：

bower install popper.js@^1.16.0

現在你可以找到dist文件夾和popper.min.js文件。

Answer 12

首先從yarn安裝propperJs

yarn add popper.js

然后你可以像這樣導入它

import Popper from "popper.js";

如何導入 popper.js？

問題描述

12 個解決方案

解決方案1
35 2017-08-13 06:21:39

解決方案2
14 2017-08-13 10:18:47

解決方案3
8 2017-10-01 16:46:58

popper.js 獲取方式：打包、CDN、本地文件

解決方案4
7 2017-11-02 05:15:26

解決方案5
6 2017-11-11 14:05:24

解決方案6
3 2019-02-14 02:04:12

解決方案7
2 2019-09-05 05:54:02

解決方案8
0 2017-08-12 13:37:34

解決方案9
0 2018-08-15 15:26:32

解決方案10
0 2019-04-07 18:51:20

解決方案11
0 2020-02-19 15:21:31

解決方案12
0 2021-07-11 02:48:03

如何導入 popper.js？

問題描述

12 個解決方案

解決方案1 35 2017-08-13 06:21:39

解決方案2 14 2017-08-13 10:18:47

解決方案3 8 2017-10-01 16:46:58

popper.js 獲取方式：打包、CDN、本地文件

解決方案4 7 2017-11-02 05:15:26

解決方案5 6 2017-11-11 14:05:24

解決方案6 3 2019-02-14 02:04:12

解決方案7 2 2019-09-05 05:54:02

解決方案8 0 2017-08-12 13:37:34

解決方案9 0 2018-08-15 15:26:32

解決方案10 0 2019-04-07 18:51:20

解決方案11 0 2020-02-19 15:21:31

解決方案12 0 2021-07-11 02:48:03

解決方案1
35 2017-08-13 06:21:39

解決方案2
14 2017-08-13 10:18:47

解決方案3
8 2017-10-01 16:46:58

解決方案4
7 2017-11-02 05:15:26

解決方案5
6 2017-11-11 14:05:24

解決方案6
3 2019-02-14 02:04:12

解決方案7
2 2019-09-05 05:54:02

解決方案8
0 2017-08-12 13:37:34

解決方案9
0 2018-08-15 15:26:32

解決方案10
0 2019-04-07 18:51:20

解決方案11
0 2020-02-19 15:21:31

解決方案12
0 2021-07-11 02:48:03