如何在本地托管popper.js

3
我刚刚升级到Bootstrap four,发现Popper.js是一个依赖项。我喜欢本地托管库,因为有时需要离线工作,但是当我尝试离线使用它时,出现了错误unexpected token export。然而,当我使用Cloudflare CDN版本时,它可以正常工作,但是如何在本地托管popper.js呢?
(我不想使用软件包管理器来完成这个任务。)

你能否发布一下你在代码中调用popper初始化的代码段? - Sahan Serasinghe
你是怎么下载的?用包管理器吗? - user47589
7个回答

7

项目的README.md将有所帮助:

Dist目标

Popper.js目前提供3个目标:UMD、ESM和ESNext。

  • UMD - 通用模块定义:AMD、RequireJS和全局变量;
  • ESM - ES模块:适用于webpack/Rollup或支持规范的浏览器;
  • ESNext:位于dist/中,可与webpack和babel-preset-env一起使用;

确保根据您的需要使用正确的目标。如果要使用<script>标签导入它,请使用UMD。

因此,如果您想使用<script />标签使用Popper.js,则需要使用其umd版本。位于dist/umd中。


2
有点像提问者一样掉进了同样的陷阱...但这一定是说“RTFM”的最好方式...谢谢。 - NegassaB

4
您可以使用已经包含了 Popper.js 的 bootstrap.bundle.min.js。

1

我也尝试下载了popper并试图重现您的问题,您是正确的。

如果您查看getbootstrap.com页面的快速入门部分,您可以在他们的示例中找到以下行:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

请注意链接中的 umd 部分。您可以下载该文件并在本地添加,它将正常工作。
PS - 您可能还需要更改您的 jQuery 导入。

1

点击此页面上的第一个链接下载官方的Bootstrap文件:

https://getbootstrap.com/docs/4.5/getting-started/download/

你可以在css中使用bootstrap.bundle.min.css文件,该文件包含popper.js以及你可能需要的bootstrap代码。
你可以在标签中使用以下代码来使用它:
<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">

我包含了4.5.0,因为这是当今流行的Bootstrap版本。


0

只需下载源代码并参考它

github页面获取源代码,然后在您的HTML中引用它

<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />

0
如果您下载了Popper.js,可以通过以下方式进行安装:

npm install popper.js

我发现npm包和其原始来源之间存在差异,原始来源在这里 https://popper.js.org/
我只是从原始来源下载了Popper.js并将其放入新的js文件中。这对我很有效。

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接