React 開発環境構築

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。

react や react-dom などのライブラリは npm でインストール。 そういえば Bower ってオワコン化してしまったな。

# プロジェクトフォルダを作る(名前は適当なやつで)
mkdir react-project
cd react-project

# package.json を作る
npm init

# React をインストール
npm install --save react react-dom

npm でインストールしたライブラリを使って書いたアプリは、 browserify でビルドして 1 つの .js ファイルにする。

npm install --save-dev browserify

JSX のコンパイルは、Babel がデファクトスタンダードになっているので、Babel で。 browserify と一緒に使うから babelify をインストールする。

Babel で JSX と ES2015 をコンパイルするためには、 別途パッケージのインストールが必要になっていて嵌った。

npm install --save-dev babelify
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015 # Windows だと失敗した

.babelrc を作成して、別途インストールしたプリセットを使うように指定。

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

React で書いたアプリのビルドは当面、npm run で行うので、package.json に次を追加。 grunt や glup は必要になったら導入する。

"script": {
  "build": "browserify src/app.js --transform babelify --outfile build/bundle.js"
}

これで React 使って書いたアプリが

npm run build

でビルドできるようになった。めでたしめでたし。