JavaScript课程打包：Uncaught SyntaxError: Unexpected token <。

Question

使用mvc4课程的bundle功能时，加载时出现“Uncaught SyntaxError: Unexpected token <”错误。使用debug="true"时，一切正常工作。

我该如何解决这个错误？或者我能否仅禁用脚本的bundle特性？ 解决方案
将bundle名称重命名为不与任何目录匹配。

- MR.ABC

---

我发现在使用MVC捆绑时，在发布模式下调试问题很困难，但我发现自己犯的一个错误是将已经压缩过的JS/CSS传递给捆绑引擎 - 只需传递未压缩的脚本，捆绑引擎会自行进行压缩。 - CodingIntrigue

你是否使用了适当的 @Scripts.Render() 和 @Styles.Render() 调用？你是否检查了浏览器控制台以查看返回结果？ - CodingIntrigue

https://dev59.com/OHA65IYBdhLWcg3wyh57 - ssilas777

使用@Scripts.Render()和控制台显示准确的Uncaught SyntaxError: Unexpected token <。 - MR.ABC

你能展示一下出现错误的输出吗？ - Evan Davis

Answer 1

在回答这个错误的原因之前，您必须首先确定错误发生的位置。当代码打包时，唯一不同的语法是它被压缩了。一个非常简单的方法是使用 Bundle 而不是 ScriptBundle：

        var thirdParty = new Bundle("~/bundles/thirdParty").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.mockjson.js",
            "~/Scripts/jQuery.XDomainRequest.js",
            "~/Scripts/knockout-{version}.js"
            );

        thirdParty.Transforms.Clear();

        bundles.Add(thirdParty);

现在，如果您有多个JavaScript捆绑包，请逐个执行此操作，直到找到问题捆绑包。我发现唯一调试这些问题的方法是将捆绑包拆分成两半，以进一步排除问题。

        var thirdParty1 = new Bundle("~/bundles/thirdParty1").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery-ui-{version}.js"
            );

        bundles.Add(thirdParty1);

        var thirdParty2 = new ScriptBundle("~/bundles/thirdParty2").Include(
            "~/Scripts/jquery.mockjson.js",
            "~/Scripts/jQuery.XDomainRequest.js",
            "~/Scripts/knockout-{version}.js"
            );

        bundles.Add(thirdParty2);

请注意，我们只禁用了两个bundle中的一个thirdParty1的缩小。确保更新您的@Scripts.Render，以指向您的新bundle。当您构建并重新加载时，您将要么继续收到错误，要么不会，然后就会知道哪一半包含有问题的代码。但务必测试两种方式，即在我的示例中缩小thirdParty1并取消缩小thirdParty2，反之亦然，以确保没有其他情况发生。您还可能希望保持DevTools或任何浏览器调试器打开，并查看您的bundles的源代码，以确保它们按预期运行。

接下来，请将脚本从缩小的bundle（在我的示例中为thirdParty1）移动到未缩小的bundle（thirdParty2），可以逐个或批量进行，如果您有很多脚本。记得在重新构建时进行重组，注意不要改变脚本的包含顺序。

这样至少可以将问题定位到具体文件上，希望对您有所帮助。

- Grinn

---

好的建议和详细的说明 - 这是获得答案的唯一途径。+1 - CodingIntrigue

谢谢。愉快的编程！如果你弄清楚了是什么，请告诉我。我很好奇。 - Grinn

Answer 2

他的解决方案帮了我，将捆绑包重命名为与目录不同的名称。我像这样分组：

@Styles.Render("~/jqueryui")
@Scripts.Render("~/jqueryui")

使用jQuery UI样式进行此操作时似乎存在一个错误。我只是将捆绑包重命名为：

@Styles.Render("~/jqueryuiz")
@Scripts.Render("~/jqueryui")

这个方法对我很有帮助。因此，这些脚本似乎不受影响，类似的捆绑包也是如此。我加载了大约20组捆绑包，这是唯一一个引起问题的。

- Christian Cody

Answer 3

我的问题： 我在Content文件夹中引用脚本文件，但是我的bundle名称为~Scipts。我将我的bundle重命名为~DefaultScripts，这解决了我的问题。我不想引用Scripts文件夹，但它却去了那里而不是我的Content文件夹。

  bundles.Add(New ScriptBundle("~/Scripts").Include(
              "~/Content/assets/global/plugins/jquery.min.js",
              "~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
              "~/Content/assets/global/plugins/js.cookie.min.js",
              "~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
              "~/Content/assets/global/plugins/jquery.blockui.min.js",
              "~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
              "~/Content/assets/global/scripts/app.js",
              "~/Content/assets/layouts/layout2/scripts/layout.min.js",
              "~/Scripts/custom.js"))




  bundles.Add(New ScriptBundle("~/DefaultScripts").Include(
              "~/Content/assets/global/plugins/jquery.min.js",
              "~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
              "~/Content/assets/global/plugins/js.cookie.min.js",
              "~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
              "~/Content/assets/global/plugins/jquery.blockui.min.js",
              "~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
              "~/Content/assets/global/scripts/app.js",
              "~/Content/assets/layouts/layout2/scripts/layout.min.js",
              "~/Scripts/custom.js"))

- JoshYates1980