for anyone that ends up here in the future, some clarification: when you create your project with CRA, the babel configuration exists as part of the react-scripts setup (react-scripts is the package responsible for all the tooling magic of CRA). this means all babel related controls are nested somewhere inside of your project's node_modules directory. for all intents and purposes, they are not editable, and ejecting is required.
» npm install babel-preset-react-app
for anyone that ends up here in the future, some clarification: when you create your project with CRA, the babel configuration exists as part of the react-scripts setup (react-scripts is the package responsible for all the tooling magic of CRA). this means all babel related controls are nested somewhere inside of your project's node_modules directory. for all intents and purposes, they are not editable, and ejecting is required.
If you have created React app using create-react-app, first you need to eject from the app so that you can use custom configuration. Check this official doc about custom setup : link
Note: this is a one-way operation. Once you eject, you can’t go back!
Once you run "npm run eject" when you are in a react app, you can then use custom babel presets. After ejecting from project, go to package.json and you will find babel presets.
There are two ways to edit your Babel configuration in your react app
1) Edit directly using package.json :
{
"babel": { // nest config under "babel"
"presets": [
"es2015",
],
"plugins": ["transform-class-properties"]
}
}
2) Create new .babelrc file and edit the configuration :
//.babelrc
{
"presets": [
"es2015",
],
"plugins": ["transform-class-properties"]
}
There is, in theory, customize-cra, which lets you do things like override Babel plugins.
Here is a list of things you can do.
It doesn't appear to be maintained at time of writing, and for me didn't seem usable if your project is modules-based (ie import) as opposed to require.
CRA itself recommends forking their scripts as an alternative to ejecting, which is a pretty bold statement.
If you wish to override a property of one of the config files of React, you can just create that config file in your project's main directory and just set that single property, this will override that property in React's configuration. For babel you can just add it as a property in package.json like so:
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
If you run npm run-script eject you are going to get a copy of all the config that ReactJS uses for your project in the main directory of your project/config, from there you can edit whatever you like, keep version tracking of your changes and not mess with the react repository.
If you insist on forking it you can fork the main create-react-app repository from here, which contains the react-scripts here