Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"
  }
}
like image 374
Terry Djony Avatar asked Dec 25 '17 06:12

Terry Djony


2 Answers

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.

like image 98
sheminusminus Avatar answered Oct 14 '22 01:10

sheminusminus


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"]
}
like image 24
coderakki Avatar answered Oct 14 '22 00:10

coderakki