5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptAdvent Calendar 2022

Day 22

Babelの変換、多すぎ…?→bugfixes: trueで解決できるかも

Last updated at Posted at 2022-12-21

必要以上にBabelの変換が入ると思ったら、Babelの裏機能とそれを制御する新機能を知ってしまいました。

起きていた状況

ブラウザJavaScriptをBabelで変換していたのですが、.browseslistrcでIE11を除外した最新設定にしているのも関わらず、Optional Chaining(?.)や、デフォルト引数、引数内でのスプレッドといったものが変換されてしまう状態が続いていました。

@babel/preset-envexcludeを明示すると止まるので、@babel/preset-envが挿入しているとわかったところでさらに調査を進めていました。

裏機能…ブラウザごとのバグの吸収

今回調べてみるまで知らなかったのですが、@babel/preset-envによる変換は、ブラウザネイティブでサポートしないもの…だけではなく、ブラウザごとのバグ回避も含んで処理を行っていました。

ところが、@babel/preset-envが処理を選択できるのは、@babel/plugin-transform-function-parametersといったプラグイン単位であるため、ごくわずかなパターンでバグが起きる場合にもプラグインを全部入れる、ということとなってしまい、バグを踏まないコードまで変換されて冗長となる事態となっていました。

新機能…bugfixes

このような状態を解決するため、「不具合の出るところだけ変換する」ための@babel/preset-modulesというパッケージが作られ、Babel 7.9になって@babel/preset-envへ組み込まれ、bugfixes: trueという設定を行うことで利用可能となっています。

実際に設定をかけてみたところ、?.の変換で余計なvarが現れたり、引数の変換でargumentsfunctionになってしまったり、と言った箇所がきれいに解消しました。

参考

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?