@armit/babel-merge

@armit/babel-merge merges multiple Babel configuration objects into a single copy. Plugin and preset objects and arrays will be merged together.

Note: options to plugins and presets will not be merged, but instead replaced by the last matching item's options. This makes the behavior consistent with how Babel works.

Requirements

• Node.js v18+
• Yarn or npm client

Installation

@armit/babel-merge can be installed via the Yarn or npm clients.

Yarn

❯ yarn add @armit/babel-merge

npm

❯ npm install --save @armit/babel-merge

Usage

• merge(a, b, options)
• merge.all([a, b, ..., z], options)

Where a, b, z are Babel configuration objects and options is a deepmerge options object.

import { babelMerge } from '@armit/babel-merge';

const together = babelMerge(
  {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['latest 1 Chrome'],
          },
        },
      ],
    ],
  },
  {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['latest 1 Firefox'],
          },
        },
      ],
    ],
  }
);

console.log(together);

{
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['latest 1 Firefox'],
        },
      },
    ],
  ];
}

If a pathname was used in an earlier merge, you can still merge by exact name:

import { babelMerge } from '@armit/babel-merge';

const together = babelMerge(
  {
    presets: [
      [
        require.resolve('@babel/preset-env'),
        {
          targets: {
            browsers: ['latest 1 Chrome'],
          },
        },
      ],
    ],
  },
  {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['latest 1 Firefox'],
          },
        },
      ],
    ],
  }
);

console.log(together);

{
  presets: [
    [
      '/Users/me/code/app/node_modules/@babel/preset-env/lib/index.js',
      {
        targets: {
          browsers: ['latest 1 Firefox'],
        },
      },
    ],
  ];
}

Even works for plugins and presets within environments:

import { babelMerge } from '@armit/babel-merge';

const together = babelMerge(
  {
    env: {
      development: {
        presets: [
          [
            require.resolve('@babel/preset-env'),
            {
              targets: {
                browsers: ['latest 1 Chrome'],
              },
            },
          ],
        ],
      },
    },
  },
  {
    env: {
      development: {
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                browsers: ['latest 1 Firefox'],
              },
            },
          ],
        ],
      },
    },
  }
);

console.log(together);

{
  env: {
    development: {
      presets: [
        [
          '/Users/me/code/app/node_modules/@babel/preset-env/lib/index.js',
          {
            targets: {
              browsers: ['latest 1 Firefox'],
            },
          },
        ],
      ];
    }
  }
}

Order is preserved between non-option plugins and presets and ones with options:

import { babelMerge } from '@armit/babel-merge';

const together = babelMerge(
  {
    plugins: ['module:fast-async', '@babel/plugin-syntax-dynamic-import'],
  },
  {
    plugins: [
      '@babel/plugin-proposal-object-rest-spread',
      ['module:fast-async', { spec: true }],
      '@babel/plugin-proposal-class-properties',
    ],
  }
);

console.log(together);

{
  plugins: [
    ['module:fast-async', { spec: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-class-properties',
  ];
}