@armit/babel-merge

@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",
  ];
}