从 Visual Studio 捆绑 AngularJs TypeScript 应用程序

Question

我正在使用 TypeScript、AngularJS 和 Bootstrap 创建 Web 应用程序。

为此，我使用 Visual Studio Project Template HTML Application With TypeScript。

项目结构为：

• 应用程序
  • 模块A
    • 控制器文件夹
      • controller.ts
      • view.html
    • moduleA.ts
  • 模块B
  • 模块C
  • app.ts
• 脚本
• CSS

App 文件夹包含许多 *.ts 文件，因此我将这些文件合并到 Visual Studio 中的单个文件 my-app.js 中，使用 TypeScript Build > 将 Js 输出文件合并为一个。

并将这个脚本文件包含在 index.html 中。

当然，如果我运行应用程序，它就不起作用。

模块“应用程序”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

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

我不知道将 angular 'app' *.js 文件合并到一个文件中是否是一种好习惯。

所以我的问题是：

• 对于这种情况有什么好的做法？
• 我可以将所有 'app' *.ts / *.js 文件捆绑到一个文件中吗？
• 我能否在不使用 RequireJs、AMD、Browserify 的情况下使用 Visual Studio 创建工作的单个 *.js 文件。
• 如果我无法使用 Visual Studio 创建可工作的单个文件，我可以使用 Gulp 来实现吗？

Answer 1

您绝对可以将所有 *.ts 文件转换为单个 JS 文件。我不确定 Visual Studio 是如何实现这一点的——我使用 gulp-tsc 模块和 gulp（我使用 Task Runner Explorer extension for VS2013 运行）来做到这一点。

在您的情况下，在编译过程中可能会出现一些错误，这会阻止正确生成单个输出文件......如果您在 VS 中打开详细构建日志记录，您可能会看到这些错误。

或者，您可以自己从命令行 (outputting to a single file) 运行 tsc 并查看是否有任何错误。

您可能需要添加更多的引用路径提示，以便 tsc 知道如何正确转换它。当 A 类扩展 B 并且 ClassA 的源代码在 ClassB 的源代码之前被转译/包含时，我遇到了这个问题。事实证明 tsc 不够聪明，无法识别这种情况，所以我不得不明确地将以下内容添加到 ClassA 的源代码中：

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