表題の通りです。babelの設定ファイルといえば .babelrcbabel.config.jsでの記述が一般的だと思います。これを babel.config.tsに記述できるようにします。
1. 必要モジュールのインストール
とりあえず webpack前提で必要最低限なものだけインストールします。
npm i -D webpack webpack-cli typescript ts-node @babel/core @types/babel__core babel-loader @babel/preset-env
ほとんど説明するほどのものではないですが、重要なのは @types/babel__coreです。
ここに設定ファイルで使用する型情報が載っています。
2. TypeScriptの設定
tsconfig.jsonを書きます。
{"ts-node":{"compilerOptions":{"module":"commonjs","target":"es5",},},}ここでは ts-nodeの設定だけ行います。
3. babelの設定
ここからが本題です。 babel.config.tsを書きますが、 設定の読み込み方によって書き方も変わってきます。
だいたい次の2通りに分けられるんじゃないでしょうか。
- プロジェクトルートにある
babelの設定ファイル（.babelrcbabel.config.js）をbabelが自動的に読み込む webpackから実行環境によって手動（設定ファイルのコード上）で呼び出す設定を変える
上記2パターンそれぞれについて説明をしていきます。
3.1. 設定ファイルを自動的に読み込む場合
この場合、 babel.config.tsは次のように書くことができます。
import{TransformOptions,ConfigAPI}from'@babel/core'exportdefaultfunction(api:ConfigAPI):TransformOptions{return{presets:['@babel/preset-env',],}}TransformOptionsと ConfigAPIという見慣れないものが出てきましたが、 TransformOptionsはお馴染みの babelの設定ファイルの内容、 ConfigAPIは babelの設定APIのことです。
これを .tsではなく .jsで書くと次のようになります（ドキュメントにほぼ同じものが載っていますが）。
module.exports=function(api){return{presets:['@babel/preset-env',],};}ここまでくればあとは babel.config.tsを babelに読み込ませるだけですが、 babelは webpackのように .tsの設定ファイルをいい感じに解釈してくれません。
// ...module:{rules:[{test:/\.[jt]sx?$/,loader:'babel-loader',exclude:/node_modules/,options:{configFile:'babel.config.ts'},},// ...このように書いたとしても babelは bable.config.tsをJSONとして読み込もうとするので構文エラーになります。
そこで tscコマンドで .jsファイルにトランスパイルする必要があります。
npx tsc babel.config.ts
これで babel.config.jsが生成されるので設定ファイルを読み込むことができますが、いちいちトランスパイルするのは面倒ですし、 babel.config.tsと babel.config.jsの2ファイルが並ぶのはあまり気持ちのいいものではないですね。
3.2. webpackから実行環境によって設定を変える場合
3.1. の方法だとあまりすっきりできないので、自分はこちらの方法を採用しています。
特に webpack4では webpack-mergeを使って呼び出す設定ファイルを切り替えるのがメジャーらしい（？）のでこちらの方が合っている気がします。
import{TransformOptions}from'@babel/core'// 開発環境用の設定exportconstdev:TransformOptions={presets:['@babel/preset-env',],sourceMaps:true,}// 本番環境用の設定exportconstprod:TransformOptions={presets:['@babel/preset-env',],}import{Configuration}from'webpack'importmergefrom'webpack-merge'importconfigfrom'./webpack.config.common'import{devasdevBabelConfig}from'./babel.config'constdevConfig:Configuration=merge(config,{mode:'development',devtool:'source-map',devServer:{contentBase:path.resolve(__dirname,'dist'),},module:{rules:[{test:/\.[jt]sx?$/,loader:'babel-loader',exclude:/node_modules/,options:devBabelConfig,},// ...}exportdefaultdevConfigimport{Configuration}from'webpack'importmergefrom'webpack-merge'importconfigfrom'./webpack.config.common'import{prodasprodBabelConfig}from'./babel.config'constprodConfig:Configuration=merge(config,{mode:'production',module:{rules:[{test:/\.[jt]sx?$/,loader:'babel-loader',exclude:/node_modules/,options:prodBabelConfig,},// ...}exportdefaultprodConfigおわりに
以上、 babelの設定ファイルを TypeScriptで書いてみました。TypeScriptで記述することでタイポなども減らせていいんじゃないでしょうか。
もっといい方法などあれば教えて頂けるとうれしくなります。