【问题标题】:How to use Popper.js with Bootstrap 4 beta如何在 Bootstrap 4 beta 中使用 Popper.js
【发布时间】:2018-01-23 11:45:44
【问题描述】:

我是老派,所以我把源代码下载到了 1.12.0 然后做了以下操作:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

但我得到了:

Uncaught SyntaxError: Unexpected token export

在线2294 上面写着:

export default Popper;

【问题讨论】:

    标签: bootstrap-4 popper.js


    【解决方案1】:

    根据 Fez Vrasta。

    如果通过 Visual Studio 中的 NuGet 包管理器检索 popper,请确保您的 popper.js 脚本引用路径使用 umd 文件夹:

    MVC ASP.Net BundleConfig 示例:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/umd/popper.js", //path with umd
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
    

    直接脚本参考示例:

    <script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
    

    【讨论】:

      【解决方案2】:

      只需使用 bootstrap 的 bundle 版本就可以了!

      <script src="./node_modules/jquery/dist/jquery.min.js"></script>
      <!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
      <!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
      <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
      

      【讨论】:

        【解决方案3】:

        单独的容器:

        如果您遵循已接受的答案并且您的工具提示仍然在错误的位置,可能是因为您为每个工具提示使用了不同的容器。

        我会尝试这样做以允许将工具提示放置在元素的父级附近

        const initializeTooltips = function () {
            $('[data-toggle="tooltip"]').each(function() {
                $(this).tooltip({container: $(this).parent()});
            });
        };
        $(document).ready(function () {
            initializeTooltips();
        });
        

        jsfiddle 上亲自尝试。

        【讨论】:

          【解决方案4】:

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

          按照给定的相同顺序(这很重要)复制 CDN 链接(jQuery、Popper 和 Bootstrap)。

          <head>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
          </head>
          

          【讨论】:

            【解决方案5】:

            根据popper docs

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

            UMD - 通用模块定义:AMD、RequireJS 和 globals;

            ESM - ES 模块:用于支持规范的 webpack/Rollup 或浏览器;

            ESNext:在 dist/ 中可用,可与 webpack 和 babel-preset-env;确保根据您的需要使用正确的。如果 你想用标签导入它,使用 UMD。

            【讨论】:

              【解决方案6】:

              你想使用package.json file as main entry中指定的dist目标。

              在这种情况下,您正在寻找 umd 构建 (dist/umd/popper.js)

              什么是 UMD?

              UMD pattern 通常会尝试提供与当时最流行的脚本加载器(例如 RequireJS 等)的兼容性。在许多情况下,它使用 AMD 作为基础,并添加了特殊外壳以处理 CommonJS 兼容性。

              这意味着可以通过 &lt;script&gt; 标签加载 UMD 包并在全局范围 (window) 内注入,但如果需要,也可以使用 CommonJS 加载器(如 RequireJS)。

              【讨论】:

                【解决方案7】:

                Popper 要求您在 Bootstrap 4 中使用 umd 路径下的文件。

                这些 CDN 版本中的任何一个都可以工作:

                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

                其他答案/cmets 提到了版本,但是问题与版本无关

                使用Bootstrap's example of including popper 绝不是一个坏习惯,因为它应该始终有效。 Bootstrap 4 目前推荐 popper 1.11,这是一个安全的选择,但是 1.12.5 版本也应该可以正常工作。

                旁注:为什么会与 umd、esm 和普通 ol' popper 文件混淆?目的是灵活的模块封装,但实际上它可以变得更简单。 This post 解释了新模块类型的一些问题。

                【讨论】:

                • 与 SRI:&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"&gt;&lt;/script&gt;
                【解决方案8】:

                确保使用 Bootstrap 文档中引用的 Popper.js 版本。

                https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

                【讨论】:

                • 我使用 popper 1.12.x 并且它错误“SyntaxError:导出声明​​可能只出现在模块的顶层”。更改为 1.11.0 即可。谢谢你:)
                • 我不认为重要的是版本,它只是从 cdnjs 复制脚本标签时丢失的 url 的“umd”部分。 https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/umd/popper.min.js 有效,https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/popper.min.js 无效。
                猜你喜欢
                • 2018-02-19
                • 2018-04-12
                • 2019-09-28
                • 1970-01-01
                • 1970-01-01
                • 2018-01-20
                • 2018-03-29
                • 1970-01-01
                • 2018-10-05
                相关资源
                最近更新 更多