ReactのコードをBabelとBrowserifyでビルドする

何番煎じかわからないくらいの内容だけど、人に説明する機会ができそうなので整理するために書く

npm-script派なのでgulpとかは使いません

各ライブラリ、ツールの説明

雑な説明とリポジトリURL
詳しく知りたい場合は別のサイトでたぶん死ぬほど書いてる

Reactとは

facebook製のviewライブラリ
同じStateがあれば同じ結果が出てきて、おかしかったらState見ればわかるの楽だと思って使い始めました

github.com

Babel

ES2015とかのコードをちょっと前の仕様のコードに変換してくれるトランスパイラー
これがあればES2015のコードが動かないブラウザでも動くコードに変換してくれる

JSXを使う場合は、JSXの変換もしてくれる

github.com

Browserify

commonjs方式で書いたjavascriptの依存関係を解決してくれるすごいやつ
これがmodule分割したものをまとめてくれてブラウザで動く状態にしてくれる

github.com

本題

本題のReactのコードをbabelとBrowseify使ってビルドする

インストール

npmで必要なパッケージをダウンロード
今回は面倒なので全部--saveでインストールする

npm i -S react react-dom browserify babelify babel-preset-es2015 babel-preset-react babel-plugin-transform-es2015-modules-commonjs

Reactコードの準備

ES2015のclassで書いたReactのコードを用意する

//a.js
import React from 'react'
const A = (props) => (
  <div>
    <h1>A Component</h1>
  </div>
)
export default A;

//b.js
import React from 'react'
const B = (props) => (
  <div>
    <h1>B Component</h1>
  </div>
)
export default B;

//main.js
import React from 'react'
import ReactDOM from 'react-dom'
import A from './a'
import B from './b'

class Main extends React.Component {
  render() {
    return (
      <div>
        <A />
        <B />
      </div>
    )
  }
}

ReactDOM.render(<Main />, document.getElementById('app'))

browseifyとbabelでビルドする

./node_modules/.bin/browseirfy main.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

という感じになる

でも待って

流石に長いよね。babelの公式には.babelrcにbabel(babelify)の設定は記述する

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

これを作ることによって

./node_modules/.bin/browserify main.js -o bundle.js -t babelify

これだけでbuildできるようになる。
babelの設定は.babelrcに書くのがデフォです。

プロダクションビルド

この状態で作られたbundle.jsは容量も大きいです。
せめてminify化したりしたいですよね

npm i -S uglifyify

uglifyifyを使って圧縮します

こんな感じ

./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify

簡単ですね。
sourcemapを出したいなら

./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify --debug

--debugオプションを付けるとsourcemapが出せるらしいです