Edited at

Babel を使って React の jsx をコンパイルする

More than 3 years have passed since last update.

React は基本的に JSX というシンタックスで書くのだけど、

実際に使用するときには ES5 の js にコンパイルしないといけない。

(ライブラリを使えばそのままブラウザで実行できるようになるけどそれについては触れない)

公式が JSX をコンパイルするツールを出してはいるのですが、最近は ES2015 でも書きたいということもあるので、それを含めてコンパイルしてくれる Babel を使う。

Babel のほうが一般的によく使われてるらしいですし。


Babel をインストール

公式サイトの Setup のページを参考にやります。

とりあえず npm init しておきます。


質問は全部 y で。

$ npm init

babel をインストール。

$ npm install --save-dev babel-cli

package.json の 'devDependencies' に 'babel-cli' が追加されてれば OK。


package.js

  ...

"devDependencies": {
"babel-cli": "^6.9.0"
},
...

package.json の 'scripts' を下記のように変更します。


package.js

  ...

"scripts": {
"build": "babel src -d lib"
},
...

ちなみにこれは 'src' ディレクトリにあるものをまとめてコンパイルして、libディレクトリに出力するという意味。

-d オプションは出力先を指定するオプションです。

これで下記コマンドを叩けば build が走ります。

$ npm run build

lib/ にファイルが生成されたら OK。


(おまけ) .babelrc ではなく package.json に設定を書く

ちなみに上記の .babelrc に書いた babel の設定は package.json に書くこともできます。

その場合、下記のように "babel" って項目を追加すれば OK です。


package.json

  ...

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


プラグインを使う

上記のようにやるだけでは Babel はほぼ何もしてくれません。

Babel がどのようにコンパイルするのか、に関してはプラグインとして別ライブラリになっているものを別途入れる必要があります。

目的に合ったプラグインを入れましょう。

プラグイン一覧はこちら

今回は react の JSX と es2015 をコンパイルしてほしいので、下記のプラグインを入れます。

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

インストールできたら使用するプラグインを .babelrc ファイルに記載します。


.babelrc

{

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

これで再度下記コマンドで build したらプラグインで入れたもののコンパイルをしてくれます。

$ npm run build

ちなみに babel コマンドでコンパイルすることも可能です。

$ ./node_modules/.bin/babel src -d lib