Babel 設定ファイル #2 - ブログ名は今度考える

Babel 設定ファイル

Babelの設定ファイルとは、BabelでどのようにJavaScriptを変換するかを定義したもの。

設定ファイルの作成

Babelの設定ファイルはプロジェクトのルート(package.jsonがある場所)に

babel.config.jsonというファイルを作成するだけで、このファイルが設定ファイルとして扱われる。

設定ファイルの種類や、作成方法はいくつかあるが

Babelがとりあえずオススメしてるのはbabel.config.jsonを作成すること。

(※設定ファイルの拡張子は.json以外にも、.js、.cjs、.mjsが使用可能)

設定ファイルの中身

`babel.config.json`

{
  "presets": [...],
  "plugins": [...]
}

`babel.config.js`

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

設定ファイルには基本的に使用するpresetsやpluginsなどを定義するが

.jsの場合はプログラムが書けるので、設定内容を動的に作る事もできる。

その他の設定については公式ドキュメントを参照

設定ファイルの種類

Babelの設定ファイルは大きく以下の2種類がある

プロジェクト全体設定

babel.config.json
ファイル関連設定
- .babelrc.json
- package.jsonにbabelというキーを指定して定義

プロジェクト全体設定

プロジェクトルートに置かれたbabel.config.jsonはプロジェクト全体の設定として扱われる。

また拡張子を変えてbabel.config.jsonとbabel.config.jsの２つを作成すると

コンパイル時に

Error: Multiple configuration files found. Please remove one:

と怒られる。

プロジェクト全体設定は１つしか設定できないようだ。

ファイル関連設定

ファイル関連設定はプロジェクトの一部にだけ適用する事ができる設定ファイルで

.babelrc.jsonという名前で作成すればよい。

例として

root
 ┣ src
 ┃ ┣ index.js
 ┃ ┗ hoge
 ┃   ┣ hoge.js
 ┃   ┗ .babelrc.json
 ┣ package.json
 ┗ babel.config.json

このような構成だった場合、プロジェクト全体にはbabel.config.jsonで定義した設定が適用されるが

root/src/hogeに含まれるファイルは.babelrc.jsonに定義された設定が追加で適用される。

適用された設定を表示する

ファイルパスを指定して、そのファイルに適用されたBabelの設定を表示する事ができる。

babelでコンパイルを行う前に環境変数BABEL_SHOW_CONFIG_FORに対して

設定を表示したいファイルのパスを設定する。

例えば、src/index.jsに適用された設定を表示する場合

$env:BABEL_SHOW_CONFIG_FOR = "./src/index.js";
npx babel src --out-dir lib

↓結果

Babel configs on "D:\Users\owner\Desktop\work\babel-sample\src\index.js" (ascending priority):
config D:\Users\owner\Desktop\work\babel-sample\babel.config.json
{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry",
        "corejs": "3.6.4"
      }
    ]
  ]
}

programmatic options from @babel/cli
{
  "sourceFileName": "../src/index.js",
  "caller": {
    "name": "@babel/cli"
  },
  "filename": "src\\index.js"
}
Successfully compiled 1 file with Babel (441ms).

次に、./src/hoge.hoge.jsに適用された内容を表示する場合

$env:BABEL_SHOW_CONFIG_FOR = "./src/hoge/hoge.js";
npx babel src --out-dir lib

↓(結果)

Babel configs on "D:\Users\owner\Desktop\work\babel-sample\src\hoge\hoge.js" (ascending priority):
config D:\Users\owner\Desktop\work\babel-sample\babel.config.json
{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry",
        "corejs": "3.6.4"
      }
    ]
  ]
}

config D:\Users\owner\Desktop\work\babel-sample\src\hoge\.babelrc.json
{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry",
        "corejs": "3.6.4"
      }
    ]
  ]
}

programmatic options from @babel/cli
{
  "sourceFileName": "../../src/hoge/hoge.js",
  "caller": {
    "name": "@babel/cli"
  },
  "filename": "src\\hoge\\hoge.js"
}

./src/index.jsにはbabcl.config.jsonの内容しか表示されないが

./src/hoge/hoge.jsには、.babelrc.jsonの内容も表示される。

Babelは複数の設定ファイルがあった場合は、元の項目を上書き(マージ)するらしい。

babel.config.jsonの内容が、.babelrc.jsonによって上書きされる。