TypeScript编译为一个单独的JS文件

我有一个关于TypeScript的testing项目,代码可以在这里find。

当我使用VS2012创build新项目时,会创build一个app.ts文件。 当我改变它的内容,如链接所示,并添加新模块称为GameModule ,我得到编译错误。 当我',删除app.ts和创buildMain.ts ,一切编译好,但有一个问题 – 只有Main.ts被编译到Main.jsGameModule.ts保持未编译。

我怎样才能让编译器合并一个JS中的所有代码?

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

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

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

使用GUI

如果安装了Visual Studio 2013和TypeScript扩展,请右键单击解决scheme资源pipe理器中的项目,然后select“ Properties 。 点击TypeScript Build选项卡。 select将Combine JavaScript output into file:组合到文件中,然后在选项旁边的input字段中input用于组合文件的名称。 请记住,您可以在此字段中使用variables。 例如:“$(ProjectDir)dist \ js \ myCombinedFile.js”。

手动

如果您无法在任何地方find此GUI选项,请手动修改您的项目configuration文件。 转到您的项目文件夹; 右键单击解决scheme资源Open folder in File Explorer的项目,然后单击Open folder in File Explorer 在popup的文件夹中,您将看到一些文件。 使用您select的任何文本编辑器编辑文件myProject.csproj 。 find两行,如下所示:

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

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

在两个子节点树中,向每个父节点添加一个新的子节点:

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

当你回到Visual Studio时,他应该问你是否重新加载项目。 当然这是必须要做的变化才能生效!

我刚刚介绍的手动程序正是GUI程序为您所做的。 我对这个手册程序的思考来自于这个来源 。

最后

像平常一样build立你的项目。 如果它不起作用,请尝试重新加载您的项目。

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

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

所有* .js文件(编译* .ts文件的结果)将在运行时在以下位置进行组合和访问:
http:// … / scripts / bundle.js

如果在当前目录中使用tsconfig.jsonconfiguration文件,则可以使用tsc --project ./构build连接的输出文件。

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不被接受用于连接构build)

所以让我们快速学习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需要编译来理解types,所以我们可以避免编译两次。 你现在不需要大量的,浏览或者任何东西。 SystemJS可能会做大部分的东西,比如加载一个html模板。

添加一个执行Browserify.js的后构build

如果我find了你的话,还有另外一种方法可以生成一个JS文件:

  1. 创build一个新的HTML文件,并包含所有.ts文件使用:

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

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

  2. 添加TypeScript编译 .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>结尾的一个<script type="text/javascript"></script>标记中。 您可以使用Web Inspector或Firebug进行预览和复制。

这是一个工作演示 。