How can I compile my Typescript into a single JS file with no module loading system?

Question

I have a small Typescript project of about 10 ts files. I want to compile all my files into es5 and into a single es5 file called all.js.

Currently, with my tsconfig.json set up as

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "outFile": "./all.js"
}

everything is getting compiled, but each file is being wrapped by

System.register("SomeTSFile", [], function(exports_4, context_4) {
...
}

SystemJS looks cool but I am not in the mood to learn it now and I don't believe it is necessary. If I could get all my JS into one file, that will be perfectly sufficient for my needs.

If I remove "module": "system",from my compiler options, my all.js file comes out completely blank. Apparently, this is because for some reason, you cannot use "modules": none when outputting to one file. (I don't get why)

How can I compile all the TS into one JS file without having to involve SystemJS or any other complications?

Answer 1

Use triple slash directives for the typescript-compiler (tsc)

Triple-slash references instruct the compiler to include additional files in the compilation process.

index.ts:

/// <reference path="./domHelpers.ts" />

function add(a: number, b: number): number {
    return a + b;
}

q('#sum').textContent = add(2, 5).toString();

domHelpers.ts

function q(query: string): Element {
    return document.querySelector(query);
}

function qa(query: string): NodeListOf<Element> {
    return document.querySelectorAll(query);
}

Build step:

tsc --out bundle.js ts/index.ts

Will produce bundle.js with contents

function q(query) {
    return document.querySelector(query);
}
function qa(query) {
    return document.querySelectorAll(query);
}
/// <reference path="./domHelpers.ts" />
function add(a, b) {
    return a + b;
}
q("#sum").textContent = add(2, 5).toString();

Answer 2

The contents of your .ts files determines if this is possible or not...

If you avoid turning your TypeScript code a module (by avoiding top-level import or export declarations), the output from single-file compile will not include any dependency on a module loader.

For example: typescript compiler itself is written without any top-level import or export declarations, and thus compiles into a single-file .js without any loader dependency.

Note that its use of export within a namespace is not a "top level" export. Imports inside a namespace are possible but severely limited: an example here

"In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module."

The typescript handbook