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

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

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

什么是UMD？

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

这意味着UMD包可以通过<script>标记加载并注入全局范围（window），但如果需要使用CommonJS加载程序（如RequireJS）也可以工作。

Answer 2

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

其他答案/评论提及版本，但问题与版本控制无关。

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

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

Answer 3

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

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

Answer 4

根据popper docs：

Popper.js目前有三个目标：UMD，ESM和   ESNext。

UMD - 通用模块定义：AMD，RequireJS和全局;

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

ESNext：在dist /中可用，可以与webpack一起使用   巴别预置-ENV;确保使用正确的一个满足您的需求。如果   如果要使用标记导入它，请使用UMD。

Answer 5

我遇到了同样的问题。试过不同的方法，但这个方法对我有用。阅读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 6

只需使用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 7

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

Answer 8

单独的容器：

如果您遵循接受的答案并且工具提示仍在错误的位置，则可能是，因为每个工具提示的容器都不相同。

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

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

在jsfiddle上尝试一下。

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

8 个答案:

什么是UMD？

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