引导程序4中的 popper.js 提供 SyntaxError 意外令牌导出

我尝试安装引导程序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>

但是出现了以下错误:

未捕获的 syntaxError: 意外的令牌导出

enter image description here

Any ideas how to fix it?

69046 次浏览
小开
最佳答案

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

如果你观察 Bootstrap 4例子的源代码，比如 纳瓦尔，你可以看到 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

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

小开

我也是这么想的，我想知道为什么会发生这种事，以防其他人在这里混过去:

检查自述，用法。该库有三个版本，可用于三个不同的模块加载程序。简而言之: 如果使用 <script>标记加载它，那么必须使用 UMD版本。你可以在 /dist/umd中找到它。默认值(在 /dist中)是 下一个(ECMA-Script) ，它不能使用 script标记加载。

小开

Bootstrap 4需要 UMD 版本的 popper.js，并确保订单如下:

<!-- 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>
小开

在 Bundle Config 中有以下代码 添加(新的 ScriptBundle (“ ~/bundle/jquery”) “ ~/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")

这招对我很管用

小开

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

Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) 包括[波普](https://popper.js.org/), but not JQuery.

小开

README 中的第96行

Dist targets

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

  • UMD-通用模块定义: AMD，RequreJS 和全局;
  • ESM-ES 模块: 用于支持规范的 webpack/汇总或浏览器;
  • ESNext: 有 dist/版本，可以与 webpack 和 babel-preset-env一起使用;

Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.


提交答案