从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"/>