How to setup TypeScript + Babel + Webpack?

I have these dependencies:

"devDependencies": {
  "@types/node": "^4.0.27-alpha",
  "babel-core": "^6.10.4",
  "babel-loader": "^6.2.4",
  "babel-polyfill": "^6.9.1",
  "babel-preset-es2015": "^6.9.0",
  "babel-preset-stage-0": "^6.5.0",
  "ts-loader": "^0.8.2",
  "typescript": "^2.0.0",
  "webpack": "^1.13.1"
}

.babelrc:

{
  "presets": [
    "es2015",
    "stage-0"
  ]
}

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "built"
    },
    "exclude": [
        "node_modules"
    ]
}

webpack.config.js:

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './built/bundle.js',
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.tsx?$/, loaders: ['ts-loader', 'babel-loader'], exclude: /node_modules/
    }],
  }
};

/src/index.ts:

async function foo() {
  const value = await bar();
  console.log(value);
}

function bar() {
  return new Promise((resolve, reject) => {
    return resolve(4);
  });
}

(async function run() {
  await foo();
}());

With this setup it does work, I can build and run it (logs 4 correctly). However I'm always getting some errors on Webpack:

ERROR in ./src/index.ts
(4,32): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(6,12): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(31,451): error TS2346: Supplied parameters do not match any signature of call target.

ERROR in ./src/index.ts
(40,33): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(41,12): error TS2304: Cannot find name 'regeneratorRuntime'.

It seems it has something to do with babel-polyfill. What am I missing?

Solution

(4,32): error TS2304: Cannot find name 'regeneratorRuntime'.

This is a symptom that the output of babel is getting fed to ts. This order is wrong

Fix

You compilation setup should have TS output fed to Babel.

Alternatively you can compile TypeScript with just Babel using @babel/preset-typescript.

Compiling TypeScript with Babel : https://babeljs.io/docs/en/babel-preset-typescript

How to setup TypeScript + Babel + Webpack?

Fix

More