あひるの勉強部屋

つらつらつら~と不定期にカキコするブログ

rsdoctorのecma-version-checkの指定

webpackのバンドル分析ツールの rsdoctor の設定の備忘録になります。 本備忘録の執筆時点ではRsdoctorのバージョンは 0.1.8 であり、またドキュメント化されていない挙動に関する内容のため、すぐに形式が変わったりして使えなくなるかもしれません。

RsdoctorはByteDance製のバンドル分析ツールでRspackやwebpackのプラグインが提供されています。
まだ触り込みはできていないですが、ローダーごとにファイルあたりに変換にかかった時間が見れたり、タイムラインが確認できたりするようです。 プロジェクトのビルドの現状把握に便利そうです。
詳細は公式のドキュメントを参照してください。

rsdoctor.dev

さて、Rsdoctorには既定でいくつかのlinter設定が含まれており、そのうちの一つに ecma-version-check があります。
これはバンドルファイルのESバージョンが設定されたバージョン以下で記述されているかをチェックするlinterです。

ecma-version-checkのエラー

既定では ES5 に設定されていますが、さすがに ES5 は低いためこれを変更しようとした次第です。

ドキュメントにはまだ設定方法等は書かれていませんでしたが、プラグインのコンストラクタのインターフェースから調べていったところ下記の通り設定できました。

new RsdoctorWebpackPlugin({
    linter: {
        rules: {
            'ecma-version-check': [
                'Warn', {highestVersion: 'ES7+'}
            ],
        },
    },
}),

WarnSeverity に当たり、Ignore, Warn, Error の3種類が設定可能です。

highestVersion については ES5, ES6, ES7+ の3種類が定義されていたため、ES7+ にしておきました。
こちらの内部判定処理としてはバージョン文字列のうちの数字1つを抜き出して利用するような処理になっていたので、単に 7 や定義されていない 8 でも大丈夫そうでした。
ただし、前述の通り数字1つ( match(/\d/) )を抜き出す処理のため、10 とか 2023 の場合はそれぞれ 12 として処理されるため実際に検知されたバージョンが設定値より大きいと判定されるので注意が必要です。
この辺りは割り切ってまずは機構として作った段階なのかなといった気がしています。

ちなみに highestVersion の設定のみを行いましたが、他にも ignore をキーとして配列で ecma-version-check の対象外としたいファイルを列挙することもできそうでした。