【问题标题】:How to host popper.js locally如何在本地托管 popper.js
【发布时间】:2017-09-20 03:57:19
【问题描述】:

我刚刚升级到 Bootstrap 4 并意识到 Popper.js 是一个依赖项。我喜欢在本地托管库,因为有时我需要离线工作,但是当我尝试离线使用它时,我收到错误 unexpected token export。但是,当我使用 Cloudflare CDN 版本时,它可以工作,但是如何在本地托管 popper.js?

(我不想为此使用包管理器。)

【问题讨论】:

  • 你能贴出你在代码中调用popper初始化的代码段吗?
  • 你是怎么下载的?包管理器?

标签: javascript twitter-bootstrap popper.js


【解决方案1】:

README.md of the project 将帮助解决这个问题:

分布目标

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

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

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

因此,如果你想使用带有<script /> 标签的 Popper.js,你想使用它的 umd 版本。位于dist/umd

【讨论】:

  • 有点落入了和提问者一样的陷阱……但这一定是说 RTFM 最好的方式……谢谢
  • @Fez 为什么你会自动假设他没有读过它?在你的完美世界中是否存在疏忽、健忘、困惑等?
【解决方案2】:

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

【讨论】:

    【解决方案3】:

    我也试过下载 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 导入。

    【讨论】:

      【解决方案4】:

      点击本页第一个链接下载官方引导文件:

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

      然后您可以在 css 中使用 bootstrap.bundle.min.css 文件,其中包含 popper.js 以及您可能需要的引导代码

      您可以在&lt;head&gt; 标签中使用此代码:

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

      我包含了 4.5.0,因为那是目前的 bootstrap 版本

      【讨论】:

        【解决方案5】:

        如果你下载 Popper.js

        npm install popper.js

        我发现 npm 包和它的原始来源(这里是https://popper.js.org/)之间存在差异。

        我只是从它的原始源下载 popper.js 并将其放入新的 js 文件。它对我有用。

        【讨论】:

          【解决方案6】:

          只需下载源代码并参考即可

          the github page获取源代码,然后在你的html中引用它

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

          【讨论】:

            【解决方案7】:

            转到:https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js 右键单击并“另存为...”

            你也可以这样做:

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

            然后在您的代码中,将这一行添加到 Jquery 和 Bootstrap 的 .js 链接(脚本)之间的底部:

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2019-06-27
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2021-09-11
              • 1970-01-01
              相关资源
              最近更新 更多