use-babel.md

Babelを使ってみよう

さっそくBabelを使ってみましょう。 もちろんnodeとnpmはインストール済みですよね?

インストールする

ディレクトリを作ってプロジェクトを開始します

$ mkdir test && cd test
$ npm init -y

babel コマンドを使うには babel-cli というパッケージを導入します。

$ npm install -D babel-cli

実は、普通プロジェクトでBabelを使うときはbabelコマンドを使いません。 今回は、babelの動作を眺めるためなのでコマンドをインストールします。 コマンドは node_modules/.bin/babel にインストールされるのですが、 めんどくさい場合は -g を付けてグローバルにインストールしても構いません。 以後ディレクトリは省略します。

$ babel --version

でbabelコマンドの確認ができます。

最初のトランスパイル

さっそくBabelを使ってみましょう。 index.jsにこんなコードを用意してみます。

const f = (x) => x * x;

これはECMAScriptのコードです。 そのままブラウザにコピペしてみるとおそらく動かないでしょう。 Chromeでは

const f = (x) x * x;
VM2872:1 Uncaught SyntaxError: Unexpected identifier

というエラーが出ます。

さあ、これをトランスパイルしてみましょう。

$ babel index.js

どんな結果になったでしょうか?

const f = (x) => x * x;

ちくしょう! なにも変わってない! お前はいつもそうだ。

このbabelはお前の人生そのものだ。 口では変わると言って何も変わらない。

お前はいろいろな技術に手を付けるが、ひとつだってやり遂げられない。

誰もお前を愛さない。

Babelはプラグインが命

何も変換されなかったのは、Babel自体は変換のルールを一切知らないからです。 Babelは、何をどのように変換するかというルールを、全てプラグインという形で提供しています。 ユーザはプラグインを自由に組み合わせて高度な変換を行うことができます。

es2015 を変換できるプラグイン(プリセット) を導入してみましょう。

$ npm install -D babel-preset-es2015

.babelrc というファイルでbabelの設定ができます。

{
  "presets": ["es2015"]
}

今度こそ上手く行くはずです。

$ babel index.js

"use strict";

var f = function f(x) {
  return x * x;
};

ヒャッホオオオオオウ 最高だぜえええええええ!!

このコードはブラウザにコピペしても怒られません。