プログラミング勉強日記

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ファイルを作成して下記の内容を記述する。

{
"presets": ["env"]
}

3. 実行

　下記コマンドで実行する。　

./node_modules/.bin/babel sample.js

参考文献

最新版で学ぶwebpack 5入門　Babel 7でES2020環境の構築
Babelとは
BabelでモダンなJavaScript開発環境を作る方法を現役エンジニアが解説【初心者向け】