1. Home
  2. 開発

React+JSXのコンパイル（Babel, browserify, webpack）

スポンサード リンク
PR：当サイトの記事には一部広告が含まれています

遅まきながらReactを使い始めました。

元々はAngularJS（1系）を利用していたのですが、Angular2が個人的に「う〜ん…」という感じだったので、今回Reactを使うことにしました。（もちろん、Angular2とReactを単純比較する必要はなく、プロジェクトによって使い分けることができるのがベストだと思います）

Reactを利用する際には、ReactやJSXをブラウザで動くJavaScriptにコンパイルする必要があります。この方法でちょっと迷ったので忘備録としてメモしておきたいと思います。

クライアント側（ブラウザ）でコンパイル

まず一番簡単な方法です。

CDNなどからブラウザでJavaScriptを読み込むことで、Reactのコードがコンパイルされます。下記では3つのJavaScriptを読み込んでいます。

  • JSXを使わない場合はreact.min.jsとreact-dom.min.jsだけでOKです
  • JSXを使う場合は…
    • browser.min.jsも読み込みます
    • <script>は<script type="text/babel">と記述します
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

  <script type="text/babel">
    ReactDOM.render(
      <h1 id="hoge">
        Hellow world!
      </h1>,
      document.getElementById('app')
    );
  </script>

</body>

↓

<div id="app"><h1 data-reactroot="" id="hoge">Hellow world!</h1></div>

もちろん、ブラウザでコンパイルする場合はクライアント側に負荷が掛かるので、Productとしてはおすすめできません。とりあえずReactを試してみたい！という場合に利用することをおすすめします。

Babel + browserify

続いてBabel + browserifyでコンパイルする方法です。

Reactをブラウザで動くJavaScriptにコンパイルするだけであればBabelだけで良いのですが、コンポーネント化されたReactのファイルを連結するのにbrowserifyを利用します。

デリレクトリ構造

デリレクトリ構造は下記とします。

+-- dist
| -- index.html
|
+-- node_modules
|
+-- src
| +-- js
| | -- app.js <-hoge.jsをimportしているとします
| | -- hoge.js
| |
-- package.json

【1】まず必要なパッケージをインストール

// React
npm install --save-dev react
npm install --save-dev react-dom

// Babel
npm install --save-dev babel-cli
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

// browserify
npm install --save-dev browserify

【2】次にBabelでsrc/jsの中にあるReactのJavaScriptをbuild/jsにコンパイル

./node_modules/.bin/babel --presets react,es2015 src/js -d build/js

【3】最後に先ほどbuild/jsにコンパイルされたJSをbrowserifyで連結してdist/bundle.jsにビルド

// app.jsがimportしているJSを全て連結する
./node_modules/.bin/browserify build/js/app.js -o dist/bundle.js

あとはindex.htmlからbundle.jsを読み込めばOKです。

webpack

最近はbrowserifyよりもwebpackの方が勢いがあるようなので、webpackによるコンパイルも試してみます。

デリレクトリ構造

デリレクトリ構造は下記とします。

+-- dist
| -- index.html
|
+-- node_modules
|
+-- src
| +-- js
| | -- app.js <-hoge.jsをimportしているとします
| | -- hoge.js
| |
-- package.json

【1】まず必要なパッケージをインストール

// React
npm install --save-dev react
npm install --save-dev react-dom

// Babel
npm install --save-dev babel-cli
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

// webpack
npm install --save-dev webpack
npm install --save-dev babel-loader

【2】次にwebpack.config.jsという設定ファイルを作成

const path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

上記の設定ファイルの内容は下記のような感じです。

  • entry：エントリーポイント
  • output：出力先
  • loader：コンパイルでBabelを利用することを指定
  • options：Babelのオプション

【3】webpackでコンパイル＆ビルドを実行

最後に設定ファイルwebpack.config.jsに基いてwebpackを実行し、コンパイル＆ビルドします。

ちなみに、いくつか方法（オプション）あるので下記を参考にしてください。

// ビルド
./node_modules/.bin/webpack

// 圧縮してビルド
./node_modules/.bin/webpack --optimize-minimize

// ビルド＋wacth
./node_modules/.bin/webpack -w

// Product用に圧縮してビルド
./node_modules/.bin/webpack -p

// Product用に圧縮してビルド（+source-map）
./node_modules/.bin/webpack -p --devtool source-map

なお、--optimize-minimizeで圧縮してビルドした場合、ブラウザ（デベロッパーツール）のコンソールで下記のようなエラー（Warning）が出ます。

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

このエラーが出るのは正しい挙動のようです（参照）。「minified（圧縮）してるけどdevelopment用にビルドされてるので、Product用にビルドしてね」とReactが教えてくれています。

つまり、development用のビルドだと不要なコードを含んでいるので、Product用にminified（圧縮）してビルドしてね、ということです。

なるほど。./node_modules/.bin/webpack --optimize-minimizeではなく./node_modules/.bin/webpack -pだとこのエラー（Warning）は出ません。さらに、ファイルサイズもかなり小さくなります。

基本的には開発環境では-wを使い、本番用にビルドする場合は-pを使うということで良いと思います。