前陣子專案的TypeScript更新成1.4,今天上線時發現網站出現JavaScript錯誤,由錯誤訊息推測為打包壓縮程序有誤:第一個foo.js的最後一列 //# sourceMappingURL=foo.js.map 跟第二個bar.js的第一列;var __extends = this.__extends || function (d, b) { 被合併成一列,由於開頭有//符號,整列被註解掉,bar.js的第一列被吃掉以致程式碼不全出錯:

/* Minification failed. Returning unminified contents.
(12,1-2): run-time warning JS1002: Syntax error: }
 */
var models;
(function (models) {
    function foo() {
    }
    models.foo = foo;
})(models || (models = {}));
//# sourceMappingURL=foo.js.map;var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var models;
(function (models) {
    var base = (function () {
        function base() {
        }
        return base;
    })();
    var bar = (function (_super) {
        __extends(bar, _super);
        function bar() {
            _super.apply(this, arguments);
        }
        return bar;
    })(base);
})(models || (models = {}));
//# sourceMappingURL=bar.js.map;

同樣的程式碼及打包壓縮程序在升級TypeScript 1.4前運作正常,讓人合理懷疑是1.4版調整輸出JavaScript格式導致。找到尚未升級TypeScript 1.4的VS2013,比對TypeScript的編譯結果,果真找到差異。下圖左方檔案來自1.3版,右方則是1.4版,可以看到1.3版在//# sourceMappingURL=foo.js.map後原本還有一列空白(共9列),1.4時被移除了(只有8列)。

1.4版的//# sourceMappingURL=foo.js.map後方少了換行符號及空白列,ScriptBundle又直接串接foo.js與bar.js,因而釀成慘劇。但是,TypeScript改版導致打包壓縮出錯,理應哀鴻遍野才對,但網路未見相關討論,莫非與ScriptBundle版本有關?

檢查有問題的ASP.NET 4專案,System.Web.Optimization.dll為1.0.0版。另外新建一個ASP.NET 4.5,放入相同TypeScript並用ScriptBundle打包,結果正常:

檢查ASP.NET 4.5的System.Web.Optimization.dll為1.1.0,由此推論問題與System.Web.Optimization版本有關。而原本的MVC4專案,在使用NuGet將System.Web.Optimization由1.0.0升級到1.1.0後,JavaScript錯誤消失無蹤,證實確為ScriptBundle版本問題!

結論:專案升級TypeScript 1.4後,System.Web.Optimization請升級到1.1.0+,以免打包壓縮出錯。


Comments

Be the first to post a comment

Post a comment