babelで記述したファイルをシェルやnpm scriptsで直接実行する方法。

setup

準備はbabelを利用するときに行う一連の流れと一緒。

コアモジュール

babel本体とnode用をインストール。

# shellで直接実行する場合
$ npm i -g @babel/core @babel/node

# npm scriptsで実行する場合
$ npm i -D @babel/core @babel/node

@babelはベータ版なので安定版を使う場合はbabel-core babel-nodeでインストール。

プリセット

通常使っているプリセットとプラグインをインストール。
※ここではpreset-envを利用

$ npm i -D @babel/preset-env

@babelはベータ版なので安定版はbabel-preset-envでインストール。
※babel-core等でインストールしている際は@babel/**のモジュールは動作しないのでどちらかに統一する

設定ファイル

package.jsonか.babelrcかシェルオプションで設定を記述。
ここでは.babelrcを利用。

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "compact": false
}

実行ファイルを作成

一番簡単な例として下記を作成します。

import path from 'path'
console.log(path.resolve())

これで、該当ファイルまでの絶対パスをコンソールに出力できます。
※pathはnodeモジュールなのでnpm installする必要なし

実行方法

実行方法は簡単。

shell

$ babel-node foo.js

npm scripts

package.jsonにコマンドを追加

{
  "scripts": {
    "test": "babel-node foo.js"
  }
}

shell実行

$ npm run test