When to use babel.config.js and .babelrc
There seems to be some difference between the two configurations,
Looking at this question :
Jest transformIgnorePatterns not working
Sometimes, certain features only work with a certain file, this is extremely vague and certainly not documented. (I can confirm the above mentioned problem exists, and renaming the config file solves it)
Also, some other times babel configuration files are downright ignored, as in the case of webpack and babel-loader. You'd expect babel to load the .babelrc file found in the root of the project, but it turns out it will ignore it and run the options provided within Webpack.
So the answer unfortunately is a bit vague, and the lack of documentation on how these features work does not improve the situation.
From the docs https://babeljs.io/docs/en/config-files#project-wide-configuration
Babel has two parallel config file formats which can be used together, or independently.
Project-wide configuration
babel.config.json files, with the different extensions
File-relative configuration
.babelrc.json files, with the different extensions
package.json files with a "babel" key
Babel loads .babelrc.json files, or an equivalent one using the supported extensions, by searching up the directory structure starting from the "filename" being compiled
Given that information
.babelrc would be useful if you want to run certain transformations / plugins on a subset of files /directories. Maybe you have 3rd party libraries that you don't want to be transformed/changed by babel.
babel.config.json is useful if you have multiple packages (ie multiple package.json) directories in your project that utilize a single babel config. This is less common.
If your question is about file extensions (ie .js
vs .json
) with respect to babel configurations
Using .js
exposes a babel config api.
https://babeljs.io/docs/en/config-files#config-function-api
Keep in mind this increases complexity with regards to caching, most of the time it's best to use .json
static configurations