読者です 読者をやめる 読者になる 読者になる

Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

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

React NW.js Browserify node-webkit

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

umi-uyura.hatenablog.com

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",
    ...
  },
}

感想

ES6も正式に承認された( JavaScript系スクリプト言語の最新標準仕様「ECMAScript 2015」(ES6)が採択:CodeZine )そうなので、これを気に、そろそろ取り組んでいきたいところです。

参考

JavaScript 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

JavaScript 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)