grunt
react.js

ES2015(ES6)で書かれたReact.jsコードのビルド環境を作る(Grunt + browserify + babel + babelify)

More than 1 year has passed since last update.

爆速で作る。とりあえず今回はminifyとかconcatとかしない。

パッケージインストール

まずは必要なパッケージをnpmでインストール。

$ npm install react react-dom grunt grunt-cli grunt-contrib-watch grunt-browserify grunt-babel babel-preset-react babel-preset-es2015 babelify

babel

babelはES6仕様で書かれたjsをES5に変換してくれるツール。という認識だったんだけど、他にも色々とファイルの変換をやってくれるみたい。jsx→jsもやってくれる。
で、grunt-babelはgruntでbabelを使えるようにしたもの。

babelのバージョンが6.0以上の場合、babelの用途毎に分割されたモジュールを別でインストールする必要がある。
今回はbabel-preset-es2015babel-preset-react
babel-preset-es2015はES6(ES2015)で書かれたコードをES5に変換してくれるもので、babel-preset-reactはjsxのコードをjsに変換してくれる。

Browserify

Browserifyは、node.jsで書かれたjsをブラウザでも動くように変換してくれるツール。CommonJS仕様で書かれたjsのrequire()とかブラウザじゃ動かないから、そこらへんをうまいことブラウザで動くように解決してくれる(たぶん)。

Babelify

Babelifyは、Browzerifyにtransformを生やすことで、Browzerifyの処理の中にBabelによる変換処理を挟めるようにするもの。

grunt

省略。

Gruntfile

Gruntfileにタスクを書く。

Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    entry: './main.js',
    watch: {
      browserify: {
        files: ['src/scripts/**/*.js'],
        tasks: ['browserify']
      }
    },

    browserify: {
      dist: {
        options: {
           // 'es2015'はES2015→ES5への変換、'react'はjsxのコンパイル
           transform: [['babelify', {presets: ['es2015', 'react']}]]
        },
        src: ['src/scripts/app.js'],
        dest: 'dist/scripts/app.js',
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');

  grunt.registerTask('default', ['browserify']);

};

Grunt watch

Gruntfileの

Gruntfile.js
    watch: {
      browserify: {
        files: ['src/scripts/**/*.js'],
        tasks: ['browserify']
      }
    },

の部分で、watchの設定を行っている。
これでファイルの変更を監視して、変更があったらtasks: ['browserify']を実行させるようにする。

$ grunt watch

で監視。
ファイルに変更があると

>> File "src/scripts/react/main.js" changed.
Running "browserify:dist" (browserify) task
>> Bundle dist/scripts/app.js created.

Done, without errors.

このように自動でコンパイルしてくれるようになる。

たぶん動く

srcdestの場所を適切に設定してやればこのコードでちゃんと動くと思う。たぶん。
あと実際の開発ではこれに加えてuglifyとかconcatとかした方がいいと思う。おしまい。