bootstrap 4中的popper.js给出了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>

但发生以下错误：

  

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

任何想法如何解决？

Answer 1

刚刚得到这个，并想出为什么它真的发生了。如果其他人到达这里：

检查readme.md＆＃34;用法＆＃34;。 lib有三个版本可用于三个差异模块加载器。简而言之：如果您使用<script>标记加载它，则必须使用 UMD 版本。您可以在/dist/umd中找到它。默认（在/dist中）是 ESNext （ECMA-Script），无法使用script标记加载。

Answer 2

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>

Answer 3

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

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

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

我把它包含在我的项目中并且错误消失了。您可以从https://getbootstrap.com/assets/js/vendor/popper.min.js下载源代码，并将其作为本地文件包含在项目中，它应该可以正常工作。

Answer 4

您在Bundle Config中有以下代码             bundles.Add（new ScriptBundle（“〜/ bundles / jquery”）。包括（                         “〜/脚本/ 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/），但没有jQuery。

Answer 6

自述文件中的第96行

远程目标

Popper.js当前附带三个目标：UMD，ESM和ESNext。

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

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