現代的JavaScriptおれおれアドベントカレンダー2017 – 1日目

基本的にIE以外の現代的なブラウザ（つまり更新されているもの）では、特に何もしなくても現代的なJavaScriptをだいたい利用することができます。

それでも古い環境に対応するため、あるいはより先進的な記法を使う場合、Babelの力を頼りましょう。

前提知識

  • CLI
  • npm
  • package.json

Babelとは

「次世代JavaScript記法のためのコンパイラ」です。コンパイラじゃなくてトランスパイラという表現を使う人もいます。

Babelは「黒い画面」で動くツールで、これを使うと新しい文法で記述したJSファイルを変換して、古い文法で構成されたものを生成することができます。そしてそれは古い環境でも動作します。Sass/SCSS→CSSみたいな。

インストール

とりあえず “babel-cli” と “babel-preset-env” が必要です。

$ npm install babel-cli babel-preset-env

前者、 “babel” 自体ではなく “babel-cli” であることに注意してください。

実行方法

こちらのコマンドで実行します。（ <INPUT_DIR> と <OUTPUT_DIR>を変更してください。）

$ ./node_modules/.bin/babel <INPUT_DIR> -d <OUTPUT_DIR> --presets=env

実行例

例えば元のファイル src/main.js がこんなんだったとすると、

console.log(`It is ${new Date().toString()} now.`);

こういうコマンドを打って、

$ ./node_modules/.bin/babel src/ -d out/ --presets=env
src/main.js -> out/main.js

出力されるファイル out/main.js はこうなります。

"use strict";

console.log("It is " + new Date().toString() + " now.");

最後にHTMLから、こちらの出力された方を読み込むようにしましょう。

<script src="/path/to/file/out/main.js"></script>

これで先のテンプレート記法や、 class や const といった新しい記法を使ったコード（を変換したもの）が、古い環境でも動くようになります。

コマンドライン入力を減らす

npm script

先ほどはなかなか長いコマンドを打ちましたが、これを package.json に追加しておくと、毎回長いオプションを書く必要がなくなります。

{
  "scripts": {
    "build": "babel src/main.js -o out/app.js --presets=esenv"
  }
}

$ npm run build

npx

npm scriptの他に、npxを使うという手もあります。新しいnode.jsには最初から入ってます。入っていない場合は npm install --global npx で入れます。

$ npx babel src/main.js -o out/app.js --presets=env

こちらも node_modules 書かなくて済む。

.babelrc

設定ファイルです。コマンド実行時の諸々オプションが今後諸々増えていくかと思うのですが、それらをコマンドとして記述する代わりに、一度ここに書いておくだけで済むようになります。

{
  "presets": ["env"]
}

$ npx babel src/ -d out/
src/main.js -> out/main.js

他のツールと組み合わせて使う

実際使うならWebpackなりBrowserifyなりで使う感じかなと思います。

こちら↓で組み合わせて使うツールを選ぶと、セットアップ方法が出てきます。あら便利。

Browserifyとかだけじゃなくて自動試験ツールとの組み合わせ方とかも。あらあら便利。

Polyfillを追加

一部機能を使うにはPolyfillが必要です。

polyfill.min.js をどこかに持ってきてHTMLから読み込んでください。あ、cdnjsにあるじゃん。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

ビルドツールを使う場合は npm install 後に require() します。

ハマりどころ

何も変換されないよ

--presets=env を付けてないのでは。

Babel本体は「変換する機能」を提供するもので、実際になにをどう変換するかはpresetがその作業を担っています。presetの方も忘れずにインストールして、 --presets で指定してください。

そういえば、Babel公式チュートリアルは最後まで進めないとその「変換」をしません。

4. Create .babelrc configuration file

Great! You’ve configured Babel but you haven’t made it actually do anything.

よっしゃ！　これでBabelの準備ができたけど、実はまだ、何もしてないです。

お前な～～～！

ディレクトリないよ

-d で出力先ディレクトリを指定する代わりに -o で出力先ファイルを指定できるんですけど、そちらは事前にディレクトリを用意しておかないとエラーになります。

Error: ENOENT: no such file or directory, open ‘out/app.js’

一部新記法が変換されないよ、SyntaxErrorになるよ

必要なpresetがないかも。 babel-preset-es2015 とかよりenv使おう。

ReferenceError: regeneratorRuntime is not defined

polyfillがないかも。本文参照。

require() が変換されないんですが

それBabelの仕事じゃないです。

WebpackやBrowserify等が必要です。ちなみに import （ES2015の仕様）も require() へ変換されるだけみたいなので、やっぱり別途ツールが必要。

変換ついでにminifyしたい

Babel公式のminifierがありますのでそちらをどうぞ。

presets に追加して使えます。

babel-preset-es2015 vs babel-preset-env

envの方で良さそう。 Babel公式チュートリアル でもenvです。

更新履歴

  • 2017-12-02 Babili追加