逐漸從包括每個JS文件到模塊捆綁

Question

當前，在我們的AngularJS應用程序中，我們有大量（400多個）文件，這些文件通過<script> -tags包含在內。 這些文件的順序如下：

1. AngularJS腳本文件
2. 第三方插件/模塊
3. 業務邏輯文件
   • 模塊
   • 服務
   • 控制器/組件/指令

我們希望轉向使用模塊捆綁器和TypeScript的更好方法。 新文件已經用TypeScript編寫了，但是沒有使用import / export 。 為了使事情變得容易，我們可以將每個JavaScript文件轉換為TypeScript文件，並在可行的時間內修復所產生的錯誤。

然而，我們這樣做之前，我們想對我們如何能逐步利用的可行策略import / export 。 我在想類似不時重寫一個模塊的事情，從依賴樹中的模塊開始。

但是我無法實現這一點，但是我很安靜地確保其他人以前已經必須解決此問題。

Answer 1

決定了模塊捆綁器之后，您需要了解以下功能：（1）允許頁面上的其他JavaScript訪問捆綁包中定義的內容，以及（2）允許捆綁包訪問頁面上其他JavaScript定義的內容。頁。 （如果能夠按照嚴格的依賴關系順序進行遷移，則可能永遠不需要＃2。）例如，對於Webpack，＃1將是library*輸出選項，而＃2將是externals 。 然后，只需將代碼一點一點地移入模塊中，並根據需要調整配置，以使代碼的每個部分都可以從代碼的另一部分訪問其所需的內容。 由於Webpack僅支持單個庫導出模塊，因此在過渡期間，您可能必須維護一個虛擬模塊，該模塊僅重新導出需要從捆綁包外部的代碼訪問的所有模塊。 這有點單調乏味，並且代表了一次遷移所有內容時無需做的額外工作，但是您可以決定為逐步遷移而付出這筆費用是值得的。

如果在從非模塊TypeScript文件中的TypeScript模塊文件獲取類型信息時遇到問題，請參閱此答案以獲取解決方法。