TypeScript编译为单个JS文件

I have a test project on TypeScript, code can found here.

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

When I'm creating new project with VS2012, an app.ts file is created. When I'm changing it's content as shown by the link and adding new module called GameModule, I'm getting compile error. When I', deleting app.ts and creating Main.ts instead, everything compiling fine, but there is a problem - only Main.ts is compiled to Main.js, and GameModule.ts stays uncompiled.

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

How can I make compiler to merge all the code in one JS?

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

6 个解决方案

#1

You have to use command line arguments of compiler

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

--out FILE Concatenate and emit output to single file

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

example

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

#2

Using the GUI

If you have Visual Studio 2013 and the TypeScript extension installed, right-click your project in the solution explorer and chose Properties. Click on the TypeScript Build tab. Select Combine JavaScript output into file: and type in a name to use for your combined file in the input field right next to the option. Remember you can use variables in this field. For example: "$(ProjectDir)dist\js\myCombinedFile.js".

如果安装了Visual Studio 2013和TypeScript扩展，请在解决方案资源管理器中右键单击项目，然后选择“属性”。单击TypeScript Build选项卡。选择将JavaScript输出合并到文件中：然后在选项旁边的输入字段中键入要用于组合文件的名称。请记住，您可以在此字段中使用变量。例如：“$（ProjectDir）dist \ js \ myCombinedFile.js”。

Manually

If you cannot find this GUI option anywhere, then modify your project configuration file manually. Go to your project folder; right-click the project in the solution explorer and click on Open folder in File Explorer. In the folder that pop up, you'll see a couple of files. Edit file myProject.csproj with any text editor of your choice. Find two lines that reads like so:

如果您无法在任何地方找到此GUI选项，请手动修改项目配置文件。转到项目文件夹;右键单击解决方案资源管理器中的项目，然后单击文件资源管理器中的打开文件夹。在弹出的文件夹中，您将看到几个文件。使用您选择的任何文本编辑器编辑文件myProject.csproj。找到两行如下：

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

and

和

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

Within the two tree of child nodes, add a new child to each parent:

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

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

When you get back to Visual Studio, he should ask you whether or not to reload the project. Of course this is something that has to be done for the changes to take effect!

当您回到Visual Studio时，他应该询问您是否重新加载项目。当然，必须采取这些措施才能使更改生效！

The manual procedure I just described is exactly what the GUI procedure would do for you. My thoughts around the manual procedure originates from this source.

我刚才描述的手动程序正是GUI程序将为您做的。我对手动程序的看法源于此来源。

Finally

Build your project as you would do normally. If it doesn't work, try reloading your project.

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

#3

You do not need any third-party tool or library for this.
You can use Microsoft's System.Web.Optimization:

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

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

All the *.js files (results of compiling your *.ts files) will be combined and accessible at runtime at:
http:// .../scripts/bundle.js

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

#4

You can use tsc --project ./ to build an concatenated output file if you use tsconfig.json configuration file in the current directory.

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

The tsconfig.json file may look like this :

tsconfig.json文件可能如下所示：

{
  "compileOnSave": true,
  "compilerOptions": {
    "module":"system",
    "target": "es5",
    "sourceMap": true,
    "outFile": "dist/app-build.js"
  },
  "files":[
    "./src/index.ts",
    "./typings/browser.d.ts"
  ]
}

Classic files layout would be :

经典文件布局将是：

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

The bad news is that we need a call to SystemJS (works the same with RequireJS, but as of Tsc 1.8, CommonJS is not accepted for concatenated build)

坏消息是我们需要调用SystemJS（与RequireJS一样，但从Tsc 1.8开始，CommonJS不接受连接构建）

So let's learn quickly about SystemJS : Add SystemJS, and call a module in index.html :

那么让我们快速了解一下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>

A big advantage is that you can also let your ide bundle it for you. The IDE need anyway to compile to understand types, so we may avoid to compile it twice. You don't need Gulp, browserify or anything for the moment. SystemJS might do most of the stuff like loading a html template.

一个很大的优点是你也可以让你的ide捆绑给你。 IDE无论如何都需要编译来理解类型，所以我们可以避免编译它两次。您暂时不需要Gulp，browserify或任何其他内容。 SystemJS可能会执行大部分内容，例如加载html模板。

#5

Add a postbuild that executes Browserify.js

添加执行Browserify.js的postbuild

#6

If I got you right, there is another way to produce a single JS file:

如果我找到了你，还有另一种方法来生成一个JS文件：

1. Create a new HTML file and include all your .ts files using:

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

   <script type="text/typescript" src="GameModule.ts"></script>

   <script type="text/typescript" src="app.ts"></script>

2. Add TypeScript Compile .js files:

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

3. Open this HTML file in a browser. The automatically compiled JS code will be injected into a single <script type="text/javascript"></script> tag at the end of the body. You can preview and copy it using Web Inspector or Firebug.

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

Here is a working demo.

这是一个工作演示。