blog.mahoroi.com

babel.config.jsのConfig Function API

-

Babel 7.x から設定ファイルに babel.config.js が利用可能になりました。babel.config.js を用いると Config Function API を利用することができ、この API を用いることで Babel の設定を柔軟に変更することが可能になります。

Config Function API

babel.config.js からエクスポートされる関数は引数に config API をとります。

babel.config.js
module.exports = (api) => {
  return {};
}

api.version

使用する Babel のバージョンが取得できます。

api.cache

config のキャッシュ設定ができます。

babel.config.js
module.exports = (api) => {
  api.cache(true);
  // api.cache(false);
  // ...
  return {};
}

api.env(...)

環境変数の確認ができます。

babel.config.js
module.exports = (api) => {
  const isProd = api.env("production"); // true or false
  const notPros = api.env(["development", "test"]);
  return {};
}

api.caller(cb)

Babel の呼び出しもとのデータにアクセスすることができます。

たとえば、caller.name の値より、Babel が @babel/register から呼ばれていることが確認できます。

babel.config.js
const isBabelRegister = (caller) => {
  return !!(caller && caller.name === "@babel/register");
}

module.exports = (api) => {
  const isRegister = api.caller(isBabelRegister);
  return {};
}

api.assertVersion(range)

Babel のバージョンについて assert を行うことができます。

babel.config.js
module.exports = (api) => {
  api.assertVersion("^7.2");
  return {};
};

APIを使ってみる

Config Function API を使って、サーバーとクライアントで Babel の設定を変更してみます。

想定される環境

サーバー側のコードは @babel/cli、クライアント側のコードは webpack + babel-loader を使って JavaScript をトランスパイルしている環境について考えます。

ベースとなる babel.config.js は次のようになります。この状態では両サイドともに同じ Babel の設定が適用されます。

babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
    ],
  ],
};

babel.config.js を次のように変更すると、Babel の設定を変更することができます。ここでは、クライアント(webpack + babel-loader)の環境では { browsers: 'last 2 versions' } が適応され、サーバー(Node.js)の環境では { node: 'current' } が適用されるようになっています。

babel.config.js
const isBabelLoader = caller => caller && caller.name === 'babel-loader';

module.exports = api => {
  const isWebpack = api.caller(isBabelLoader);
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: isWebpack
            ? { browsers: 'last 2 versions' }
            : { node: 'current' },
        },
      ],
    ],
  };
};

おしまい。

参考