Babelまとめ - KEITA LOG

Babelについてまとめました。

理解すべき要点は以下です。

Babelとは

Babelとは、JavaScriptのES2015のような新しい記法をES5のような古い記法に変換するためのツール。

JavaScriptは毎年新しい仕様を追加しているが、新しい仕様がブラウザに対応しているとは限らない。

そこでBabelを使って新しい記法を古い記法に変換することで、新しい記法でも古いブラウザで動作させることができる。

このコードの変換をトランスパイルという。

Babelはnpmでパッケージをインストールして使う。

Babelを使うには以下のパッケージが必要。

npm i -D @babel/core @babel/cli @babel/preset-env

Babelは開発環境で使うものなので-Dオプションをつけてパッケージをインストールする。

Babelの設定はプロジェクトのルートに.babelrcまたはbabel.config.jsonを作成して行う。これらのファイルにはBabelがどのようにコードを変換するかを設定する。

.babelrcは主に特定のディレクトリのみの設定を記述する。

.babel.config.jsonは主にプロジェクト全体の設定を記述する。

JavaScriptのES6の記法をES5に変換するには.babelrcを以下のようにJSON形式で記述する。

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

presetsはBabelの複数のプラグインをまとめたものであり、どのように変換するかに合わせてパッケージをインストールして.babelrcに記述する。

presetsは配列の形で記述し、後に書いたものから先に読み込まれる。

Reactを使う時は、@babel/preset-reactをインストールして、追加で設定を行う必要がある。

npm i -D @babel/preset-react

.babelrcを以下のように記述する。

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

ただしcreate-react-appやViteなどのReactの環境構築を行うツールを使うと自動的に設定される。

実際にBabelでトランスパイルを行うには以下のコマンドを実行する。

npx babel src --out-dir dist

このコマンドではsrcディレクトリのファイルをトランスパイルしてdistディレクトリに出力する。

--out-dirはトランスパイル後のディレクトリを指定する。