JSXトランスパイラをBalelifyへ乗り換えた

少し前にReactとNW.jsで遊んでいたのですが。

<a href="http://umi-uyura.hatenablog.com/entry/2015/05/18/192815">React(JSX)開発にBrowserifyとReactifyを導入 - Umi Uyuraのブログ</a>umi-uyura.hatenablog.com

<a href="http://umi-uyura.hatenablog.com/entry/2015/05/20/090130">Browserify + ReactifyにWatchifyを導入してJSXの自動ビルド環境を作った - Umi Uyuraのブログ</a>umi-uyura.hatenablog.com

ReactではJSXという記法を使いますが、それをJavaScriptへ変換するためのトランスパイラと呼ばれるものについては複数存在しているようです。

私の場合、その中でも一番基本と思われる、Facebookが開発している react-tools (JSX transformer) 、およびBrowserify用に Reactify（内部でreact-toolsを使用）を使っていました。

ところが、先日Facebookの発表で、

Deprecating JSTransform and react-tools | React

ということになったようなので、以前作った土台プロジェクトも、Babelifyに乗り換えておくことにしました。

umi-uyura/react-on-nwjs-sample

BabelのサイトでBrowserifyを選択したところ、導入方法や使い方の例が出てきたので、そのあたりを参考にしつつ、やってみました。

Using Babel · Babel

Reactifyを削除

package.jsonからも削除したいので、 --save-dev を付けて実行。

$ npm uninstall reactify --save-dev

Babelifyを導入

導入もnpmにて。

$ npm install --save-dev babelify

Babelifyでの変換

Reactifyのときは以下のように実行していたので、

$ $(npm bin)/browserify -t reactify src/app.jsx -o build/bundle.js

-t reactify を -t babelify に差し替え。

$ $(npm bin)/browserify -t babelify src/app.jsx -o build/bundle.js

その後、 $ npm start で実行してみたところ、問題なく実行できました。

f:id:umi-uyura:20150619190634p:plain

出力結果を比較してみた

気になったので、ReactifyとBabelifyで出力されたコードを比較してみました。

f:id:umi-uyura:20150619190644p:plain

改行の位置が違うものの、コードとしては出力結果は同じでした。

package.jsonを書き換え

npm run で呼び出していたコマンドも、Babelifyに差し替えました。

自動ビルドのためにWatchifyも設定していたので、こちらもBabelifyを使うようにしつつ、package.jsonを書き換えておきました。

{
  "scripts": {
    ...
    "babelify": "browserify -t babelify src/app.jsx -o build/bundle.js",
    "watchify": "watchify -t babelify src/app.jsx -o build/bundle.js -v",
    ...
  },
}