跨越多個文件與js minification的Typescript內部模塊

我正在處理一個大型的打字稿項目。我更喜歡創建許多小類，並將它們放在單獨的文件中，並使用深層嵌套的命名空間（打字稿中的「內部模塊」）。我認爲這是一個很好的做法，因爲它鼓勵封裝，可測試性，可重用性等。我擁有超過一百個帶有深名稱空間的小型打字稿文件。跨越多個文件與js minification的Typescript內部模塊

對於每個typescript文件，編譯後的.js輸出包含每個文件的每行3個自動生成的'樣板'，每個級別的名稱空間（頂部2個，底部1個）。例如，這裏是包含一個空類打字稿文件，裏面4個級別的命名空間：

module a.b.c.d { 
    export class MyClass { 
     constructor() { 
     } 
    } 
}

這編譯成以下的.js：

var a; 
(function (a) { 
    var b; 
    (function (b) { 
     var c; 
     (function (c) { 
      var d; 
      (function (d) { 
       var MyClass = (function() { 
        function MyClass() { 
        } 
        return MyClass; 
       })(); 
       d.MyClass = MyClass; 
      })(d = c.d || (c.d = {})); 
     })(c = b.c || (b.c = {})); 
    })(b = a.b || (a.b = {})); 
})(a || (a = {}));

出於性能考慮，我想合併/將我的.js文件縮小爲單個文件以供生產。如果我只是按照正確的順序追加文件，那麼每個文件都會重複進入和退出命名空間的樣板文件。在小的.ts文件的情況下，這將包含大量的開銷。

我的問題：是否有某種合併/縮小我的.js文件的方法，在順序.js文件共享相同名稱空間的情況下，可以剝去這些深名稱空間的樣板文件？

來源

2015-05-05 Leighton

來優化這個問題是使用壓縮（比如說gzip）一個Github的項目 - 這種重複是很好的處理。 – Fenton

你使用任何一種構建過程？你有沒有試過在單個文件中編譯？我這樣做，但實際上從來沒有檢查過這個開銷代碼的冗餘。 –

由於命名空間的創建只運行一次，而且所有內容都只設置一次，所以開銷不應該是那麼大的問題？如果您提到的文件大小開銷可能會成爲問題，我不確定是否有簡單的解決方法。 – Nypan

我知道從內部模塊遷移到外部模塊可能需要很多工作，但這是您未來的最佳選擇。

一旦你創建了外部模塊，你可以編譯你的打字稿代碼到使用--module標誌CommonJS的或AMDmodules：

tsc myfile.ts --module "amd" 
tsc myfile.ts --module "commonjs"

然後你可以使用the require.js optimizer捆綁應用程序中的所有AMD模塊到一個單一的優化文件。

如果使用commonJS，則可以使用Browserify將所有外部模塊捆綁到一個優化文件中。希望能幫助到你。

我已經創建了一個展示如何最簡單的方式自動執行此過程https://github.com/remojansen/modern-workflow-demo

來源

2015-05-11 11:27:06

跨越多個文件與js minification的Typescript內部模塊

回答

相關問題