I want to create React app with Ant Design
In the docs, it says I need to change .babelrc to modularly load the files, also from https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f..
But, I can't find any.. I'm very new to Webpack/Babel/other things...
I used create-react-app to make React app
Please help..
This is my package.json:
{
"name": "ant",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.0.3",
"jquery": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-plugin-import": "^1.6.3",
"css-loader": "^0.28.7",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"less-vars-to-js": "^1.2.1",
"style-loader": "^0.19.1"
}
}
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"]
}
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