Menu
I was learning Babel and wanted to learn how to configure Babel. I found two ways to configure Babel: by creating babel.config.js and .babelrc file. Under what circumstances should we prefer one config file over the other?
202
Babel is a free and open-source JavaScript transpiler (kind of like a JavaScript compiler). It converts JavaScript code to a different JavaScript code based on how you configure it. The most famous use of Babel is converting modern JavaScript es6+ into es5, which is widely supported (even in Internet Explorer).
Next. js includes the next/babel preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible. To start, you only need to define a .
The . babelrc file is your local configuration for your code in your project. Generally you would put it in the root of your application repo. It will affect all files that Babel processes that are in the same directory or in sibling directories of the . babelrc .
For project-wide configuration, Babel will automatically search for a babel. config. json file, or an equivalent one using the supported extensions, in this root directory. Alternatively, users can use an explicit "configFile" value to override the default config file search behavior.
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
57
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
