Customize Babel configuration

Feature Card

Description

We want to allow users to extend the default babel configuration

User stories

As a Frontity developer
I want to be able to extend the default babel configuration
so that I can use additional features of babel currently not supported by Frontity

Possible solution

We can use https://www.npmjs.com/package/babel-merge in order to merge the default config with the user-provided config.

Thanks @mmczaplinski!

Our idea for this is similar to the way NextJS solves it: use a frontity.config.js file where you can export a function that receives the current babel config object.

Both projects and packages can contain a frontity.config.js file. That means that changes to babel can be done by either the owner of the project or the creator of a package. That is very important because I think most of the time the babel changes will make sense only for the specific need of a package.

The same pattern will be used for webpack.

// frontity.config.js
export babel = ({ config, mode }) => {
  if (mode === "development")
    config.plugins.push("my-additional-babel-plugin");
}

Just for reference, here it is the code for both babel and webpack:

I have opened another FD for the same file, but Webpack configuration instead of Babel: Customize Webpack configuration

Babel and Webpack configuration are generated exactly in the same way, so we should be able to add both features at the same time.

Let’s keep the conversation in the other one.