Edited at

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

More than 3 years have 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とかした方がいいと思う。おしまい。