Configure Babel

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

    • You are using a monorepo?
    • You want to compile node_modules?
    • You have a configuration that only applies to a single part of your project?
    • Guy Fieri is your hero?

    Create a file called babel.config.json with the following content at the root of your project (where the package.json is).

    1. module.exports = function (api) {
    2.   api.cache(true);
    4.   const presets = [ ... ];
    5.   const plugins = [ ... ];
    7.   return {
    8.     presets,
    9.     plugins
    10.   };
    11. }

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

    1. {
    2.   "presets": [...],
    3.   "plugins": [...]
    4. }

    Check out the 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:

    1. {
    2.   "name": "my-package",
    3.   "babel": {
    4.     "presets": [ ... ],
    6.   }
    7. }

    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:

    1. const presets = [ ... ];
    2. const plugins = [ ... ];
    4. if (process.env["ENV"] === "prod") {
    5.   plugins.push(...);
    6. }
    8. module.exports = { presets, plugins };

    You can read more about JavaScript configuration files in the 

    1. babel --plugins @babel/plugin-transform-arrow-functions script.js

    Check out the babel-cli documentation to see more configuration options.

    1. require("@babel/core").transform("code", {
    2.   plugins: ["@babel/plugin-transform-arrow-functions"]
    3. });

    You can tell Babel to print effective configs on a given input path

    1. $env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

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

    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:

    1. Babel configs on "/path/to/cwd/src/index.js" (ascending priority):
    2. config /path/to/cwd/babel.config.json
    3. {
    4.   "sourceType": "script",
    5.   "plugins": [
    6.     "@foo/babel-plugin-1
    7.   ],
    8.   "extends": "./my-extended.js"
    9. }
    11. config /path/to/cwd/babel.config.json .env["test"]
    12. {
    13.     [
    14.       "@foo/babel-plugin-3",
    15.       {
    16.         "noDocumentAll": true
    17.       },
    19.   ]
    20. }
    22. config /path/to/cwd/babel.config.json .overrides[0]
    23. {
    24.   "test": "src/index.js",
    25.   "sourceMaps": true
    26. }
    28. config /path/to/cwd/.babelrc
    29. {}
    31. programmatic options from @babel/cli
    32. {
    33.   "sourceFileName": "./src/index.js",
    34.   "presets": [
    35.     "@babel/preset-env"
    36.   ],
    37.   "configFile": "./my-config.js",
    38.   "caller": {
    39.     "name": "@babel/cli"
    40.   },
    41.   "filename": "./src/index.js"
    42. }

    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 ) 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. This helps determine whether the item is effective on the input and which configs it will override.

      For each config items mentioned above, Babel applies Object.assign on options except for plugins and presets, which is concatenated by Array#concat. For example