TypeScript compiling as a single JS file

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

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:

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

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.

Finally

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


You have to use command line arguments of compiler

--outFile FILE Concatenate and emit output to single file

example

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

You do not need any third-party tool or library for this.
You can use Microsoft's 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

Tags:

Typescript