從Visual Studio捆綁AngularJs TypeScript應用程序

Question

我正在使用TypeScript，AngularJS和Bootstrap創建Web應用程序。

為此，我將Visual Studio Project模板HTML應用程序與TypeScript一起使用 。

項目結構為：

• 應用
  • moduleA
    • controllerFolder
      • controller.ts
      • view.html
    • moduleA.ts
  • moduleB
  • moduleC
  • app.ts
• 腳本
• CSS

App文件夾包含許多* .ts文件，因此在Visual Studio中使用TypeScript構建>將Js輸出文件合並為一個將這些文件合並為單個文件my-app.js。

並將此腳本文件包含到index.html。

當然，如果我運行應用程序，它將無法正常工作。

模塊“ app”不可用！ 您可能拼錯了模塊名稱，或者忘記了加載它。 如果注冊模塊，請確保將依賴項指定為第二個參數。

我不使用RequireJs，AMD，Browserify或其他。

我不知道將有角度的“ app” *。js文件組合到一個是好的做法。

所以我的問題是：

• 在這種情況下有什么好的做法？
• 我可以將所有“ app” *。ts / *。js文件捆綁到一個文件中嗎？
• 我可以在不使用RequireJs，AMD，Browserify的情況下使用Visual Studio創建工作的單個* .js文件嗎？
• 如果我無法使用Visual Studio創建可工作的單個文件，例如可以使用Gulp來實現嗎？

Answer 1

您絕對可以將所有* .ts文件轉換為單個JS文件。 我不確定Visual Studio如何實現這一點-我使用gulp-tsc模塊和gulp（我使用VS2013的Task Runner Explorer擴展運行）來做到這一點。

在您的情況下，可能會出現一些錯誤，導致無法正確生成單個輸出文件……您可能可以查看是否在VS中打開了詳細的構建日志記錄。

另外，您可以從命令行自己運行tsc（ 輸出到單個文件 ），看看是否出現任何錯誤。

在某些情況下，您必須添加更多參考路徑提示，以使tsc知道如何正確地進行轉換。 當類A擴展了B且類A的源代碼在類B的源代碼之前被轉譯/包含時，我遇到了這個問題。 事實證明，tsc不夠智能，無法識別這種情況，因此我不得不在ClassA的源代碼中明確添加以下內容：

/// <reference path="../foo/bar/ClassB.ts"/>