WatchifyとBabelifyでES2015とReactをする。（no Gulp）

2016/05/10 22:49:43

BabelがわりにTypeScriptを使うという雑なことを続けていましたが、Babelでも作業できるようにします。

├ public/
│  ├ js/
│  │  └ build.js # 書きだされたｊｓ
│  └ index.html
│
└ src/
   ├ js/
   │  └ index.js # ES2015のjs
   ├ out         # ../public/jsへのシンボリックリンク
   ├ .babelrc
   └ package.json

Babelの準備

ES2015を使うにはbabel-preset-es2015が、ReactのJSXを使うにはbabel-preset-reactが必要なので、WatchifyとBabelifyに加えて、それぞれインストールします。

npm i -D watchify babelify babel-preset-es2015 babel-preset-react

Babelが走る設定は.babelrcを用意してそれに記述します。

{
  "presets": ["react", "es2015"]
}

package.jsonの準備

npm run buildでwatchifyが走るように、package.jsonのscriptsの項目にコマンドを追加します。

"scripts": {
  "build": "watchify -t babelify ./js/index.js -o ./out/built.js -v"
}

ES2015とJSXで書かれた./js/index.jsをwatchifyコマンドでbabelify経由コンパイルし、解釈できるようにした./out/built.jsをアウトプットするというコマンドです。

-vはワッチ処理結果を表示してくれるので、ちゃんと動いてるかわかりますから入れておいたほうが安心です。

./outは../public/jsへのシンボリックリンクとなっていますので、最終的には../public/js/build.jsという位置に書きだされます。

これは単なる趣味で、ダイレクトにディレクトリを指定して良いと思います。

no Gulp

特に反Gulpであるとかそういうことではなくて、Sassのコンパイルや最終的な圧縮などではGulpでポンです。

しかしちょっと試したい時にながながとGulpを用意するのはめんどくさいのでno Gulpが良いです。