Bundle typescript output in single file

Question

I have a bunch of typescript files following ecmascript 2015 module pattern in source folder. I have tsconfig setup to output the transpiled files to lib folder. That works good. But is there any way to bundle them together into a sigle file that can be used in the browser? I want my module to be available via npm and also as a script tag.

Refer to my dummy github project for details. tried the gulp-typescript, concat, uglify way, but in vain.

Solution

Use webpack with ts-loader to compile TypeScript and create a single bundle:

1. Install webpack

   > npm install webpack ts-loader --save-dev
   

2. Create webpack.config.js

   const path = require('path');
   module.exports = {
      entry: "./src/index.ts",
      output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, 'dist')
      },
      resolve: {
          extensions: [".webpack.js", ".web.js", ".ts", ".js"]
      },
      module: {
          rules: [{ test: /\.ts$/, loader: "ts-loader" }]
      }
   }
   

3. Run webpack

   > webpack
   

4. You may also need to install webpack-cli (messages will tell you as you go to run the webpack command)

   > npm install webpack-cli
   

See the documentation on webpack and ts-loader for more as configuration options change over time.