如何在 Bootstrap 4 beta 中使用 Popper.js

Question

我是老同学，所以我将源代码下载到 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;

Answer 1

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

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

Answer 2

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

在这种情况下，您正在寻找 umd 版本 (dist/umd/popper.js)

什么是 UMD？

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

这意味着可以通过 <script> 标记加载 UMD 包并注入到全局范围内 (window)，但如果需要，也可以使用 RequireJS 等 CommonJS 加载器。

Answer 3

Popper要求使用umd路径下的文件，Bootstrap 4.

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

其他answers/comments提及版本，但问题与版本控制无关。

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

旁注：为什么会混淆 umd、esm 和普通的 ol'popper 文件？本意是灵活的模块封装，但实际上可以做得更简单。 This post 解释了新模块类型的一些问题。

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

Answer 5

根据 popper docs:

Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.

UMD - Universal Module Definition: AMD, RequireJS and globals;

ESM - ES Modules: For webpack/Rollup or browser supporting the spec;

ESNext: Available in dist/, can be used with webpack and babel-preset-env; Make sure to use the right one for your needs. If you want to import it with a tag, use UMD.

Answer 6

独立容器：

如果您按照已接受的答案进行操作，但您的工具提示仍然位于错误的位置，可能是因为每个工具提示的容器不同。

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

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

在 jsfiddle 上亲自试一试。

Answer 7

只需使用 bootstrap 的捆绑版本即可！

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

Answer 8

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

如何在 Bootstrap 4 beta 中使用 Popper.js

How to use Popper.js with Bootstrap 4 beta

bootstrap-4

popper.js

什么是 UMD？

Popper要求使用umd路径下的文件，Bootstrap 4.