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?
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 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 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
You can use tsc --project ./ to build an concatenated output file if you use tsconfig.json configuration file in the current directory.
The tsconfig.json file may look like this :
{
"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)
So let's learn quickly about SystemJS : Add SystemJS, and call a module in 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.
If I got you right, there is another way to produce a single JS file:
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>
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>
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.
Here is a working demo.
