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

62

我很传统,所以我下载了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;
8个回答

108
您希望使用在package.json文件中指定的dist目标作为main入口。 在这种情况下,您需要寻找umd构建 (dist/umd/popper.js)。

UMD是什么?

UMD模式通常试图与当今最流行的脚本加载器兼容 (如RequireJS等)。在许多情况下,它使用AMD作为基础,并添加特殊情况来处理CommonJS兼容性。

这意味着UMD捆绑包可以通过<script>标签加载并注入全局范围(window),但也可以在需要时与像RequireJS这样的CommonJS加载器一起使用。

24

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包含popper的示例永远不会有错,因为它应该总是有效的。截至目前,Bootstrap 4推荐使用较安全的popper 1.11版本,但1.12.5版本也应该可以正常工作。

附注:为什么会有umd、esm和普通的popper文件混淆?这是为了灵活的模块打包,但实际上可能会更简单一些。这篇文章解释了一些新模块类型的问题。


3
使用SRI:<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script> - Shruggie

14

3
我使用的是 popper 1.12.x,在使用时出现了“SyntaxError: export declarations may only appear at top level of a module”的错误。我将它改为1.11.0版本后,问题得到了解决。谢谢 :) - vee
3
我认为版本并不重要,而是在从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 不行。 - Quasipickle

6
根据popper文档: Popper.js目前有三个目标:UMD,ESM和ESNext。 UMD - 通用模块定义:AMD,RequireJS和全局; ESM - ES模块:适用于webpack / Rollup或支持规范的浏览器; ESNext:在dist /中可用,可与webpack和babel-preset-env一起使用;确保根据您的需求使用正确的目标。如果要使用标签导入,请使用UMD。

1
根据Fez Vrasta的说法。 如果在Visual Studio中通过NuGet包管理器检索popper,请确保您的popper.js脚本引用路径使用< strong>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>

1
我有同样的问题。尝试了不同的方法,但这个方法对我有效。 阅读http://getbootstrap.com/的说明。 按照给定的顺序复制CDN链接(jQuery、Popper和Bootstrap)。

Bootstrap CDN links

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

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

0

分离容器:

如果您按照被接受的答案进行操作,但是您的工具提示仍然显示在错误的位置,那么这可能是因为每个工具提示都有一个不同的容器。

我建议您尝试以下方法,以便在父元素附近放置工具提示:

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

请在jsfiddle上自行尝试。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,