Question

我是Bootstrap和jquery的新手。我尝试使用诸如sorting的数据表功能，而在运行代码时却在控制台中收到此错误：

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>

和浏览器的图片，这里我有2个问题：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

Answer 1

在捆绑器上popper.js意外导出令牌表示Popper库需要UMD build version的相应JS文件，此处错误设置（可能是您使用的是ESNext版本）：

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

必须导入UMD版本，因为我们想使用official page编写的捆绑机制（<script>）生成的System.Web.Optimization标签导入它。

如果要使用<script>标签导入它，请使用UMD。

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

1）在以下位置从 dist 包中获取UMD版本：https://unpkg.com/popper.js@1.14.4/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，则前者中不存在此标头：

(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>标记引用注入全局范围，这可能成为使用UMD捆绑软件的原因。

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

未捕获的SyntaxError：意外的令牌导出发生在popper.js：2371

1 个答案: