TypeScript 编译为单个 JS 文件

TypeScript compiling as a single JS file

提问by skayred

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

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

When I'm creating new project with VS2012, an app.tsfile 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.tsand creating Main.tsinstead, everything compiling fine, but there is a problem - only Main.tsis compiled to Main.js, and GameModule.tsstays 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 中？

采纳答案by Menotaurus

You have to use command line arguments of compiler

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

--out FILEConcatenate and emit output to single file

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

example

例子

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

回答by Martin Andersson

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 Buildtab. 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 扩展，请在解决方案资源管理器中右键单击您的项目并选择Properties. 单击TypeScript Build选项卡。Combine JavaScript output into file:在选项旁边的输入字段中选择并输入要用于组合文件的名称。请记住，您可以在此字段中使用变量。例如：“$(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.csprojwith any text editor of your choice. Find two lines that reads like so:

如果在任何地方都找不到此 GUI 选项，请手动修改项目配置文件。转到您的项目文件夹；右键单击解决方案资源管理器中的项目，然后单击Open folder in File Explorer。在弹出的文件夹中，您会看到几个文件。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 shouldask 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.

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

回答by Xavier Poinas

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

为此，您不需要任何第三方工具或库。
你可以使用微软的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

回答by Nicolas Zozol

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

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

The tsconfig.jsonfile 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 模板。

回答by niutech

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:

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

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

2. Add TypeScript Compile.js files:

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

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

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

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

2. 添加打字稿编译.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. 在浏览器中打开此 HTML 文件。自动编译的 JS 代码将被注入到<script type="text/javascript"></script>body 末尾的单个标签中。您可以使用 Web Inspector 或 Firebug 预览和复制它。

Here is a working demo.

这是一个工作演示。

回答by Josh Reuben

Add a postbuild that executes Browserify.js

添加一个执行 Browserify.js 的 postbuild