More than 5 years have passed since last update.

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

Last updated at 2018-02-26Posted at 2018-02-21

対象

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

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

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

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

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

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

> 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 を作成します。

.babelrc

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

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

>.\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

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

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