Node.js アプリで Babel の ES2015 を利用する（babel-register） #JavaScript

新しめの Node.js なら ES2015(ES6) のシンタックスをかなりサポートしていますが（参考：Node.js ES2015/ES6 support）、例えば stage 段階の機能を個別に取り込んだり等、利用する機能を自分でコントロールしたい場合。

babel-node で起動すればよいという話もありますが、production 環境で使うべきでないと公式に書いてある（参考：CLI · Babel）ので。ただ今回の barel-register を利用する方法だと起動に少し時間がかかります（各 JS ファイルを読み込むタイミングで Babel 変換するので）。

前提となる私の環境

OS：OS X 10.11.5（El Capitan）
Node：6.2.1
npm：3.10.7

まず babel-register と babel-preset-es2015 を npm コマンドでプロジェクトに導入します。

$ npm install -S babel-register babel-preset-es2015

また今回はプラグインを導入する例として、現在(2016.09.22)ではまだ stage 段階である class properties を有効にするプラグインを導入してみます。

$ npm install -S babel-plugin-transform-class-properties

.babelrc において、presets に babel-preset-es2015 を、プラグインに babel-plugin-transform-class-properties を指定します。

.babelrc

{
  "presets": ["es2015"],
  "plugins": [
    "transform-class-properties"
  ]
}

確認用のプログラムを作り試してみます。class-properties を利用した Porson.js を定義して export し、

Person.js

class Person {
  name = 'Yamada'

  hello() {
    console.log(`Hello! ${this.name} san.`)
  }
}

export default Person

今回のアプリの起点となる app.js で import します。

app.js

import Person from './Person'

const person = new Person() // インスタンス化
person.hello() // メソッドを呼び出し

あとは、任意の Node.js アプリを次のように起動するだけです。

$ node -r babel-register ./app.js

-r オプションでプリロードに babel-register を指定しています。これによりプリロードした以降に読み込む JavaScript は自動で Babel 変換がされます。

WebStorm 等で起動する場合は、次のように Run/Debug Configurations の設定で Node parameters に -r babel-register を指定すればよいです。

上記のように WebStorm から起動する場合はブレークポイントを設定してデバッグすることが可能になります。特に別途、ソースマップを出力する必要はありません。

ほか

起動する際に毎回 -r babel-register を指定するのは面倒なので、npm scripts を定義しておくと良いと思います。例として今回の package.json は次のようになります。

package.json

{
  "name": "es2015-node-app",
  "version": "0.0.1",
  "scripts": {
    "start": "node -r babel-register ./app.js"
  },
  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-register": "^6.14.0"
  }
}

この例だと $ npm start でアプリを起動することができます。

ソースコード全体は GitHub に置いておきます。
⇒ https://github.com/hkusu/es2015-nodejs-example