【茶包射手日記】TypeScript JS檔打包壓縮時發生錯誤

前陣子專案的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+,以免打包壓縮出錯。

歡迎推文分享:
Published 10 March 2015 12:57 AM 由 Jeffrey
Filed under:
Views: 3,503



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2015>
SunMonTueWedThuFriSat
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication