popper.js in bootstrap 4 给出 SyntaxError Unexpected token export

Question

我尝试安装 bootstrap 4，并包含以下链接

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

但是出现以下错误：

Uncaught syntaxError: Unexpected token export

有什么解决办法吗？

Answer 1

如果我使用 cdnjs 等来自 CDN 网络的 popper.js，我遇到了同样的问题。

如果您观察 Bootstrap 4 示例的源代码，例如 Navbar，您可以看到 popper.min.js 是从以下位置加载的：

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

我将其包含在我的项目中，错误消失了。您可以从

下载源代码

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

并作为本地文件包含在您的项目中，它应该可以工作。

Answer 2

我也收到了这个消息，并弄清楚了为什么会发生这种情况。以防其他人路过这里：

检查 readme.md "Usage"。该库可用于三个不同的模块加载器的三个版本。简而言之：如果您使用 <script> 标签加载它，那么您必须使用 UMD 版本。您可以在 /dist/umd 中找到它。默认值（在 /dist 中）是 ESNext (ECMA-Script)，它不能使用 script 标签加载。

Answer 3

Bootstrap 4需要popper.js的UMD版本，确保顺序如下：

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Answer 4

您在 Bundle Config 中有以下代码 bundles.Add(new ScriptBundle("~/bundles/jquery").包括( "~/Scripts/jquery-{版本}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

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

布局中的以下代码html

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

这对我有用

Answer 5

您还可以在 html 中添加 bootstrap.bundle.min.js 并删除 popper.js。

捆绑的 JS 文件（bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js）包括 [Popper]（https://popper.js.org/), but not jQuery.

Answer 6

自述文件第 96 行

距离目标

Popper.js 目前考虑了 3 个目标：UMD、ESM 和 ESNext。

UMD - 通用模块定义：AMD、RequireJS 和全局变量；
ESM - ES 模块：对于 webpack/Rollup 或支持规范的浏览器；
ESNext：在 dist/ 中可用，可与 webpack 和 babel-preset-env;

确保使用适合您需要的那个。如果要使用 <script> 标签导入它，请使用 UMD。

popper.js in bootstrap 4 给出 SyntaxError Unexpected token export

popper.js in bootstrap 4 gives SyntaxError Unexpected token export

javascript

twitter-bootstrap

bootstrap-4

popper.js

距离目标