[JavaScript] Babel + ES2015 + React + webpack + gulp の最小構成

2016/08/12

こんにちは。きんくまです。

タイトルの通り、Babel + ES2015 + React + webpack + gulp の最小構成を作ってみました。

情報自体はweb上にいろいろと記事が載っていたのですが、細かいところでうまくいかなかったので、今日の時点でうまくいっている構成を載せておきます。

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "del": "^2.2.1",
    "gulp": "^3.9.1",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

.babelrc
transform-class-properties　について。これは通常必要ないのですが、ES2015ってプロパティがclassの中に直接定義できないみたいなので、それを定義できるようにするために入っています。
クラスベースの開発でプロパティの宣言ができた方がうれしいなって。

{
  "plugins": ["transform-class-properties"],
  "presets": ["es2015", "react"]
}

gulpfile.js

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

function buildJS(mode, callback){

    //書き出し設定 =========
    var settings = {
        context: __dirname + '/htdocs/src',
        entry:'./js/hello.js',
        output: {
            path: 'htdocs/js',
            filename: 'main.js'
        },
        plugins:[]
    };
    //==============

    settings.module = {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    };

    if(mode == "debug"){
        settings.devtool = 'source-map';
    }else if(mode == "release"){
        settings.plugins.push(
            new webpack.DefinePlugin({
                "process.env": { NODE_ENV: JSON.stringify("production") }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: { warnings: false }
            })
        );
    }

    webpack(settings, function(err, stats){
        if(err){
            console.error('webpack fatal error', err);
            return;
        }
        var jsonStats = stats.toJson();
        if(jsonStats.errors.length > 0){
            console.error('bundle error');
            jsonStats.errors[0].split('\n').map(function(errLine){
                console.error(errLine);
            });
            return;
        }
        if(jsonStats.warnings.length > 0){
            console.log('bundle warning', jsonStats.warnings);
        }
        console.log('bundle complete');
        if(callback){
            callback();
        }
    })
}

/**
 * デバッグモード
 * js圧縮なし。React developmentモード。sourcemapあり
 */
gulp.task('bundle_debug', function(){
    buildJS("debug");
});

/**
 * リリースモード
 * js圧縮あり。React productionモード。sourcemapファイル削除
 */
gulp.task('bundle_release', function(){
    buildJS("release", function(){
        del('./htdocs/js/*.map');
    });
});

webpackのエラー処理で、何かエラーがおきたときにもコンソールに出力するようにしてあります。
あと、デバッグモード（開発用）とリリースモード（本番用）の2種類の書き出し方法があります。

それで、reactのjsxが書いてあるプログラム（ソース）ファイルなんですが、これが以前の記事を見ると拡張子が .jsx でうまくいっていたようなのですが、なぜか今は .js じゃないとうまくいかなくなっていました。ここひっかかりました。

参考までにプロジェクトファイル一式
（ソースファイルのjs部分は、めっちゃ適当なので気にしないでください。どうすればできるのか試したままです、、。）
>> zipファイルです

あと開発環境が、JetBrainsさんのIDEAとかWebStormな人は、これやっておくといいみたい。