Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript compiling as a single JS file

Tags:

typescript

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

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

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

like image 829
skayred Avatar asked Oct 17 '12 03:10

skayred


People also ask

How do I compile TypeScript to single file?

Probably, the best option is to use a module bundler / build tool, like Webpack. Webpack will compile all your TypeScript files to a single JavaScript bundle. So, you will use webpack to compile, instead of tsc .

Can we combine multiple .ts files into a single .JS file?

Yes, it's possible. To successfully merge multiple TS files together in a JS file, use a module bundler system or a Gulp Script to concatenate everything into a single JS file.

How do you combine ts files and output as common JS?

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.

Why does TypeScript compile to JavaScript?

TypeScript files are compiled to readable JavaScript, so that migration back is possible and understanding the compiled TypeScript is not hard at all.


2 Answers

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.

like image 78
Martin Andersson Avatar answered Oct 05 '22 17:10

Martin Andersson


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 
like image 39
Menotaurus Avatar answered Oct 05 '22 17:10

Menotaurus