Babelとは？
JavaScriptを古いコードから新しいコードへ変換するツール(ES6→ES5）、またReactのJSXをブラウザで実行できるコードに変換する役割もあります。
導入方法
基本的にはwebpackと同時に導入が必要でしょう。まずは以下2つをインストールします。
- babel-core
- babel-loader
babel-core
Babelのコアです。
babel-loader
これがあればwebpackでモジュールバンドルする前にbabel変換を実行してくれます。
次に、以下もインストールします。
- plugin
- presets
plugin
babelのプラグインです。
presets(プリセット)
Babelが変換処理を行う際に利用するプラグインのコレクションです。設定情報を基に、コンパイルに必要なプラグインのリストをBabel本体に渡す役割をしているようです。
Babel REPLが便利
下記のページにいくとBabelで実際に実行されるコードに変換させることが可能です。
https://bvaughn.github.io/babel-repl/
例えば、下記のようなJSXのコードを入力すると
|
1 2 3 |
<div> "Hello world" </div> |
下記のようにブラウザで実行されるコードに自動変換してくれます。
|
1 2 3 4 5 6 7 |
"use strict"; React.createElement( "div", null, "\"Hello world\"" ); |
presets(プリセット）とは？
Babelが変換処理を行う際に利用するプラグインのコレクションです。設定情報を基に、コンパイルに必要なプラグインのリストをBabel本体に渡す役割をしているようです。
presets(プリセット）の種類
next/babel
Next.js用のプリセット、preset-envやpreset-reactなどのプラグインの集合体。Next.jsでjestを動かしたい場合に利用されます。
@babel/preset-typescript
BabelによってTypeScriptで書いたコードをJavaScriptに変換できるプリセットです。
@babel/preset-env
BabelによってECMAScriptのバージョンを指定することができるプリセットです。基本的にはサポートしたいブラウザの範囲等を指定したりします。指定した内容に応じて適切なバージョンのJavaScriptに変換してくれます。特に何も指定しない場合はES5に一律変換してくれます。
@babel/preset-react
babel-preset-power-assert
プラグインとは？
babelのプラグインです。
この記事へのコメントはありません。