React学習 Babel

#Babelとは
JavaScriptのコンパイラであり、トランスパイラです。
ECMA2015(ES6)以降の新しい構文をES5に変換することができます。
ReactのJSXの変換や、typescript等にも利用が可能です。

##インストール

npm install @babel/core @babel/cli @babel/preset-env --save-dev

@babel/coreはbabelの本体です。
@babel/cliはbabelをコマンドラインで操作するために利用します。
@babel/preset-envはBabelが変換処理を行う際に利用するプラグインです。
プリセットに関して、以下のようなものは非推奨であり、基本的にpreset-envを用いれば問題ない。
・babel-preset-es2015
・babel-preset-es2016
・babel-preset-es2017
・babel-preset-latest

##.babelrcやbabel.config.jsでの設定
babelはそのままでは変換してくれないので、設定方法を明記しておく必要がある。
Babel6までの設定ファイルは、.babelrcでしたが、Babel7からはbabel.config.jsが導入された。
.babelrcは設定を反映する際に、フォルダ毎に配置する必要がありましたが、
babel.config.jsはプロジェクトのルートに配置することで、各フォルダに個別の設定を反映させることができます。

.babelrcでプリセットを指定する場合

{
  "presets": ["@babel/preset-env"]
}

babel.config.jsでプリセットを指定する場合

const presets = [
  ["@babel/preset-env"]
]
module.exports = { presets ]

##コンパイルを行う
以下のように、アロー演算子を利用したソースコードを用意しました。

before.js

const x3 = (n) => n * 3

その後、同フォルダで下記コマンドを実行します。

npx babel before.js --out-file after.js

after.jsが作成され、以下のようにES5の構文に変換されます。

after.js

"use strict";

var x3 = function x3(n) {
  return n * 3;
}

#corejs@3とは
先ほど導入した@babel/preset-envでは構文の変換のみを行っており、generatorやPromise等の新しい機能には対応しておりません。
それらの新しい機能を代替コードに変換するためには、新たにcore-js等をインストールし、設定する必要があります。
@babel/polyfillを以前は利用していましたが、Babel7.4.0から非推奨にり、core-jsにまとめられております。

##インストール
今回はcore-jsの他にregenerator-runtimeもインストールします。
async-awaitを動かすためにはregenerator-runtimeが別途必要となります。

npm install core-js regenerator-runtime --save-dev

##設定
オプションuseBuiltInsにusageを使用することで、必要に応じて大体コードに変換します。
オプションcorejsにバージョンを指定します。バージョン2 or バージョン3

.babelrc

{
  "presets": ["@babel/preset-env",{
    "useBuiltIns": "usage",
    "corejs":3
  }]
}

babel.config.js

const presets = [
  ["@babel/preset-env",{
    useBuiltIns: "usage",
    corejs: 3
  }]
]
module.exports = { presets ]