TypeScript output isn't being combined

Question

I have the following setup:

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "none",
        "outFile": "js/app.js"
    }
}

MyApp.Main.ts

class Main
{
    constructor()
    {
        Utilities.init(this);
    }

    // Other methods
}

MyApp.Utilities.ts

class Utilities
{
    static init(app: Main)
    {
         // Do something with app...
    }

    // Other methods
}

When I either save the .ts file or recompile the project, I do not have an app.js file as specified in the outFile option, I only get MyApp.Main.js and MyApp.Utilities.js compiled files.

I have also tried adding /// <reference ... /> paths to my "Main" class, and that also does not cause outputs to be combined.

Some notes:

I can't target a newer ES version because I need to support IE without a shim.
Similarly, I cannot use a module system because I am not allowed to introduce an additional dependency into the project, so the module must be "none".
I can't run the code through an additional compiler such as Babel.

Basically, I need to get this to work with pure TypeScript, no module system, and no (default) ES target.

What am I doing wrong that the outputs are not being combined into a single .js file?

Nurbol Alpysbayev · Accepted Answer · 2018-10-22T19:00:42.263

2

From https://www.typescriptlang.org/docs/handbook/compiler-options.html (in the description of --module option)

Only "AMD" and "System" can be used in conjunction with --outFile.

So you should change module setting as described.

Usually if TS maintainers say things like this, there is no way to overcome it (and you shouldn't).

I am not allowed to introduce an additional dependency into the project

What kind of dependency is it? Modules don't force you to add any.

edited Oct 22 '18 at 19:00

answered Oct 22 '18 at 18:54

Nurbol Alpysbayev

19,522
3
54
89

I was under the impression that introducing a module system would require you to include the actual module library (e.g. https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js) - is this not true? That's what I meant by dependency. – qJake Oct 22 '18 at 19:07
Nope, nowadays one usually adds as a *devDependency* (which adds zero KBs to your app) a bundler like Parcel or Webpack that converts modules to browser-compatible code (bundle). In other words, after `tsc` you also should run a bundler's command (`parcel` or something) – Nurbol Alpysbayev Oct 22 '18 at 19:08
You don’t need a module system to bundle separate ts files into one single js file. TSC already does that. – Kokodoko Oct 22 '18 at 21:59
You are correct but only for when `--outFile` is used (OP's case) – Nurbol Alpysbayev Oct 23 '18 at 11:22
True, but this answer suggests that a module system is needed to solve the problem. Since the OP specifically asks not to introduce new dependencies, it seems better to leave out the module setting altogether. – Kokodoko Oct 23 '18 at 20:14

Kokodoko · Answer 2 · 2018-10-24T20:05:00.867

-1

You can just leave out the module option and it should work!

This is my tsconfig.

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "removeComments": true,
    "noUnusedLocals":true,
    "noUnusedParameters":true,
    "sourceMap": true,
    "outFile": "docs/js/main.js"
},
  "include": [
    "dev/**/*"
  ]
}

edited Oct 24 '18 at 20:05

answered Oct 22 '18 at 19:04

Kokodoko

26,167
33
120
197

1

Erm, if you downvote, please add an explanation. The accepted answer suggests you need modules and a bundler, which is incorrect for this question. TSC already bundles ts files into one js file by itself. – Kokodoko Oct 22 '18 at 21:56

TypeScript output isn't being combined

2 Answers2