webpack + babel + typescript + es6 - total solutions!

.babelrc

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"]
}

install.sh

npm install babel-core@6 --save-dev
npm install babel-loader@6 --save-dev
npm install babel-runtime@6 --save-dev
npm install babel-preset-es2015@6 --save-dev
npm install babel-preset-react@6 --save-dev
npm install babel-plugin-transform-runtime@6 --save-dev
npm install babel-plugin-transform-es2015-modules-commonjs@6 --save-dev
npm install babel-plugin-transform-object-assign@6 --save-dev
npm install babel-polyfill --save-dev
sudo npm install typings -g 
typings install

package.json

{
  "devDependencies": {
    "async": "^1.2.0",
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.8.0",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-native-modules": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.0",
    "file-loader": "^0.8.1",
    "object-assign": "^4.0.1",
    "uglify-loader": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-closure-compiler": "^2.0.2",
    "webpack-dev-server": "^1.14.1",
    "webpack-stream": "^3.2.0",
    "ts-loader": "^0.8.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "outDir": "build"
  },
  "exclude": ["node_modules"],
  "files": ["typings/index.d.ts", "entry.ts"]
}

typings

{
  "globalDependencies": {
    "d3": "registry:dt/d3#0.0.0+20160514171929",
    "jquery": "registry:dt/jquery#1.10.0+20160417213236",
    "mocha": "registry:dt/mocha#2.2.5+20160317120654"
  }
}

webpack.config.js

var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var webpack = require('webpack');
module.exports = {
  'entry': {
    // your entry file file (entry.ts or entry.js)
    'd3metric': ['./entry'],
    'd3metric.demo': ['./demo/demo.entry'],
  },
  'output': {
    'path': __dirname,
    'filename': '[name].js'
  },
  'module': {
    'loaders': [
      // ts-loader: convert typescript (es6) to javascript (es6),
      // babel-loader: converts javascript (es6) to javascript (es5)
      {
        'test': /\.tsx?$/,
        'loaders': ['babel-loader','ts-loader'],
        'exclude': [/node_modules/,nodeModulesPath]
      },
      // babel-loader for pure javascript (es6) => javascript (es5)
      {
        'test': /\.(jsx?)$/,
        'loaders': ['babel'],
        'exclude': [/node_modules/,nodeModulesPath]
      }
    ]
  },
  'externals': {
    // don't bundle the 'react' npm package with our bundle.js
    // but get it from a global 'React' variable
    'react': 'React'
  },
  'plugins': [],
  'resolve': {
    'root': [path.resolve('./src')],
    'extensions': ['', '.js', '.jsx', '.ts', '.tsx'],

    // this is only required when we "import 'jquery'"
    // 'alias': { 'jquery': path.join(__dirname, "vendor", "jquery-2.2.0.min.js") }
  }
};

why you need babel at all when using TypeScript ?

I think babel is useful when you have ES6 js files and only for new code you create ts files. Most likely TypeScript won't understand ES6 code. (I am guessing)

presumably you need babel if you have non-typescript es6 anywhere in your code and need es5 output, because the ts code will be targeted to es5 but the non-ts es6 code in anything in your project, or imported by your project will actually not get transpiled to es5.

At least that's what seems to be the case.

Typescript doesn't do polyfills, which babel does. If you write client-side code in es6 and want it to run on modern browsers, you'd probably need babel's polyfills.

It is less justified with server-side code - just use the latest node version for es6 support. But babel still provides some goodies that tsc doesn't - like caching, or a huge range of plugins that can be very useful.

Which version of typescript is that for? Typings file is obsolete for latest typescript isn't it?

to avoid 'nodejs module not found' you need to install @types/node (https://stackoverflow.com/questions/43804624/i-cant-import-node-modules-from-typescript-in-node-js)

So really interesting to read the presumptions. Then I want to create clarity. So TypeScript is meant to write versions with higher JavaScript (ES6 or higher). Babel uses it to compile back into a javascript which most browsers understand, e.g. ES5 but I would not specify an explicit version but specify how many versions he should compile back or make compatible.

Show my tutorial:
JavaScript scales with TypeScript
Or use my NPM package and generate:
Generator Webpack Preact (NPM)
Generator Webpack Preact (Github)

tsconfig.json
Here is the target for TypeScript and is it ES6

{
    "compilerOptions": {
        "target": "es6",
    },
}

.babelrc
And here is ES5

{
    "presets": ["es2015"],
}

But we can do this:
.babelrc

{
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 versions",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ],
},

Or this
package.json

"babel": {
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "browsers": [
                            "last 2 versions",
                            "safari >= 7"
                        ]
                    }
                }
            ]
        ],
},

Of course you should not do that in runtime, but in your development environment you should not have any performance losses.