Question

我有一个关于TypeScript的测试项目，代码可以找到here。

当我使用VS2012创建新项目时，会创建一个app.ts文件。当我更改链接所示的内容并添加名为GameModule的新模块时，我收到编译错误。当我'，删除app.ts并创建Main.ts时，所有内容都会正常编译，但存在问题 - 只有Main.ts编译为Main.js，GameModule.ts保持未编译状态。

如何让编译器将所有代码合并到一个JS中？

Answer 1

使用GUI

如果安装了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。

最后

按照正常方式构建项目。如果它不起作用，请尝试重新加载项目。

Answer 2

您必须使用编译器的命令行参数

--out FILE连接并将输出发送到单个文件

例如

 tsc --out modules.js main.ts app.ts

Answer 3

您不需要任何第三方工具或库。
您可以使用Microsoft的System.Web.Optimization：

BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));

所有* .js文件（编译* .ts文件的结果）将在运行时组合并可访问：
http：// ... / scripts / bundle.js

Answer 4

如果在当前目录中使用tsc --project ./配置文件，则可以使用tsconfig.json构建连接的输出文件。

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模板。

Answer 5

如果我找对你，还有另一种方法可以生成一个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。

Answer 6

添加执行Browserify.js的postbuild

TypeScript编译为单个JS文件

6 个答案:

使用GUI

手动

最后

例如