[Sy] はじめての Babel (CDN を使わずに babel-standalone を yarn でインストール＆動作確認)

2018/02/13

Babel は、JavaScript の新しい仕様で書かれたコードを、IE9 などの少し古いブラウザでも動く仕様に沿ったコードに変換してくれる「トランスパイラ」と呼ばれるものです。今回は Babel を yarn でインストールして、CDN から読み込まないで使える状態の環境を作っていきます。

1. Babel（babel-standalone) をインストール

作業ディレクトリを作って、

$ mkdir hello-babel
$ cd hello-babel

Babel をインストールします。

今回は、 CDNを使わずにローカル環境で完結できるようにしたい という場合を考えているので、 babel-standalone というモジュールをインストールします。

$ yarn add babel-standalone
・
・
・
└─ babel-standalone@6.26.0
✨  Done in 1.64s.

インストールはこれだけです。

node_modules/babel-standalone/babel.min.js を HTML で読み込んで使います。

2. コードを書く

以下のように、 index.html を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのBabel(standalone)</title>
</head>
<body>
  <div id="app"></div>

  <script src="/node_modules/babel-standalone/babel.min.js"></script>
  <script type="text/babel">
    const getMessage = () => "Hello Babel!";
    document.getElementById('app').innerHTML = getMessage();
  </script>
</body>
</html>

babel.min.js を読み込む
<script type=text/babel> 内に新しい仕様を使った（使わなくてもよい） JavaScript のコードを記述

というコードになってます。

今回のサンプルは、<div id="app"> に Hello Babel! という文字を追加するというだけのシンプルなものです。

3. 動作確認

index.html をブラウザで表示すると、 Hello Babel! という文字が確認できるはずです。

また、この時に Developer Tools で head タグ内を確認してみると、このように Babel がトランスパイルしてくれたであろうコードが埋め込まれているのがわかります。

古いブラウザでも実行できる形式に関数の記述が変わっていますね。