Babel
参考：
babel/babel: Babel is a compiler for writing next generation JavaScript – GitHub
概要
参考：
Babel によるトランスパイルの挙動について理解する – Qiita
What is Babel? | Babel [Official]
導入
参考：
Babel で始める！モダン JavaScript 開発 | HTML5Experts.jp
使い方
参考：
Babel7 で JavaScript をトランスパイルしてみた。| IT 二刀流
Babel CLI (@babel/cli、旧 babel-cli)
参考：
babel/packages/babel-cli at master · babel/babel – GitHub
Babel を使って現代的 JavaScript を始める。| Ginpen.com
Babel CLI (babel コマンド) の使い方 | maesblog
babel のコマンドライン実行 es6 to es5 – Qiita
はじめての Babel (babel-cli 使用) | Syntax Error.
babel で ES6 を導入する最短手順 | ブロックチェーンエンジニアとして生きる
babel-node (@babel/node)
参考：
@babel/node | Babel [Official]
世界一シンプルなサーバサイド node で ES6 の始め方 – Qiita
babel で ES6 を導入する最短手順 | ブロックチェーンエンジニアとして生きる
babel を使って ECMAScript 2015 (ES6) へ対応する | ブロックチェーンエンジニアのブログ (daiki-sekiguchi.com)
babel7 で @babel/node (旧 babel-node) を使う | mottox2 blog
nodejs で ES6 を使うときの babel メモ – Qiita
Node.js + Babel で ECMAScript6 を使ってみる | たけぞう瀕死ブログ
The minimal Node.js with Babel Setup | RWieruch
Using babel 7 with node | HackerNoon.com
import doesn’t work in babel-node interactively · Issue #1264 · babel/babel – GitHub
babel-node ES6 imports fail in REPL · Issue #1488 · babel/babel – GitHub
Modules aren’t supported in the REPL – Stack Overflow
設定ファイル
.babelrcbabel.config.js.babelrc.js
参考：
Babel の設定を見直すための逆引きガイド | mille-feuille code
Configure Babel | Babel [Official]
Config Files | Babel [Official]
Using .babelrc.js today | FatFisz’s homepage
Are you open to allowing .babelrc.js? · Issue #4630 · babel/babel – GitHub
Webpack で使う
参考：
webpack + Babel 入門 | ぺーぺー SE のブログ
webpack.config.babel.js
参考：
Babel7 で webpack.config.babel.js を使う – Qiita
Babel 7 not being executed on webpack.config.babel.js · Issue #5960 · webpack/webpack – GitHub
@babel/register (旧 babel-register)
参考：
@babel/register | Babel [Official]
babel/packages/babel-register at master · babel/babel – GitHub
Node.js アプリで Babel の ES2015 を利用する (babel-register) – Qiita
ES2015 で書かれた Node.js をデーモン化する | 30歳からのプログラミング
‘babel-core/register’ vs ‘babel-register’ – Stack Overflow
Babel7 で webpack.config.babel.js を使う – Qiita
@babel/plugin-transform-runtime (旧 babel-runtime)
ランタイムを使った ES6 のトランスパイルを行う。トランスパイル時に @babel/plugin-transform-runtime を使い、実行時に @babel/runtime を使う。
参考：
@babel/plugin-transform-runtime | Babel [Official]
@babel/plugin-transform-runtime – npm
webpack で babel-runtime を使おうとしてハマったメモ – Qiita
babel-polyfill と babel-runtime の使い分けに迷ったので調べた – Qiita
webpack で babel 際は node_modules を exclude し忘れるべからず – Qiita
@babel/polyfill (旧 babel-polyfill)
*** DEPRECATED ***
Babel 7.4 で廃止となった。core-js を直接使う。
$ yarn remove @babel/polyfill $ yarn add core-js@3
参考：
@babel/polyfill | Babel [Official]
babel/packages/babel-polyfill at master · babel/babel – GitHub
ブラウザ向けに Polyfill ライブラリを有効化する | deadwood
Babel の設定を見直すための逆引きガイド | mille-feuille code
babel-preset-env と babel-polyfill と babel-plugin-transform-runtime | 欅樹雑記
babel-polyfill によって使用可能になる処理一覧 – Qiita
How do I install the babel-polyfill library? – Stack Overflow
babel-preset-env + babel-polyfill documentation is misleading · Issue #1660 · babel/website – GitHub
Best way to include babel-polyfill? – ShakaCode Forum
What is the best way to include babel polyfill using multiple entry points – Stack Overflow
core-js
ECMAScript のプロポーザルを含めたポリフィルを提供するライブラリ
- core-js：グローバルを書き換えるポリフィル
- core-js-pure：グローバルを書き換えないポリフィル
- core-js-bundle：core-js を bundle したもの
参考：
zloirock/core-js: Standard Library – GitHub
Babel 7.4 で非推奨になった babel/polyfill の代替手段と設定方法 | mille-feuille code
babel-polyfill / babel-runtime の代わりに core-js を直接使うのはアリかナシか – Qiita
Babel 7.4.0 と core-js 3.0.0 リリース、Chrome 74 beta | JSer.info
core-js-compat
ブラウザなどの環境の指定から必要なポリフィルをリストアップするための互換性データを提供するライブラリ。
参考：
core-js/packages/core-js-compat at master · zloirock/core-js – GitHub
core-js-builder
ブラウザなどの環境及び除外するポリフィルのリストを指定してカスタマイズしたポリフィルを構築するためのライブラリ。
参考：
core-js/packages/core-js-builder at master · zloirock/core-js – GitHub
ES6
参考：
ECMAScript 6 compatibility table | kangax
@babel/preset-env (旧 babel-preset-env)
参考：
babel/packages/babel-preset-env at master · babel/babel – GitHub
babel-preset-env | Babel [Official]
babel-preset-env を簡単にさわってみた。- Qiita
babel-preset-env で環境に合わせて JavaScript をトランスパイルする | キーポイント株式会社 開発日誌
babel-preset-env@2.0 を試した トランスパイル環境をスケールさせていく | mediba Creator × Engineer Blog
babel-preset-env を試す | アカベコマイリ
Babel & preset-env | codeburst
useBuiltIns
entry モード
エントリーファイル毎に一度だけポリフィルを含める。(二度以上インポートすると例外が発生するので注意。) 環境の指定に応じて必要なモジュールが同定されて、個別のモジュールのインポートに置き換えられる。
useBuiltIns: 'entry'
usage モード
各モジュール内で必要に応じて個別のモジュールが自動的にインポートされる。バンドラーの機能によってモジュールの重複は取り除かれる。
useBuiltIns: 'usage'
ポリフィルを自動処理しない
ポリフィルは自動的に追加されず、entry 指定時のように個別のモジュールにも展開されない。(デフォルト)
useBuiltIns: false
参考：
Babel7.x 時代の polyfill の設定方法と useBuiltIns の仕組み | mille-feuille code
babel-preset-env 2.0 の useBuiltIns を使って polyfill する – Qiita
useBuiltIns – @babel/preset-env | Babel [Official]
corejs
corejs：使用する core-js のバージョンを指定する
corejs: 2corejs: 3corejs: { version: 2, proposals: true }corejs: { version: 3, proposals: true }
現時点では core-js のバージョンとして 2 もしくは 3 が指定できる。proposal は ECMAScript のプロポーザルに相当するポリフィルを使用するかどうかを指定する。
package.json に core-js@3 を追加する。
$ yarn add core-js@3
core-js@3 のポリフィルを使用し、プロポーザルのポリフィルを含める。
corejs: { version: 3, proposals: true }
参考：
corejs – @babel/preset-env | Babel [Official]
browsers
参考：
last 2 versions – @jamiebuilds
modules
参考：
babel-preset-env の使い方 (babel-preset-es2015 からの移行) | dackdive’s blog
.babelrc {module: false} and older browsers · Issue #649 · vuejs-templates/webpack – GitHub
forceAllTransforms
参考：
forceAllTransforms – @babel/preset-env | Babel [Official]
uglify-es
参考：
mishoo/UglifyJS2 at harmony – GitHub
uglify-es での「ES6 対応」の意味 – Qiita
babel-preset-es2015 [DEPRECATED]
参考：
babel-preset-env の使い方 (babel-preset-es2015 からの移行) | dackdive’s blog
Webpack + Babel: Couldn’t find preset “es2015” relative to directory – Stack Overflow
Babel 7
プラグインなどの関連パッケージ名が babel-* から @babel/* に変更された。
プリセットは @babel/preset-env を使う。
参考：
ES6 からのトランスパイルするときの Babel 7 対応 | ポン酢まいるど開発記
babel7 での stage-x の定義を知る – Qiita
次のリリースである Babel7 の主な変更点まとめ | 技術探し
babelrcRoots
参考：
babelrcRoots – Options | Babel [Official]
babelrc
参考：
babelrc – Options | Babel [Official]
互換性
参考：
babel-plugin-source-map-support
参考：
babel-plugin-source-map-support – npm
@babel/plugin-syntax-dynamic-import
参考：
@babel/plugin-syntax-dynamic-import | Babel [Official]
@babel/plugin-syntax-dynamic-import – npm
babel/packages/babel-plugin-syntax-dynamic-import at master · babel/babel – GitHub
Webpack で Dynamic import を行ってみる – Qiita
@babel/plugin-syntax-export-default-from
参考：
@babel/plugin-syntax-export-default-from – npm
‘export default from’ can not be correctly compiled · Issue #7293 · babel/babel – GitHub
@babel/plugin-proposal-object-rest-spread
参考：
@babel/plugin-proposal-object-rest-spread | Babel [Official]
Unexpected token … ( spread operator ) · Issue #9675 · babel/babel – GitHub
unexpected token (rest spread operator) · Issue #170 · babel/babel-loader – GitHub
@babel/plugin-transform-spread
参考：
@babel/plugin-transform-spread | Babel [Official]
polyfill のエラー
参考：
IE11 で babel-polyfill が入ってなくて画面が真っ白になる | なんか書いていこうぜー.com
‘Symbol’ is undefined in IE after using babel – Stack Overflow