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"用法".lib有三个版本可用于三个差异模块加载器.简而言之:如果您使用<script>标记加载它,则必须使用UMD版本.你可以找到它/dist/umd.默认(in /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从以下位置加载:

cdnjs

我把它包含在我的项目中,错误消失了.您可以从Bootstrap 4项目中下载源代码并将其作为本地文件包含在内,它应该可以工作.

Answer 4

自述文件中的第 96 行

分布目标

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

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

确保使用适合您的需求的产品。如果要带<script>标签导入，请使用 UMD。

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

您在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")

这对我有用