简体   繁体   English

如何在本地托管 popper.js

[英]How to host popper.js locally

I just upgraded to Bootstrap four and realized Popper.js was a dependency.我刚刚升级到 Bootstrap 4 并意识到Popper.js是一个依赖项。 I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export .我喜欢在本地托管库,因为我有时需要离线工作,但是当我尝试离线使用它时,我收到了一个错误异常unexpected token export It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?但是,当我使用 Cloudflare CDN 版本时它可以工作,但是如何在本地托管 popper.js?

(I don't want to use a package manager for this.) (我不想为此使用包管理器。)

The README.md of the project will help sort this out:项目README.md将有助于解决这个问题:

Dist targets分布目标

Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext. Popper.js 目前有 3 个目标:UMD、ESM 和 ESNext。

  • UMD - Universal Module Definition: AMD, RequireJS and globals; UMD - 通用模块定义:AMD、RequireJS 和 globals;
  • ESM - ES Modules: For webpack/Rollup or browser supporting the spec; ESM - ES Modules:用于支持规范的 webpack/Rollup 或浏览器;
  • ESNext: Available in dist/ , can be used with webpack and babel-preset-env ; ESNext:在dist/可用,可以与 webpack 和babel-preset-env

Make sure to use the right one for your needs.确保使用适合您的需求的产品。 If you want to import it with a <script> tag, use UMD.如果要使用<script>标签导入它,请使用 UMD。

Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it.因此,如果您想使用带有<script />标签的 Popper.js,您需要使用它的umd版本。 Located in dist/umd .位于dist/umd

你可以使用已经包含 Popper.js 的 bootstrap.bundle.min.js

I also tried downloading popper and I tried to recreate your problem, and you are correct.我也尝试下载 popper 并尝试重现您的问题,您是对的。

If you check the Quick Start section ofgetbootstrap.com page, you can find the following line in their example:如果您查看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>

Note the umd part in their link.注意他们链接中的umd部分。 You can download that file and add it locally and it will work.您可以下载该文件并将其添加到本地,它将起作用。

PS - You may also have to change your jQuery import. PS - 您可能还需要更改 jQuery 导入。

Download the official bootstrap files by clicking the first link on this page:单击此页面上的第一个链接下载官方引导程序文件:

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

You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need然后,您可以在 css 中使用 bootstrap.bundle.min.css 文件,其中包含 popper.js 以及您可能需要的引导程序代码

you can use it by using this code in your <head> tag:您可以通过在<head>标签中使用此代码来使用它:

<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">

I included 4.5.0 because that is the current version of bootstrap out there today我包含了 4.5.0 因为这是今天的引导程序的当前版本

Just download the source code and refer to it只需下载源代码并参考即可

Get the source code from the github page , then refer to it in your htmlgithub 页面获取源代码,然后在您的 html 中引用它

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

If you download Popper.js though如果你下载了 Popper.js

npm install popper.js npm 安装 popper.js

I found there are difference between npm package and its original source which is here https://popper.js.org/ .我发现 npm 包和它的原始来源有区别,这里是https://popper.js.org/

I just download popper.js from its original source and put it new js file.我只是从原始源下载 popper.js 并将其放入新的 js 文件中。 It worked for me.它对我有用。

go to : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js the right click and "save as..."转到: https : //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js右键单击并“另存为...”

you can do the same with :你可以做同样的事情:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js

and then in your code you add this line at the bottom between Jquery's and Bootstrap's .js link (script) :然后在您的代码中,在 Jquery 和 Bootstrap 的 .js 链接(脚本)之间的底部添加此行:

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM