Babel コマンドライン変換環境構築

対象

Windows環境です。
Babelのみで変換したい人対象。
Babelコマンドで変換します。
WebPackとかgulpとかなし。

ファイル構成

どこかのディレクトリに次のファイルを配置します。

  index.html
  index.js
  output.js(あとから生成される)

index.jsには、最新仕様のJavaScriptを記載しておいてください。
index.js を babelのコマンドでoutput.js に変換します。

index.html は output.js をscriptタグでリンクしてください。

babel インストール

決めたディレクトリのコマンドラインで次のコマンドを入れます。

> npm install --save-dev babel-cli
> npm install --save-dev babel-preset-env

>.\node_modules\.bin\babel -V
6.26.0 (babel-core 6.26.0)

これでインストールとバージョン確認ができました。

そのディレクトリに .babelrc を作成します。

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 64
      }
    }]
  ]
}

これは、BabelでのJSの変換の対象を定義するものです。いろいろな指定ができるようですが、厳密にどのように定義できるのかの一覧などが手に入らなかったので、見やすい定義一覧などあればだれか教えてください。

babel 実行

>.\node_modules\.bin\babel index.js -o output.js

エラー出力なく終了すれば、output.js が作成されます。

参考

僕がnpm installに-gをつけないわけ - Qiita
https://qiita.com/Mic-U/items/cd456d6bea72937464f8

babel をグローバルでインストールしてたのですが、いろいろトラブったのでカレントインストールに変えました。このページの内容が身にしみた。

babel-preset-env を試す – アカベコマイリ
http://akabeko.me/blog/2017/03/babel-preset-env/

babel-preset-envを簡単にさわってみた。 - Qiita
https://qiita.com/ryuone/items/13f5d450c3865709ba10

イマドキのJavaScriptの書き方2018 - Qiita
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9

preset-es2015 が古いものだと理解するまで、かなり回り道をしてしまいました。このページの内容はとても大切。

babel-preset-envの使い方（babel-preset-es2015からの移行） - dackdive's blog
http://dackdive.hateblo.jp/entry/2018/01/18/100000