ASP.NET MVC 4脚本捆绑在部署时导致错误

Question

@Scripts.Render()当我没有捆绑脚本时,我的网站在localhost上正常工作,但是当我部署到我的服务器时,捆绑的Javascript必须包含错误,因为我页面上的所有Javascript都停止工作.

这是我的捆绑代码:

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-migrate-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

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

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

这是我的渲染代码:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

有人可以解释部署时我的Javascript可能会发生什么吗？

谢谢,亚历克斯.

Answer 1

您还可以将"新ScriptBundle"更改为"new Bundle":

bundles.Add(new Bundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

这将捆绑您的资产而不会缩小.我遇到过一些情况,其中缩小只是不适用于某些库,所以这仍然允许你将它们包含在你的包中.

Answer 2

通常,调试和部署捆绑包之间的唯一区别是在调试时会关闭优化.

当打开优化时,缩小可以突出显示语法错误,如果存在换行符,则会被忽略.例如:

var x = 10
var y = 15

没有贬义,这可能会奏效 - 但最终会缩小你...

var x = 10 var y = 15 // SyntaxError: missing ; before statement

哪个不起作用 - 你需要;那里缺少的字符.

如果您调试脚本,您应该能够看到错误的位置.

Answer 3

即使出现错误,缩小"仍然有效"

真正的解决方案是:

• 在发布之前排除.min和.map文件

缩小将起作用.事实上,缩小过程始终有效!

如果"它有效",它究竟发生了什么:为什么我们有错误？

在捆绑启用的优化时,ASP.Net似乎优先使用.min文件.因此,它还将在.min文件中集成任何代码,并在不添加换行符的情况下依次附加每个javascript文件.

这是浏览器无法理解为什么有一个潜在的注释/*最小映射配置后://#sourceMappingURL = jquery.history.min.js.map由于捆绑的文件将是这样的:

[SOMEJAVASCRIPT OF FILEJAVASCRIPT1 HERE;]
//# sourceMappingURL=jquery.history.min.js.map /* begin of a comment of FILEJAVASCRIPT2 appended (in the bundle) javascript file */

有两种解决方案可以避免这种错误:

• 为无法遵循的javascript文件创建单独的包(就像不激活捆绑功能一样).
• 创建一个不会启用缩小的包(坏)
• 或者替代方法:排除所有缩小文件或具有sourceMappingURL(或更改其源代码)和.map文件的min.js文件

目标是强制ASP.Net自己重新生成min文件(并且ASP.Net不会在其生成的文件中生成// sourceMappingUrl,因此它将解决该问题).

所以真正的问题是浏览器中当前这个功能的实现,因为它似乎无法解析sourcemapping注释的注释.也许有另一种方式来指示浏览器sourceMappingUrl已经结束.