Babel 7.5について調べたこと
あまり勉強ができなかった。前回の続き。
JavaScriptでclass
構文など新しい文法を使いたいが古いブラウザ(例えばIEなど)に対応する必要がある場合、ソースコードを変換する仕組みを導入することで対応できるみたい。その変換を「トランスパイル」といい、トランスパイルするツールの一つがBabel。
ココらへんは「JavaScriptコードレシピ集」のサポートページに書かれているので、合わせて読むとよいかと。
- 作者: 池田泰延,鹿野壮
- 出版社/メーカー: 技術評論社
- 発売日: 2019/01/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
で、サポートページを読んでいくと出てきた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"] }