javascript - 未捕获的语法错误 : Unexpected token export its happen at popper. js:2371

我是 bootstrap 和 jquery 的新手。我正在尝试使用数据表功能(如排序)，当我运行代码时，我在控制台中收到此错误:

uncaught SyntaxError: Unexpected token export at popper.js:2371

我的popper.js版本是:1.14.3 我在我的布局中渲染它，如下所示:

<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
 @*   @Scripts.Render("~/bundles/lib")*@
  @Scripts.Render("~/Scripts/jquery-3.3.1.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
  @Scripts.Render("~/Scripts/DataTables/dataTables.bootstrap4.min.js")

  @Scripts.Render("~/Scripts/popper.js")
  @Scripts.Render("~/Scripts/bootstrap.js")
  @Scripts.Render("~/Scripts/bootbox.js")
  @Scripts.Render("~/Scripts/respond.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.js")
  @Scripts.Render("~/Scripts/DataTables/DataTables.bootstrap.js")
    @*@Styles.Render("~/Content/css")*@

    @RenderSection("scripts", required: false)
</body>

和我的浏览器的图片，这里我有两个问题:1.为什么我收到此错误:

uncaught SyntaxError: Unexpected token export at popper.js:2371

2.为什么我的浏览器中数据表的页数和排序方式等功能不规则。(如图所示) 这是我的 css 包:

 bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap-lumen.css",
                      "~/Content/DataTables/css/dataTables.bootstrap.css",
                      "~/Content/site.css"));

我在我的_layout中渲染它:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @*@Scripts.Render("~/bundles/lib")*@
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)
</body>
</html>

TIA

最佳答案

捆绑时 popper.js 出现意外的 token 导出表明 Popper 库需要相应 JS 文件的 UMD build version，此处设置错误(可能您使用的是 ESNext 版本):

@Scripts.Render("~/Scripts/popper.js")

UMD 版本导入是必要的，因为我们希望使用 official page 中编写的捆绑机制( <script> )生成的 System.Web.Optimization 标签导入它。

If you want to import it with a <script> tag, use UMD.

以下是将 UMD 版本与 MVC 捆绑一起使用的步骤:

1) 从此处的 dist 包获取 UMD 版本:https://unpkg.com/[email protected]/dist/umd/

2) 将 UMD 包保存在 /Scripts/umd 文件夹中。

3) 在 RegisterBundles() 方法中使用指定路径创建 JS 包，如下例所示:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-*",
    // other jQuery scripts here
));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/umd/popper.js", // set to UMD version
    "~/Scripts/bootstrap.js",
    "~/Scripts/bootbox.js",
    "~/Scripts/respond.js",

    // other Bootstrap scripts here
));

4)在布局页面中使用 @Scripts.Render() 帮助器来包含它们(请注意脚本顺序很重要):

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

注意:如果您要查找 ESNext version of Popper.js 与 UMD version 进行比较，您将在后者中看到此 header ，而前者不存在:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Popper = factory());
}(this, (function () {
    // skipped for brevity
})));

function( global, factory ) 使 Popper 能够使用 <script> 标记引用注入(inject)全局范围，这成为使用 UMD 包的可能原因。

关于你的第二个问题，听起来 CSS 文件没有正确包含。请参阅 Bundling and Minification section 导入 CSS 包。

javascript - 未捕获的语法错误 : Unexpected token export its happen at popper. js:2371

上一篇：javascript - 启用 CSP 时应避免哪些与 eval() 相关的函数？

下一篇：javascript - 如何通过 Ajax 检索帖子 id？