miyohideの日記

技術的なメモなどを記しています

2019年7月18日(木)

Babel 7.5について調べたこと

あまり勉強ができなかった。前回の続き。

JavaScriptclass構文など新しい文法を使いたいが古いブラウザ(例えばIEなど)に対応する必要がある場合、ソースコードを変換する仕組みを導入することで対応できるみたい。その変換を「トランスパイル」といい、トランスパイルするツールの一つがBabel

ココらへんは「JavaScriptコードレシピ集」のサポートページに書かれているので、合わせて読むとよいかと。

JavaScript コードレシピ集

JavaScript コードレシピ集

で、サポートページを読んでいくと出てきたpolyfillというもの。Babelは文法の変換のみで、機能(新しく定義されたメソッドやオブジェクト)の変換までには対応していない。それを埋めるのがpolyfill。

更に調べていくと、polyfillもターゲットブラウザによって必要な場合は何もせずにネイティブな実装を使い、必要な場合のみ変換することができるとのこと。それを実現するのが@babel/preset-env

というわけで、Babelインストール時は

npm install --save-dev @babel/core @babel/cli @babel/preset-env

という感じで@babel/preset-envもインストールしておくと良さそう。

その後、設定ファイルである.babelrcにて@babel/preset-envを使うことを宣言。

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