TypeScript编译为单个JS文件_Typescript

TypeScript编译为单个JS文件

typescript

TypeScript编译为单个JS文件,typescript,Typescript,我有一个关于TypeScript的测试项目，代码可以找到当我使用VS2012创建新项目时，会创建一个app.ts文件。当我更改链接显示的内容并添加名为GameModule的新模块时，我遇到编译错误。当我删除app.ts并创建Main.ts时，一切编译都很好，但有一个问题-只有Main.ts被编译到Main.js，而GameModule.ts保持未编译状态如何使编译器将所有代码合并到一个JS中？添加一个执行Browserify.JS的后期生成如果我没说错，还有另一种方法可以生成单个JS文件：

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

当我使用VS2012创建新项目时，会创建一个

app.ts

文件。当我更改链接显示的内容并添加名为

GameModule

的新模块时，我遇到编译错误。当我删除

app.ts

并创建

Main.ts

时，一切编译都很好，但有一个问题-只有

Main.ts

被编译到

Main.js

，而

GameModule.ts

保持未编译状态

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

添加一个执行Browserify.JS的后期生成如果我没说错，还有另一种方法可以生成单个JS文件：

创建一个新的HTML文件，并使用以下命令包含所有.ts文件：

添加.js文件：

在浏览器中打开此HTML文件。自动编译的JS代码将被注入到正文末尾的单个

标记中。您可以使用Web Inspector或Firebug预览和复制它

这是一个实用工具。

您不需要任何第三方工具或库来完成此操作。
您可以使用Microsoft的：

所有*.js文件（编译*.ts文件的结果）将在运行时在以下位置合并并可访问：

http://…/scripts/bundle.js

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

--输出文件文件

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

例子使用GUI 如果已安装Visual Studio 2013和TypeScript扩展，请在解决方案资源管理器中右键单击项目并选择

属性

。单击

typescriptbuild

选项卡。选择

将JavaScript输出合并到文件中：

，然后在选项旁边的输入字段中键入用于合并文件的名称。请记住，您可以在此字段中使用变量。例如：“$（ProjectDir）dist\js\myCombinedFile.js”

人工如果在任何地方都找不到此GUI选项，请手动修改项目配置文件。转到您的项目文件夹；右键单击解决方案资源管理器中的项目，然后单击文件资源管理器中的“打开文件夹”。在弹出的文件夹中，您将看到几个文件。使用您选择的任何文本编辑器编辑文件

myProject.csproj

。找到两行这样的内容：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">

及

在两个子节点树中，向每个父节点添加一个子节点：

<TypeScriptOutFile>$(ProjectDir)dist\js\myCombinedFile.js</TypeScriptOutFile>

$（ProjectDir）dist\js\myCombinedFile.js

当您回到VisualStudio时，他应该询问您是否重新加载项目。当然，为了使更改生效，必须这样做

我刚才描述的手动过程正是GUI过程为您所做的。我对手动程序的想法源于

最后像平常一样构建项目。如果不起作用，请尝试重新加载项目。

如果在当前目录中使用

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

坏消息是我们需要调用（对RequireJS的工作原理相同，但从TSC1.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>


System.import（'索引'）

一个很大的优势是，您还可以让ide为您捆绑它。IDE无论如何都需要编译来理解类型，因此我们可以避免编译它两次。

你现在不需要大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大。SystemJS可能会做很多事情，比如加载html模板。

我不是把它作为一个答案，而是作为一个替代方案：如果你在自动编译方面遇到问题，一个目录中的单个文件或多个文件都可以帮上忙。Shane Anderson也有一个很好的解决方案。他使用扩展ASP.NET脚本包。这似乎不适用于VS2013.1和TS RC1.0（0.9.7.0）。“重定向JavaScript输出”选项起作用，但没有生成组合文件。当我使用组合选项时，生成了一个空文件。有人经历过这个吗？每个文件单独生成都很好。此（GUI版本）在VS21013 Express Release 3中工作，但您必须使用

//

强制依赖项，否则文件可能附加在错误的位置order@TamirDaniely将模块系统设置为“无”[请参见：如果使用手动解决方案。是否有任何方法缩小和/或版本文件（dist\js\myCombinedFile.js？v=xxx）？这在某种程度上不再适用于我。首先，提示我指定--module，然后它编译成多个文件而不是单个文件。（即main.js和app.js而不是modules.js）如果有人也想知道为什么它不工作，可能是因为您的所有文件都是模块。TSC不包含模块。请参阅此处：此处的同一问题。更改--out参数没有任何效果。所有ts文件都会编译为自己的js文件。

--out

不赞成使用

--outFile

：但还有另一个问题：在浏览器中有所有的

.js

和

.ts

文件。我不认为它是good@Andrew这是因为源代码映射，这是很好的。你想要这样。你可以用Web表单来实现这一点，你不需要使用MVC。再见，源代码映射如何实现？这没有给出如何实现的说明。我为什么要编译客户端side？@brannigan，例如，无需构建步骤即可在浏览器中轻松创建原型，如JSFIDLE。

{
  "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

<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>