Babel Preset

Posted on  by admin

Babel can be configured! Many other tools have similar configs: ESLint (.eslintrc), Prettier (.prettierrc).

Install

All Babel API options are allowed. However, if the option requires JavaScript, you may want to use a JavaScript configuration file.

  • You are using a monorepo? You want to compile node_modules?
  • babel.config.json is for you! You have a configuration that only applies to a single part of your project?
  • .babelrc.json is for you!
  • Guy Fieri is your hero?

Installation

We recommend using the babel.config.json format. Babel itself is using it. Create a file called babel.config.json with the following content at the root of your project (where the package.json is).

Check out the babel.config.json documentation to see more configuration options.

Usage

Create a file called .babelrc.json with the following content in your project. Check out the .babelrc documentation to see more configuration options. Alternatively, you can choose to specify your .babelrc.json config from within package.json using the babel key like so:.

You can also write babel.config.json and .babelrc.json files using JavaScript:.

You are allowed to access any Node.js APIs, for example a dynamic configuration based on the process environment:.

Print effective configs

development

You can read more about JavaScript configuration files in the dedicated documentation. Check out the babel-cli documentation to see more configuration options. Check out the babel-core documentation to see more configuration options. You can tell Babel to print effective configs on a given input path.

BABEL_SHOW_CONFIG_FOR accepts both absolute and relative file paths. If it is a relative path, it will be resolved from cwd.

Once Babel processes the input file specified by BABEL_SHOW_CONFIG_FOR, Babel will print effective configs to the console.

  • Here is an example output:. Babel will print effective config sources ordered by ascending priority.
  • Using the example above, the priority is:.
  • In other words, babel.config.json is overwritten by .babelrc, and .babelrc is overwritten by programmatic options.
  • For each config source, Babel prints applicable config items (e.g.
  • overrides and env) in the order of ascending priority.

Generally each config sources has at least one config item -- the root content of configs.

If you have configured overrides or env, Babel will not print them in the root, but will instead output a separate config item titled as .overrides[index], where index is the position of the item.

Stage-X (Experimental Presets)

This helps determine whether the item is effective on the input and which configs it will override.

If your input is ignored by ignore or only, Babel will print that this file is ignored.

Babel's configuration merging is relatively straightforward.

Options will overwrite existing optionswhen they are present and their value is not undefined.

Browserslist Integration

There are, however, a few special cases:.

For assumptions, parserOpts and generatorOpts, objects are merged, rather than replaced. For plugins and presets, they are replaced based on the identity of the plugin/preset object/function itself combined with the name of the entry.

As an example, consider a config with:. When NODE_ENV is test, the sourceType option will be replaced and the assumptions option will be merged.

Using the API (@babel/core)

The effective config is:. As an example, consider a config with:. The overrides item will be merged on top of the top-level options.

Importantly, the pluginsarray as a whole doesn't just replace the top-level one.

The merging logic will see that "./plug"is the same plugin in both cases, and { thing: false, field2: true } will replace the originaloptions, resulting in a config as.