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']},
    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'));
});

webpackの実行結果をapp/public/javascriptsに吐き出す想定です。