How to find .babelrc?

问题:

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"
  }
}

回答1:

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"]
}

回答2:

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.