What is the best approach for TypeScript with ES6 modules?

Question

I am starting a new Web project and trying TypeScript, mainly as an ES6 transpiler but also with the additional benefits of type checking, especially for existing libraries such as jQuery combined with the DefinitelyTyped type definitions.

Since the latest version, TypeScript supports both its own internal modules and ES6 modules, which calls "external" modules. Because ES6 is more standard than TypeScript, my intention is to use ES6/external modules rather than the traditional/internal TypeScript modules.

I have my own code defined in several files/modules, but I want the build to generate a single .js file that I can load from the browser.

The problem is that as far as I can tell, TypeScript is only able to generate a single output file when using its own module format. If I try to use ES6 external modules, then it generates a separate .js file for each .ts file.

This means I would need to concatenate them using browserify, but also I want source map support, which means that I should configure browserify for input and output source maps, then combine it with exorcist so the source map is extracted out of the bundle.

That looks like a very complex build setup. Isn't there a more straightforward way, maybe directly supported by TypeScript? What is the best approach? What do you recommend?

Answer 1

Let TypeScript do what it does best...

• Add types to JavaScript be it ES5/ES6/ES7
• Transpile to ES5
• Resolve modules via the specified module syntax (commonjs, amd, umd, system)

Then find another tool that will take the separate files and combine them into a single bundled file (in the right order). My suggestions are to look into:

• webpack
• browserify
• tsify