babelの構成ファイル

構成ファイルの種類

• プロジェクト全体の構成 : babel.config.json
• ファイル相対構成 : .babelrc.json, babelキーを持つpackage.json

babel.config.json

プロジェクト全体の構成を定義する。
この構成の主な欠点は、作業ディレクトリに依存しているため、作業ディレクトリがmonorepoルートでない場合、monoreposで使用するのがより困難になる可能性があることです。

.babelrc.json

個別のモジュールに対して設定を定義できる。

• package.jsonを含むディレクトリが見つかると検索が停止するため、相対構成は単一のパッケージ内にのみ適用されます。
• コンパイルされる「ファイル名」は「babelrcRoots」パッケージ内にある必要があります。そうでない場合、検索は完全にスキップされます。

サポートされている拡張子

• .json
• .js
• .cjs
• .mjs

が babel.config.XXX .babelrc.XXX のどちらに対してもサポートされています。
もしビルド時に計算が必要となる複雑な構成があるときはjsを、そうでないときはjsonを使う。
jsonを使うことによってキャッシュなどができるようになりビルド時間の短縮に繋がります。

１つのレポジトリで複数のモジュールを開発しているケース

まず開発レポジトリ全体の基本となる設計(babel.config.json)をルートディレクトリに作成します。
次に各モジュールで.babelrc.jsonを用いて上書きしていくのが基本となります。

よくある問題の１つとして基本的にはbabel.config.jsonを使って一部のモジュールで.babelrc.jsonを使うときに、あるモジュールディレクトリでbabelを使用したときにbabelは実行ディレクトリをルートとして動作するので設定ファイルが読み込めないという問題が生じてしまう。

これを解決するためにはrootModeをupwardに設定する。
設定方法はcli、設定ファイル、webpackを使うかによっても変わるので調べる必要がある。

　補足1 モノレポ

モノレポスタイル開発は次のようなソフトウェア開発手法です。:

• 複数のプロジェクトが、同一リポジトリ内にある
• プロジェクトは相互依存可能で、コードも共有できる
• 変更を行う場合、モノレポでは全てのプロジェクトで再ビルドや再テストをしない。その代わり、変更の影響を受ける可能性のあるプロジェクトだけを再ビルドと再テストする

最後の点は、次の2つの理由で重要です：

• CIが高速になる。大規模な場合は1000倍早くなる
• チームがモノレポ内でも独立して活動できる。もし2つのプロジェクトAとBが相互依存でない場合、どんなときも相互に影響を及ぼすことはありません。チームAが彼ら自身のプロジェクトを開発し、テストし、ビルドし、プルリクをmasterにマージする際、チームBによって書かれたコードが動くことはないです。チームBにイマイチなテスト、ダサいコード、壊れたコード、壊れたテストがあったとしても、チームAは、まったく気にしなくていいです。

参考文献