9
points
In TypeScript it is possible to compile all *.ts files to one *.js file in following way.
Download all source code from one place here.
1. outFile property example
tsconfig.json file:
{
"version" : "3.0.3",
"compilerOptions" : {
"module" : "amd",
"removeComments" : true,
"outFile" : "./out.js",
"baseUrl" : "./",
"sourceMap" : true,
"alwaysStrict" : true,
"declaration" : true,
},
"include": [
"./**/*.ts"
],
"exclude": [
"./out.d.ts"
]
}Note:
"outFile" : "./out.js"defines single source code output file.
Person.ts file:
export class Person
{
public constructor(public name : string, public age : number)
{
// nothing here ...
}
public toString() : string
{
return `{ Name: ${this->name}, Age: ${this->age} }`;
}
}Printer.ts file:
import { Person } from "./Person";
export class Printer
{
public static printPerson(person : Person) : void
{
console.log(person.toString());
}
public static printPersons(persons : Array<Person>) : void
{
for(let entry of persons)
this.printPerson(entry);
}
}Main.ts file:
import { Person } from "./Person";
import { Printer } from "./Printer";
let persons = new Array<Person>();
persons.push(new Person('John', 30));
persons.push(new Person('Adam', 23));
persons.push(new Person('Kate', 41));
Printer.printPersons(persons);index.htm file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="description" content="Example typescript files compilation to single javascript file.">
<meta name="author" content="dirask.com">
<!--
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
-->
<script src="https://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
<script src="out.js"></script>
</head>
<body>
<script>
require( [ 'Main' ] );
</script>
</body>
</html>Note: above source code uses https://requirejs.org/ modules loader.
Compilation and running:
- Open console (e.g. Bash)
- Go to project directory
- Run
tscprogram to compile all files to one - Open index.htm in web browser
Bash console preview:
$ cd /C/Project
$ tsc
/C/Project directory preview:
Notes:
- after
tsccommand run three new files (out.*) should appear.out.d.tscontains all declarations (useful for intellisense and itengrationout.jsfile with other typescript projects)out.js.mapcontans development mapping for debug processout.jscontans all sourcecode transpiled to single javascript file
Web browser preview:
Download all source code from one place here.
2. Troubleshooting
3. References
