https://zenn.dev/karan_coron/articles/2b433642e93453
今回この記事を書こうと思ったのは、JavaScriptのパーサ関連の記事が定期的に投稿される中で、 ESTreeの話はよく出てきていて反響がありそうだけれど、それを利用したツールは実際にどのようにコードを解析しているかが詳しく書かれている記事が少ないなあと思ったためです。 この記事では、トランスパイラとしてモダンJSの一時代を築いたBabelを例にトランスパイルについて、詳しく解説できたらと思います。
詳しい仕様などは日本語訳がされたハンドブック もありますが、 あいまいな訳になっているため、英語版のハンドブックをわたしはお勧めします。
まず、Babelとは
Babel (pronounced "babble")
と書かれているように読みは、「バブル」と読み、（知らなかった...）
BabelはJavaScriptのための包括的な多目的コンパイラです。Babelを利用すると、あなたは次世代のJavaScriptを体験するだけではなく、次世代JavaScript用ツールを利用（または作成）することが出来ます。
とのことです。
実際のところ今後については、IE11のサポート終了が施行されたこと、EdgeのベースにChromeライクのChromiumが採用されていること、次世代のビルドツールであるGo製のesbuildやRust製のswcなど、Node以外の言語で作成されたより高速なフロントエンドビルドツールが登場してきたことなどによって、次第に日の目を見る機会は少なくなっていくのかなあと個人的に感慨に耽っています。 ※Chrome, Edge, Safari, Firefoxは自動更新がブラウザデフォルトとなっているため基本的には常に最新版のブラウザであるという想定が実質のところ可能となっています。
ただやはり、JavaScriptの過渡期において偉大な実績を残しているBabelの根幹である言語処理を学ぶことの意義は計り知れないです。
まず、コードがトランスパイルされるまでの過程を示した図を下記に記します。