Typescript - bundle all source files in single output with required external modules from node_modules

Question

I am using typescript to bundle my application into a single .js file. As far as I understand this is possible since TS 1.8 (I am using 2.1). Here is my .tsconfig

{
  "compileOnSave": true,
  "compilerOptions": {
    "experimentalDecorators": true,
    "alwaysStrict": true,
    "jsx": "react",
    "noEmitOnError": true,
    "outFile": "dist/bundle.js",        
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "module": "system"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

This really creates the bundle.js file but the referenced modules from node_modules are not in this bundle. Is it possible to add the module in the bundle somehow?

I know that this can be done using Webpack or similar tools, but my question is whether it is possible to do it only using typescript

Answer 1

Short answer is no.

Long answer is that you can do it in some cases, but it probably shouldn't be attemped. TSC works as a TypeScript-to-JavaScript compiler, converting files and checking for their validity. Creating proper bundles, especially from JavaScript dependencies of different versions, has a whole different set of requirements and expectations that are not part of the scope of the transpiler.

There are some cases where you can have a pure TSC-based bundle workflow, and it may even make sense to do so. But those would necessarily mean you're dealing with a pure TypeScript solution, and not really meeting the expectations you'd have from a real bundle.

It may sound like an unnecessary complication at first, but Webpack is the way to go, even for libraries.