从 Visual Studio 捆绑 AngularJs TypeScript 应用程序

Posted 2023-03-13

【中文标题】从 Visual Studio 捆绑 AngularJs TypeScript 应用程序

【英文标题】：Bundling AngularJs TypeScript App from Visual Studio

【发布时间】：2016-02-23 12:47:04

【问题描述】：

我正在使用 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 来实现吗？

【问题讨论】：

这应该可以。您没有提供任何具体的情况示例来确定您遇到问题的原因，但使用此功能是一种可接受的做法。

@Claies：如果我在 TypeScript Build 中捆绑脚本 > 将 Js 输出文件合并为一个不起作用。我真的不知道。如果我不捆绑脚本应用程序工作。我创建了一个简单的例子。

您是否以正确的顺序组合角度文件？第一个模块和之后的其他相关组件？

【参考方案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"/>