Node.js アプリで Babel の ES2015 を利用する(babel-register)

  • 11
    Like
  • 0
    Comment
More than 1 year has passed since last update.

新しめの 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-registerbabel-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 において、presetsbabel-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.jsimport します。

app.js
import Person from './Person'

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

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

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

スクリーンショット 2016-09-23 15.14.39.png

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

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

debug-sample.png

上記のように 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