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

CodyBugstein picture CodyBugstein · Sep 7, 2016 · Viewed 9.9k times · Source

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

Burt_Harris picture Burt_Harris · Sep 13, 2016

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