かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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