プログラミング勉強日記
2021年1月8日
TwitterでBabelの存在を知ったので、Babelとはいったい何なのか気になり調べてみた。
Babelとは
Babel(読み方：「バベル」)は、次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツールである。次の世代の標準機能を使って書かれたコードを、それらの機能をサポートしないブラウザでも動くコードに変換する。
簡単に言うと、JavaScriptのコードを新しい書き方から古い書き方に変換するツールである。具体的には、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。
環境構築
Babelの公式サイトで変換の確認ができる。
1. インストール
package.jsonがある場所で以下のコマンドを実行する。babel-cliはbabelをcliで実行するための本体モジュールで、babel-preset-envはES6の内容をES5に変換する情報のようなもの。
npm install —save–dev babel–cli
npm install –save-dev babel-preset-env
2. .babelrcファイルの作成
babel-preset-envを使用するための設定として、.babelrcファイルを作成して下記の内容を記述する。
.babelrc
{
"presets": ["env"]
}
3. 実行
下記コマンドで実行する。
./node_modules/.bin/babel sample.js
参考文献
最新版で学ぶwebpack 5入門 Babel 7でES2020環境の構築
Babelとは
BabelでモダンなJavaScript開発環境を作る方法を現役エンジニアが解説【初心者向け】