TypeScript + React + WebPack + Gulpの作り方(SourceMapからminifyまで)

自分用メモ。

まず、tsconfig.jsonから。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "jsx": "react"
  },
  "exclude": [
      "node_modules"
  ]
}

とりあえず、node_modulesを除いたファイルを対象にしておけばだいたいOK。

次に、webpack.config.jsです。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app: './react/app.tsx'
    },
    output: {
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    resolve: {
        root: [path.join(__dirname, 'node_modules')],
        extensions:['', '.js', '.ts', '.tsx']
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    }
}

react/app.tsxがエントリポイントとなる想定。そして出力はbundle.js。

次に、grupfile.jsです。

gulpfile.js

var gulp = require('gulp');
var webpack = require('gulp-webpack');

gulp.task('build', ['buildClient']);

gulp.task('buildClient', function() {
    var config = require('./webpack.config.js');
    return gulp.src('./react/app.tsx')
        .pipe(webpack(config))
        .pipe(gulp.dest('./app/public/javascripts'));
});