babelでトランスパイル

今回はいつも以上に基本的なこと。
webpackを使って複数のjsを単一ファイルにトランスパイルしてきたが、トランスパイルはbabelの仕事。
だからbabel単体を利用して、トランスパイルするにはどんな環境構築作業が必要なのかを備忘録として残しておく。

ただ、jsでリファクタリング学習するためにトランスパイルしたファイルをnodejsで実行したかっただけなんだけど...

インストール

# babelをインストール
npm install -D babel-cli

# ES6対応presetをインストール
npm install -D babel-preset-env

babel設定

.babelrcを作成して、以下を記入する

// .babelrc
{
  "presets": ["env"]
}

buildコマンド設定

npm run buildと入力することでトランスパイルさせたいので、npm scriptsを設定する。今回は、srcフォルダ内をすべてトランスパイルさせて、結果をdistに出力させる。

// package.json
{
  ...
  scripts: {
    "build": "babel ./src --out-dir ./dist"
  }
  ...
}

これでnpm run buildと入力すると、distフォルダにトランスパイルした結果を得られる。

他のプラグインを追加したい時

クラスプロパティを利用したい場合や、トランスパイル時にflowの記述を取り除きたい場合は、別途プラグインのインストールと設定が必要

// クラスプロパティプラグイン
npm install -D transform-class-properties

// flow除去プラグイン
npm install -D transform-flow-strip-types
// .babelrc
{
  "presets": ["env"],
+  "plugins": [
+   "transform-class-properties",
+    "transform-flow-strip-types"
+  ]
}