使用 ASP.NET MVC 捆绑和缩小时出现奇怪的 JavaScript 错误答案

【问题标题】：Weird JavaScript error when using ASP.NET MVC bundling and minification使用 ASP.NET MVC 捆绑和缩小时出现奇怪的 JavaScript 错误
【发布时间】：2015-01-31 14:28:56
【问题描述】：

我将ASP.NET MVC 5 与bundling and minification 一起使用，当我在web.config 中将debug 设置为false 时出现奇怪的错误。

我使用捆绑和缩小已经有一段时间了，昨晚才第一次看到这个错误，因为我的下拉菜单不起作用。我无法确认这是否有效，因为我从未检查过文件。

这里是部分错误：

/* Minification failed. Returning unminified contents.
(2,1): run-time error CSS1019: Unexpected token, found '!'
(2,2): run-time error CSS1019: Unexpected token, found 'function('
(2,14): run-time error CSS1031: Expected selector, found ')'
(2,14): run-time error CSS1025: Expected comma or open brace, found ')'
(2,212): run-time error CSS1019: Unexpected token, found '('
(2,213): run-time error CSS1019: Unexpected token, found '"undefined"'
(2,224): run-time error CSS1019: Unexpected token, found '!'
(2,225): run-time error CSS1019: Unexpected token, found '='
(2,239): run-time error CSS1031: Expected selector, found '?'
(2,239): run-time error CSS1025: Expected comma or open brace, found '?'
(3): Scanner error CSS1002: Unterminated string: '></a>","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c...

所以我决定用最少的资源创建一个独立的 ASP.NET MVC 项目，只使用jQuery 2.1.1。我仍然得到错误。所以我想如果我使用jQuery 1.11.1，它就会消失。我仍然遇到同样的错误。

为什么会出现此错误？这显然是 jQuery 文件中的内容。我在 Bootstrap 的 JavaScript 文件中遇到了同样的错误。

什么时候最好使用捆绑和缩小？仅使用您自己的 JavaScript 和 CSS 文件？您应该捆绑和缩小第三方文件还是只使用他们的 CDN？我在工作中处于防火墙后面，因此我不能选择使用外部 CDN。

这是我的 web.config：

<system.web>
    <compilation targetFramework="4.5.2" />
    <httpRuntime targetFramework="4.5.2" />
</system.web>

我的 _Layout 文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My Website</title>
    </head>
    <body>
        @RenderBody()
        @Scripts.Render("~/bundles/js")
    </body>
</html>

还有我的 BundleConfig.cs 文件：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/js").Include(
            "~/Scripts/jquery-{version}.js"));
    }
}

产生的输出是：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My Website</title>
    </head>
    <body>
        <h2>Index</h2>
        <script src="/bundles/js?v=7gm4LP0WuTab97QPOJSizw2PGm8jrBl7HRdnANRLbBY1"></script>
    </body>
</html>

这两个文件也有问题：

html5shiv.js
Respond.js

那么问题来了，是无效的 JavaScript 错误，还是充满了 bug 的捆绑和缩小？

【问题讨论】：

标签： c# jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

有问题：

bundles.Add(new StyleBundle("~/bundles/js").Include(
            "~/Scripts/jquery-{version}.js"));

根据 js 文件使用 ScriptBundle 而不是 StyleBundle：

bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "~/Scripts/jquery-{version}.js"
));

您可能已将 StyleBundle 代码从您的项目复制到普通的 MVC 项目中。

【讨论】：

谢谢。我不敢相信我错过了这个。不知道我怎么变的。您可能是对的，我从其他地方复制并粘贴了它。
在您的RegisterBundles 方法附近，您可以创建RegisterStyles 和RegisterScripts 方法，从RegisterBundles 调用它们，我认为这是一个很好的做法。