我有一个关于 TypeScript 的测试项目，代码可以找到here。
当我使用 VS2012 创建新项目时，会创建一个 app.ts 文件。当我更改链接所示的内容并添加名为GameModule 的新模块时，出现编译错误。当我删除app.ts 并改为创建Main.ts 时，一切编译正常，但有一个问题——只有Main.ts 编译为Main.js，而GameModule.ts 未编译。
如何让编译器将所有代码合并到一个 JS 中？
【问题讨论】：
标签： typescript
你必须使用编译器的命令行参数
--outFile FILE 连接并输出到单个文件
tsc --outFile modules.js main.ts app.ts
【讨论】：
--out 已弃用，取而代之的是 --outFile: typescriptlang.org/docs/handbook/compiler-options.html
如果您在当前目录下使用tsconfig.json 配置文件，您可以使用tsc --project ./ 构建串联输出文件。
tsconfig.json 文件可能如下所示：
{
"compileOnSave": true,
"compilerOptions": {
"module":"system",
"target": "es5",
"sourceMap": true,
"outFile": "dist/app-build.js"
},
"files":[
"./src/index.ts",
"./typings/browser.d.ts"
]
}
经典文件布局是：
project/
- src/
- index.ts
... all my ts files
- dist /
- vendor.js # angular, jquery...
- app-build.js # our build project
- system.js # Module loader we used
- index.html # call all js
- typings/
- browser.d.ts
- main.d.ts # for node.js server side, not included
- package.json
- tsconfig.json
坏消息是我们需要调用 SystemJS（与 RequireJS 相同，但从 Tsc 1.8 开始，CommonJS 不被接受用于串联构建）
那么让我们快速了解一下SystemJS：添加SystemJS，并在index.html中调用一个模块：
<html lang="en" ng-app="skeleton">
<head>
<script src="system.js" type="text/javascript"></script>
<script src="angular.min.js"></script>
<script src="app-build.js" type="text/javascript"></script>
</head>
<body>
<skeletonDirective></skeletonDirective>
<script type="text/javascript">
System.import('index')
</script></body></html>
一个很大的优势是您还可以让您的 ide 为您捆绑它。 IDE 无论如何都需要编译才能理解类型，所以我们可以避免编译两次。 你暂时不需要 Gulp、browserify 或任何东西。 SystemJS 可能会完成大部分工作，例如加载 html 模板。
【讨论】：
如果您安装了 Visual Studio 2013 和 TypeScript 扩展，请在解决方案资源管理器中右键单击您的项目并选择 Properties。单击TypeScript Build 选项卡。选择Combine JavaScript output into file: 并在选项旁边的输入字段中输入用于组合文件的名称。请记住，您可以在此字段中使用变量。例如：“$(ProjectDir)dist\js\myCombinedFile.js”。
如果您在任何地方都找不到此 GUI 选项，请手动修改您的项目配置文件。转到您的项目文件夹；右键单击解决方案资源管理器中的项目，然后单击Open folder in File Explorer。在弹出的文件夹中，您会看到几个文件。使用您选择的任何文本编辑器编辑文件myProject.csproj。找到两行这样写的：
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
和
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
在两个子节点树中，为每个父节点添加一个新子节点：
<TypeScriptOutFile>$(ProjectDir)dist\js\myCombinedFile.js</TypeScriptOutFile>
当您返回 Visual Studio 时，他应该询问您是否重新加载项目。当然，要使更改生效，必须执行此操作！
我刚才描述的手动过程正是 GUI 过程将为您做的。我对手动程序的想法源自this source。
像往常一样构建您的项目。如果它不起作用，请尝试重新加载您的项目。
【讨论】：
/// <reference path="/path/to/dependent/code.ts" />强制依赖，否则文件可能会以错误的顺序附加
您不需要任何第三方工具或库。
你可以使用微软的System.Web.Optimization：
BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));
所有 *.js 文件（编译 *.ts 文件的结果）将在运行时合并和访问：
http:// .../scripts/bundle.js
【讨论】：
.js 和.ts 文件。我不认为它好
如果我没听错的话，还有另一种生成单个 JS 文件的方法：
使用以下命令创建一个新的 HTML 文件并包含所有 .ts 文件：
<script type="text/typescript" src="GameModule.ts"></script>
<script type="text/typescript" src="app.ts"></script>
添加TypeScript Compile.js 文件：
<script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.compile.min.js"></script>
在浏览器中打开此 HTML 文件。自动编译的 JS 代码将被注入到正文末尾的单个 <script type="text/javascript"></script> 标签中。您可以使用 Web Inspector 或 Firebug 预览和复制它。
这是一个有效的demo。
【讨论】：
添加一个执行 Browserify.js 的后期构建
【讨论】：