2015/12/17

browserifyでReact(JSX)をトランスパイル

概要

  • React (JSX) と ES2015 をトランスパイルする環境を構築する
  • できるだけシンプルな構成を目指す



環境

  • OS: Microsoft Windows [Version 6.1.7601]
  • Node: v4.2.3
  • npm: 2.14.7



モジュール バージョン

各モジュールのバージョンは以下のとおり。

"devDependencies": {
  "babel-preset-es2015": "^6.3.13",
  "babel-preset-react": "^6.3.13",
  "babelify": "^7.2.0",
  "browserify": "^12.0.1",
  "react": "^0.14.3",
  "react-dom": "^0.14.3"
}

バージョンによって手順が変わる可能性が高いため 最新の情報を参照する必要がある。



プロジェクトフォルダの作成

mkdir react-babel-sample
cd react-babel-sample
mkdir src
mkdir dist
  • src フォルダに変換前のソースコードを作成する
    • src/index.js がメインファイルであると想定する
  • dist フォルダにトランスパイルされた jsファイルが保存される
    • dist/bundle.js という名前で生成



package.json の作成

npm init
# 適当に入力



browserify のインストール

npm install --save-dev browserify

browserify は クライアントサイドのJavaScriptでモジュールシステムを実現するツール。



babelify のインストール

npm install --save-dev babelify babel-preset-es2015 babel-preset-react

babelify は browserify が javascript を処理する際に babel によって ES2015やReact(JSX)で書かれたソースを (browserが理解できる) ES5 に変換するツール。

babel-preset-es2015, babel-preset-react は それぞれ ES2015, React(JSX) の変換機能。

babel 本体から変換機能を切り離すことで、利用者は使用する機能を 取捨選択することが可能になっている。

browserify と組み合わせず、babel のコマンドラインツールで 変換することも可能。
今回は、後述する npm run build コマンド一回で トランスパイルが完了するようにしたかったため、このような構成とした。



Reactのインストール

npm install --save-dev react react-dom

browserify によってトランスパイルした際に dist/bundle.js に React.js 本体も含まれるようになる。



package.json の修正

{
  "name": "react-babel-sample",
  "version": "1.0.0",
  "description": "react project sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify src/index.js -o dist/bundle.js"
  },
  "keywords": [
    "react",
    "babel",
    "browserify"
  ],
  "author": "Kazunori Kimura <kazunori.kimura.js@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ]
    ]
  }
}

修正点は以下の2つ。

  • scripts に build の指定を追加。
    • browserify を使用して index.js を bundle.js に変換する
  • browserify を追加し、presets を指定
    • .babelrc というファイルを作成して presets の指定を行うことも可能だが、package.json に集約するほうがシンプル



サンプルコード

src/index.js

// index.js
import React from "react";
import ReactDOM from "react-dom";
import MainComponent from "./MainComponent";

ReactDOM.render(
  <MainComponent />,
  document.getElementById("content")
);

src/MainComponent.js

import React from "react";
import MySubComponent from "./SubComponent";

export default class MainComponent extends React.Component {
  render(){
    return(
      <div className="main-component">
        <h1>Main</h1>
        <MySubComponent />
      </div>
    );
  }
}

src/SubComponent.js

import React from "react";

export default class MySubComponent extends React.Component {
  render() {
    return(
      <div className="sub-component">
        sub component.
      </div>
    );
  }
}

dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="content"></div>

  <script src="bundle.js"></script>
</body>
</html>



トランスパイルの実行

$ npm run build

> react-babel-sample@1.0.0 build C:\Repository\react-babel-sample
> browserify src/index.js -o dist/bundle.js

dist/bundle.js が生成されていることを確認する。



更新履歴

  • 2015-12-15: 新規作成
  • 2015-12-16: サンプルコード追加
投稿者 時刻:
ラベル: , , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)