Compiling typescript with UMD option into a single file

Question

I'm working on a typescript project that uses import/export style syntax for modules. I want to compile all the typescript files into a single file. Here is how my tsconfig.json looks like,

{
  "compilerOptions": {
    "module": "UMD",
    "noImplicitAny": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "target": "ES5",
    "lib": [
      "es2016",
      "dom"
    ],
    "outFile": "dist/beetl.js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

When I run the tsc command I'm getting the below error,

error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile.

I don't want to go with AMD or System and I want UMD, How can I achieve that?

Joyous

I've to stick with webpack to achieve this. Hopefully tsc will provide this in future. – Joyous

with webpack we still end up with multiple declaration files which is problematic – Cruse

I found this gist that has basically every output format you will eventually need. – Juanajuanita

Answer 1

If you use the grunt-typescript npm module and grunt to transpile, UMD will work with a single file output. Below is an example configuration block for your gruntfile.js:

typescript: {
        options: {
            module: 'umd', 
            target: 'es5',
            rootDir: 'src',
            sourceMap: true,
            declaration: true,
            removeComments: true
        },
        base: {
            src: ['src/**/*.ts', "!**/*.d.ts"],
            dest: 'dist/gen/OUT_FILE.js',
        }
    }

Catchword