Hello, world 的なコードを書いて、 Babel を試してみる。

Babel とは何か

Babel は、次世代 JavaScript 仕様である ECMAScript 6 で書かれたコードを、現行の Web ブラウザなどの JavaScript 処理系で動くコードに変換してくれるツール。

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

Babel · The compiler for writing next generation JavaScript
ECMAScript 2015 (第 6 版) は、ECMAScript 言語標準仕様の現行バージョンです。一般的に "ES6" として参照され、Firefox や他の Mozilla アプリケーションで使用されているエンジンの SpiderMonkey における JavaScript 実装のための標準仕様を定義しています。

Mozilla における ECMAScript 6 のサポート - JavaScript | MDN

Babel のインストールには Node.js (npm) が必要

Babel のインストールには Node.js (というか npm) が必要なので、事前にインストールしておく。

Mac なら Homebrew や nodebrew を使うのが便利。

Babel のインストール

コマンドラインでシンプルに試せるように、 Using Babel · Babel を参考にインストールする。

npm で Babel をインストールする。


$ npm install -g babel
 
$ which babel
/Users/alice/.nodebrew/current/bin/babel
 
$ babel --version
5.8.23 (babel-core 5.8.25)

1つのファイルに JavaScript のコードを書いて試す

1つだけのファイルに書く、シンプルなサンプル。

Hello クラスを書いて、クラスの print メソッドを呼び出す。


$ cat app.js
 
class Hello {
 
  constructor(name) {
    this.name = name;
  }
 
  print() {
    console.log("Hello, " + name);
  }
}
 
var name = "Alice";
var hello = new Hello(name);
hello.print();

Babel で変換。


$ babel app.js -o dst.js

Babel コマンドラインの公式ドキュメントはこちら。
⇒ CLI · Babel

変換された js ファイルを Node.js で実行。


$ node dst.js
Hello, Alice

複数のファイルに JavaScript のコードを書いて試す

src ディレクトリを作って、そこに複数の *.js ファイルを置く。

Hello クラスを書く Hello.js ファイル。


$ cat src/Hello.js

class Hello {

  constructor(name) {
    this.name = name;
  }

  print() {
    console.log("Hello, " + name);
  }
}

Hello クラスを使う、 main.js ファイル。


$ cat src/main.js

var name = "Alice";
var hello = new Hello(name);
hello.print();

ソースコードの置いてあるディレクトリを指定して、 Babel を実行。


$ babel ./src -o dst.js

Node.js で、変換された js ファイルを実行する。


$ node dst.js
Hello, Alice

なぜか、 import や export を書いていないのに動いてしまうのが気になるけど、それはまた別途試すことにする。

import, export 関連の Babel 公式ドキュメント
⇒ Modules · Babel

tags: babel javascript nodejs

Posted by NI-Lab. (@nilab)