bootstrap 4 中的 popper.js 给出了 SyntaxError Unexpected token export

Posted 2023-02-22

【中文标题】bootstrap 4 中的 popper.js 给出了 SyntaxError Unexpected token export

【英文标题】：popper.js in bootstrap 4 gives SyntaxError Unexpected token export

【发布时间】：2018-03-09 15:27:00

【问题描述】：

我尝试安装 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>

但出现以下错误：

未捕获的语法错误：意外的令牌导出

有什么解决办法吗？

【问题讨论】：

我不知道，引导文件需要它

不，我用过 bootstrap，但它从来没有问过我

询问的最后一个版本

好吧，如果是这样，那么我会告诉使用 CDN 链接

问题是我在市场上大声播放时不应该使用 CDN 链接

【参考方案1】：

刚刚也得到了这个，并弄清楚它为什么会发生。万一其他人经过这里：

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

【讨论】：

谢谢。通过更改为 umd 文件为我消除了错误。

更改对 umd 文件夹下文件的引用解决了我的问题

这应该是被接受的答案。惊人的。非常感谢分享。

以上，这是真正的答案。

非常棒的快速帮助，谢谢。我想知道这个 /umd 和 /esm 文件夹是什么，但谷歌没有给出好的结果。

【参考方案2】：

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>

【讨论】：

UMD 版本是唯一消除错误的 CDN 链接。

谢谢伙计！您的订购解决了我的问题。干杯！

【参考方案3】：

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

如果您观察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

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

【讨论】：

是的。你说的对。我确实复制并粘贴了该代码，错误消失了。 CDN 没有指定任何特定版本的popper.js

虽然可行，但我认为这不是正确的方法，直到 BootStrap 团队更新自己的代码。

上述 URL 返回未找到错误 (404)。我在 Bootstrap 4.1.3 中使用了getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js，这为我解决了问题。

使用这个答案中建议的技术就像追逐一个移动的目标。正确答案由 Marc 和 Zim 提供。

不幸的是，这不再起作用了。错误消失了，但工具提示是默认的 html 工具提示

【参考方案4】：

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

捆绑的 JS 文件（bootstrap.bundle.js 和缩小的 bootstrap.bundle.min.js）包括 [Popper](https://popper.js.org/)，但不包括 jQuery。

【讨论】：

bootstrap.bundle.min.js 包括popperjs

最佳答案，因为它根本不需要使用额外的 Popper.js 库

最佳答案，谢谢

【参考方案5】：

自述文件中的第 96 行

分布目标

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

UMD - 通用模块定义：AMD、RequireJS 和 globals； ESM - ES 模块：适用于支持规范的 webpack/Rollup 或浏览器； ESNext：在dist/可用，可与webpack和babel-preset-env一起使用；

确保根据您的需要使用正确的。如果要使用 <script> 标签导入它，请使用 UMD。

【讨论】：

使用位于 UMD 目录中的 popper.min.js 文件解决了我通过 npm 安装 popper 时的问题。谢谢！

【参考方案6】：

您在 Bundle Config 中有以下代码 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-version.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")

这对我有用