Question

这似乎是一个蹩脚的问题，但我无法弄明白。如何导入与Bootstrap 4 beta相关的popper.js？

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

Bootstrap 4指南链接到CDN：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

我遇到了同样的问题。

我下载了＆＃39; popper.min.js＆＃39;来自CDN的自助网站上的文件。

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

比编译项目更容易。

Answer 2

安装Popper.js的官方方式是通过npm，Yarn或NuGet。

使用以下任一命令：

npm i popper.js
yarn add popper.js
PM> Install-Package popper.js

图书馆自述文件中描述了一切。

关于＆＃34;下载zip＆＃34;，zip明确指出它包含库的源代码。

修改：

从版本1.12.0开始，Popper.js可用作Bower依赖项。

此安装方法仅支持1.x版本的Popper.js，并将在2.x中删除。

您应该将依赖关系管理迁移到现代系统，如npm或Yarn，正如Bower所建议的那样。

Answer 3

我真的不明白为什么Javascript世界试图做更复杂的事情。为什么不下载并包含在HTML中？试着在Java中使用像Maven这样的东西？但我们必须手动将其包含在html中吗？那么，有什么意义呢？也许有一天我会理解但不是现在。

这就是我能得到它的方式

下载＆amp;安装NodeJs
run＆＃34; npm install popper.js --save＆＃34;
然后我收到此消息

popper.js@1.12.7 在1.215s中添加了1个包
然后在哪里＆＃34;添加包＆＃34; ？信息量很大，对吗？我在我的C：\ Users \ surasin \ node_modules \ popper.js \ dist

希望这个帮助

Answer 4

获取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

Answer 5

我遇到了同样的问题。试过不同的方法，但这个对我有用。阅读http://getbootstrap.com/的说明。

以相同的方式复制Javascripts（Popper，jQuery和Bootstrap）的CDN路径（这很重要）。

＆＃13;

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

＆＃13;

Answer 6

您可以使用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 7

将popper **。js **添加为依赖项而不是popper（仅）：以粗体显示区别。

yarn添加popper.js，而不是纱线加弹跳器

与众不同。

并根据需要添加脚本：

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

Answer 8

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

npm install --save popper.js angular-popper

Answer 9

在bootstrap 4中，您需要为工具提示添加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 10

使用特殊的版本号安装popper.js：

bower install popper.js@^1.16.0

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

Answer 11

首先通过yarn安装propperJs

yarn add popper.js

那么你就可以这样导入了

import Popper from "popper.js";

如何导入popper.js？

11 个答案:

获取popper.js的方法：包，CDN和本地文件