typescript-> (ts-loader)-> es6 -> (babel-loader)-> es5

TsAndBabelSetup.sh

#!/usr/bin/env bash

mkdir src
mkdir dist

npm init -y
npm install --save-dev typescript
npm install --save-dev webpack # 1 系を想定している。
npm install --save-dev ts-loader
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2017
npm install --save-dev babel-preset-stage-3

touch .babelrc
cat << EOF > .babelrc
{
  "presets": ["es2017", "stage-3"]
}
EOF

touch tsconfig.json
cat << EOF > tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "target": "es6"
  },
  "lib": [
    "DOM",
    "ES2017"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}
EOF

touch webpack.config.js
cat << EOF > webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/hi.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    chunkFilename: '[chunkhash].js'
  },
  resolve: {
    extensions: ['', 'ts']
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [{
      test: /\.ts(x?)$/,
      exclude: /node_modules/,
      loader: 'babel-loader!ts-loader'
    }]
  }
}

/*
   # 解説
   ## resolve.extensions
   ## resolve.extensionsとは何か

   webpackで変換対象にするモジュールの拡張子を指定するオプション。

   ### resolveの '' の意味
   '' を指定しないとmoduleごとにもっているデフォルトの拡張子を見なくなって死ぬので, ''を含める。らしい。
   https://webpack.js.org/configuration/resolve/#resolve-extensions

   ## loaders
   ### webpack2で死ぬんだけど？

   webpack2では loadersがrulesに変わった。
   webpack2は2016年12月現在、まだβなのでこのshでは想定しない。
   https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules
*/
EOF