Umi Uyuraのブログ

プログラミング関連の作業ログ

React v0.14とBabelify v7(Babel v6)へアップデート

React Browserify Babel

新しいReactベースのプロジェクトを作ろうとして、せっかくなので以前作った雛形のパッケージ類をアップデートしておくことにしました。

umi-uyura.hatenablog.com

ちょうど最近、Reactがv0.14系になり、トランスパイラであるBabelもv6系になったようなので、そのあたりの影響箇所を確認。

React v0.14

React v0.14になって大きな変化としては、DOMを取り扱う処理がReact DOMパッケージとして分離されたそうな。

$ npm-check-updates -a
$ npm install
$ npm install react-dom --save

npm-check-updates を使って利用しているパッケージ群を最新バージョンにしてから npm install を実施後、 react-dom も追加でインストール。

さらに、トップレベルの.jsxで React.render() を呼び出していた部分を react-dom に差し替え。

var React = require('react');
var ReactDOM = require('react-dom');        // <= 追加

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Ready to use React !</h1>
      </div>
    );
  }
});

ReactDOM.render(                            // <= 差し替え
  <App />,
  document.getElementById('app')
);

他にもAddonも個別パッケージに分離されていたり、細かい変更もたくさんありますが、雛形レベルでは大したことをしていないので、上記のみで完了。

Babelify v7 (Babel v6)

ES6(ES2015)やJSXのトランスパイラのBabelもv6へメジャーバージョンアップして、それに伴いBrowserifyと組み合わせて使うBabelifyもv7にアップデートされました。

こちらも内部に持っていたトランスパイル処理がプラガブルになり、JSXのトランスパイルを行うには、 babel-preset-react が必要になるそうなので、導入。

$ npm install babel-preset-react --save-dev

さらに、 browserify 実行時に、 babelify が babel-preset-react を呼び出すように指定。

$ $(npm bin)/browserify -t [ babelify --presets react ] src/jsx/app.jsx -o app/js/bundle.js

ES6(ES2015)のトランスパイルをする場合は babel-preset-es2015 を使うらしいですが、まだそこまで至っていないので、今回はいったん見送り。

改めて必要になったら入れてみようと思います。

完成版

という感じでアップデートしたものができた。

umi-uyura/my-react-boilerplate

次回はこれをベースに作ってみよう。

参考

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック