Babel is used to compile ECMA Script of the Frontend Workspace into a form that can be understood by all browsers a theme should support (see Section 4.11, “Browser Support”).

If you need to customize our default babel configuration you can to this the same way as Section 5.9, “Customizing the Webpack Configuration of a Theme” but in this case you need to add a file named babel.config.js to the theme's root folder.

const { babelConfig } = require("@coremedia/theme-utils");

module.exports = api => {
  const config = babelConfig(api);

  // ...

  return config;
};

The imported method babelConfig will generate our default configuration provided by the package @coremedia/theme-utils. You can simply extend this configuration by modifying the JavaScript Object that is returned by the function.

You can find more information about the configuration by checking the Babel Documentation.