More than 5 years have passed since last update.

browserify+babelifyでReactアプリをトランスコンパイルできるシンプルなビルド環境を用意する

Last updated at 2019-03-02Posted at 2017-10-07

Reactアプリの開発環境は create-react-app で簡単に構築できるのですが、文法チェックから自動ビルドまで含めた万全の環境のため、ちょっと試すには少し重い気がします。なのでシンプルなトランスコンパイル環境を模索してみました。

最初は babel-cli だけで ok かと気軽に始めたのですが、Webブラウザ環境での import 問題が解決できず、結局は browserify と babelify の組み合わせに落ち着きました。

特に babelify のページには設定サンプルが豊富で、とても参考になりました。

準備

node と npm は利用できるよう準備しておいてください。私は node.jsの導入あたりを参考に導入しました。

まずは作業用のディレクトリ(フォルダ)を作成します。今回は "rtk-react" としました。そして src, build のサブディレクトリを作成しておきます。

シンプルなReactサンプル

まずは非常にシンプルなReactのサンプルを用意しましょう。

src ディレクトリに App.js ファイルを用意します。内容は以下をコピペしてください。

src/App.js

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

ReactDOM.render(
  <p>Hello, world!</p>,
  document.getElementById('react-root')
);

また build ディレクトリに index.html ファイルを用意します。内容は以下をコピペしてください。

build/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>rtk-react</title>
</head>
<body>
  <div id="react-root"></div>
  <script type="text/javascript" src="./App.js"></script>
</body>
</html>

サンプルはこれで準備できましたので、いよいよ環境の構築を始めましょう。

トランスコンパイル環境の構築

まずは作業ディレクトリに package.json ファイルを用意します。内容は以下をコピペしてください。

package.json

{
  "name": "rtk-react",
  "version": "1.0.0",
  "description": "Simple react transcode environment",
  "scripts": {
    "build": "browserify -t [ babelify --presets [ es2015 react ] ] src/App.js -o build/App.js"
  }
}

※ scripts 要素以外は自由に変更してok

この時点で作業フォルダの内容は以下のようになっているはずです。

そして作業ディレクトリで以下のコマンドを順に入力して、必要なモジュールを導入します。

npm install --save react react-dom
npm install --save browserify
npm install --save babelify
npm install --save babel-preset-react babel-preset-es2015

実行後、package.json ファイルは、dependencies要素が追加されて以下のようになっていました。

package.json

{
  "name": "rtk-react",
  "version": "1.0.0",
  "description": "Simple react transcode environment",
  "scripts": {
    "build": "browserify -t [ babelify --presets [ es2015 react ] ] src/App.js -o build/App.js"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}