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
でビルドできるようになった。めでたしめでたし。