在React App中设置Babel生成的EcmaScript版本

Question

I'm using the latest ES8 features in my react code, for example, async and await. Because of misconfiguration problem in my webpack config, I cannot use source maps, and this slows down debugging.

A quick solution could be to locally compile source code into ES7 or ES8, and test in the latest Chrome. How can I set this in .babelrc ? Here's my current .babelrc:

{
  "presets": [
     "react-app"
  ] 
}

Answer 1

Answered here ,

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "chrome": 67
      }
    }]
  ]
}

As of Jul 2018, the above setting would not support spread operator in objects . To enable it,

npm install --save-dev babel-plugin-transform-object-rest-spread

Use the following configuration in .babelrc :

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "chrome": 67
      }
    }]
  ],
  "plugins": ["transform-object-rest-spread"]
}