maesblog

Reactをnpmでビルドする方法 browserify (watchify) + babelify編

2015年10月7日（水）にReactの最新バージョンである「React v0.14」がリリースされました。今回のバージョンでは、「Reactはnpm経由で使用し、browserifyやwebpackのようなツールを使ってコードを一つのバンドルの中にビルドする開発方法」が推奨されています。今回の記事では、browserifyを使った方法になりますが、npm経由でReactを使う方法について詳しく紹介していきたいと思います。

はじめに

react.js（リアクト）

今回の記事を書くにあたり、簡単なサンプルをReact v0.14で作りました。フォームに入力したテキストを出力するだけのものです。

ソースコードもGitHubにアップしているので、参考にしていただければと思います。

また最新バージョンのReact 0.14については、以下を参考にしてください。

npm環境の準備

まずはReactでのプロジェクトを進めていくためのディレクトリを作ります。

$ mkdir react-project

作成したプロジェクト用のディレクトリに移動して、npmを使えるようにします。以下のコマンドを実行するとディレクトリ内にpackage.jsonファイルが作られます。（前提としてNode.jsがインストールされている必要があります。）

$ npm init

Reactの開発に必要なファイルの準備

とりあえず今回の説明で使う以下の3つのファイルを作成します。

$ touch app.js index.html build.js

作成したファイルは以下の用途で使います。

  • app.js: Reactのコードを書いていきます。
  • index.html: Reactアプリケーションの本体となります。
  • build.js: app.jsのコンパイル先のファイルで、index.htmlに読み込ませるようにします。

作成したindex.htmlファイルを開いて、以下のように記述します。

<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <title>react 0.14 sample</title>
</head>

<body>
  <div id="content"></div>
  <script src="build.js"></script>
</body>

</html>
index.html

Reactのインストール

ファイルの準備が整ったら、いよいよReactをインストールしていきます。Reactはバージョンが0.14になって、必要なパッケージがreact（Reactのコアとなる部分）とreact-dom（DOMのレンダリングを行う部分）の2つに分割されました。なので、reactでの開発には、この2つのパッケージが必要となります。

reactとreact-domのインストール

以下のコマンドでreactとreact-domをインストールします。

$ npm install --save react react-dom

インストールしたパッケージの読み込み

npm経由でパッケージをインストールすると、Node.jsのrequire()メソッドを使ってパッケージを読み込めるようになります。開発用に作成したapp.jsファイルを開いて、ファイルの先頭に以下を記述して、パッケージを読み込むようにします。

var React = require("react");
var ReactDOM = require("react-dom");

ES2015のimportを使って読み込む場合は、以下のように書きます。

import React from "react";
import ReactDOM from "react-dom";

これでReactを自由に書いていくことができるようになります。Reactの書き方などはチュートリアルを参考にすると良いでしょう。当ブログでは本家サイトのチュートリアルを日本語に訳した記事を投稿していますので、併せて参考にしてみてください。

ビルド環境の準備

コードを書き進めていくと途中で開発状況の確認が必要となってきます。しかしながら、このままindex.htmlファイルにapp.jsファイルを読み込むだけでは、Reactの開発状況を確認することはできません。

上で説明したようにreactとreact-domを読み込むためにrequire()メソッドを用いていることと、Reactでは、JavaScriptのコードの中にHTMLのタグを直接書けるようにするためにJSXという構文を用いていることがその原因となっています。一度、ブラウザでも読める「素のJavaScript（ES5）」に変換してあげる必要があります。そこでビルド環境の構築が必要となってきます。

ビルド環境の構築方法はいろいろありますが、今回は手軽にコンパイルできるBrowserifyを使ったビルド環境の構築方法を紹介します。

Browserifyについては、ここでは詳しく説明しません。当ブログでもBrowserifyに関する記事をいくつかアップしているので、紹介しておきます。

watchifyのインストール

Browserifyと言いましたが、今回使うのはBrowserifyを含んでいるwatchifyというnpmのパッケージです。これは簡単に言うと「ファイルの状態監視機能付きのBrowserify」となります。しかも差分だけビルドするようになっていてかなり高速です。

以下のコマンドでwatchifyをインストールします。

$ npm install --save-dev watchify

babelifyのインストール

上でも書いたように、ReactではJSXというJavaScript内にHTMLタグを書くための構文を使用しています。Browserifyでapp.jsファイルをコンパイルする際に、JSXの変換を行う必要があります。

Browserifyに対応したJSXの変換ツールには、reactifyというパッケージがありますが、今回は今が旬のbabelifyを使うことにします。babelifyは次世代JavaScriptであるES2015（ES6）の変換に対応したBabelのBrowserify用のパッケージとなります。JSXのコンパイルにも対応しています。これを入れておけば、ES2015でReactも書けるようになるので、一石二鳥というわけです。

以下のコマンドでbabelifyをインストールします。

$ npm install --save-dev babelify

exorcistのインストール

exorcistはBrowserifyの実行時に、ソースマップを出力させるようにするパッケージです。必要に応じてインストールしてください。

以下のコマンドでexorcistをインストールします。

$ npm install --save-dev exorcist

bablefyのバージョンがv7.0.0未満の場合は、これで最低限のビルド環境は整いました。

.babelrcファイルの設定（babelify v7.0.0以上の場合）

Babelの仕様変更により、babelifyのバージョンがv7.0.以上の場合は以下の設定が必要となります。babelifyを実行する際にpresetsまたはpluginの指定が必要となりました。

babel-preset-reactのインストール

BableのReact（JSXのトランスパイル）用のpreset「babel-preset-react」をインストールします。

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

babel-preset-es2015のインストール

ReactをES2015（ES6）で書く場合は、Bableのes2015用のpreset「babel-preset-es2015」をインストールします。

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

.babelrcファイルの設定

pluginまたはpresetを指定するための.babelrcファイルをプロジェクトディレクトリ内に作成します。

$ touch .babelrc

作成した.babelrcファイルに以下を記載します。

{
  "presets": ["react"]
}

babel-preset-es2015をインストールした場合は、“es2015”を追記します。

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

bablefyのバージョンがv7.0.0以上の場合は、これで最低限のビルド環境は整いました。

Reactをビルドする

ビルドするには、Gruntやgulpのようなタスクランナーを使っても良いですが、今回は手軽にできるように[npm]コマンドを使用してファイルをビルドするようにします。

[npm run]コマンドを使用して処理を実行させるには、package.jsonの“scirpts”フィールドの値の部分に、実行させたいコマンドを記述します。

watchifyコマンドの実行内容を、package.jsonに以下のように記述します。コンパイル先のファイルには最初に作成したbuild.jsファイルを指定します。

"scripts": {
  "watch": "watchify -t babelify ./app.js -o ./build.js"
}
package.json

ソースマップも出力する場合は以下のように記述します。

"scripts": {
  "watch": "watchify -t babelify ./app.js -o 'exorcist ./build.js.map > ./build.js' -d"
}
package.json

以下のコマンドを実行すると、app.jsファイルを更新するたびにwatchifyが実行されるようになります。

$ npm run watch

以下のコマンドでindex.htmlファイルをブラウザで開き、Reactの開発状況を確認します。

$ open index.html

最後に製品版としてビルドする

開発が一通り終わると、最終的に製品版としてビルドすることになると思います。Reactはデフォルトでは、ディペロップメント（開発者）モードになっていて、余計な情報などが含まれています。開発時には必要なこれらの情報も、製品版には必要ありません。そこで、製品版としてビルドする際は、これらの情報を含まないようにしてあげる必要があります。そうすることで、アプリケーション自体の高速化も実現できます。

パッケージのインストール

これを実現するためにenvifyというBrowserify用のパッケージを使います。envifyの詳細などは以下を参照してください。

以下のコマンドでenvifyをインストールします。

$ npm install --save-dev envify

さらにビルドするコードの圧縮と最適化を行う場合は、uglify-js（UglifyJS2）というパッケージを使います。以下のコマンドでインストールします。

$ npm install --save-dev uglify-js

製品版のビルドは手動で行うことが多いと思うので、browserifyもインストールします。

$ npm install --save-dev browserify

コマンドの設定

package.jsonファイルの“scirpts”のキーの値の部分に、製品版のビルド時に実行させたいコマンドを記述します。envifyに製品版としての処理を行わせるために、“NODE_ENV=production”とコマンドの前に書いておきます。

"watch": "watchify -t babelify ./app.js -o ./build.js",
"build": "NODE_ENV=production browserify ./app.js -t babelify -t envify | uglifyjs -c warnings=false > ./build.js"
package.json

ちなみに、Windowsの場合は「NODE_ENV=production」が実行できないので、以下のようにコマンドを書きます。

"build-win": "set NODE_ENV=production && browserify ./app.js -t babelify -t envify | uglifyjs -c warnings=false > ./build.js"
package.json

コマンドの実行

以下のコマンドを実行すると、製品版としてビルドされます。

$ npm run build

以下のコマンドでindex.htmlファイルをブラウザで開き、Reactの開発状況を確認します。

$ open index.html

実際の処理について

Reactのコードは、Developmentモードの時だけ表示させたい部分を以下のように記述しています。

if (process.env.NODE_ENV !== 'production') {
  console.log('development only')
}

envifyにより、NODE_ENVの部分がproductionに置き換えられます。

if ('production' !== 'production') {
  console.log('development only')
}

最終的にuglifyでコードの最適化を行う際に、以下の部分がすべて不要なコードとして削除されます。

if ('production' !== 'production') {
  console.log('development only')
}

まとめ

Reactでの開発を始めるにあたって、最低でもこれだけの準備が必要であり、慣れてないと最初は結構大変だと思います。でも一度環境を整えてしまえば、あとは逆に開発だけに集中できるようになるし、他の開発にも応用が効いたいりするので、ぜひトライしてもらえればと思います。（もちろんReact v0.14でも、scriptタグで読み込んで使えるようにビルド済みのブラウザ版も用意されています。）

上でも書きましたが、サンプルとして作ったソースコードもGitHubにアップしているので、参考にしていただければと思います。

npmによる環境を整えたら、Fluxでの開発もすぐに準備できるようになります。当ブログではFluxに関する記事も書いていますので、最後に紹介しておきます。

入門 React ―コンポーネントベースのWebフロントエンド開発
  • 『入門 React ―コンポーネントベースのWebフロントエンド開発』
  • 著者: Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon HØjberg, Karl Mikkelsen, 宮崎 空(翻訳)
  • 出版社: オライリージャパン
  • 発売日: 2015年4月3日
  • ISBN: 978-4873117195

関連記事

コメント

  • 必須

コメント