36
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-05-31

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
36
35
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?