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

Posted 2023-03-07

【中文标题】在 React 应用中设置 Babel 生成的 EcmaScript 版本

【英文标题】：Set version of EcmaScript generated by Babel, in react app

【发布时间】：2018-12-21 22:27:16

【问题描述】：

我在我的反应代码中使用了最新的 ES8 功能，例如异步和等待。由于我的 webpack 配置中的错误配置问题，我无法使用源映射，这会减慢调试速度。

一种快速的解决方案是在本地将源代码编译成 ES7 或 ES8，并在最新的 Chrome 中进行测试。如何在.babelrc 中设置它？这是我当前的 .babelrc：

  "presets": [
     "react-app"
  ] 

【问题讨论】：

您应该使用存在的环境并设置目标。 npmjs.com/package/babel-preset-env

您可以将目标设置为特定版本的 Chrome。目标将类似于 Chrome >= 58。预设环境使用浏览器列表。 github.com/browserslist/browserslist#full-list

@SimeonSmith 当我将 .babelrc 设置为 "presets": [ ["env", "targets": "chrome": 67 ] ] 时，Babel 无法识别 jsx。所以这还不够

不要删除 react-app 预设。 "presets": [ "react-app", ["env", "targets": "chrome": 67 ] ]

【参考方案1】：

回复here，

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

截至 2018 年 7 月，上述设置将不支持 spread operator in objects。要启用它，

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

在.babelrc中使用如下配置：

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