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?
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 .
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.
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.
TypeScript files are compiled to readable JavaScript, so that migration back is possible and understanding the compiled TypeScript is not hard at all.
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".
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.
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
tsc --outFile modules.js main.ts app.ts
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With