我应该使用哪些 Babel 预设？ [复制]

Question

我在使用 Webpack（使用 create-react-app 创建）构建的 React 项目的根目录中有以下 .babelrc。

{
  "presets": ["react-app", "env"],
  "plugins": [
    [
      "react-intl",
      {
        "messagesDir": "./public/messages/"
      }
    ]
  ]
}

当我运行构建时，我收到以下错误

Syntax error: Missing class properties transform.

  1 | export default class ValidationUtils {
> 2 |   static isPhoneNumber = 'whatever'
    |   ^
  3 | }

如果我从预设列表中删除 "env"，我将不再收到此错误，而是收到一个错误，抱怨在作为构建的一部分运行的脚本中使用了 ES6 import

/apps/my-app/scripts/mergeMessages.js:3
import * as fs from "fs";
^^^^^^

SyntaxError: Unexpected token import

是否有一些预设设置（或其他任何东西）可以解决这两个问题？

Answer 1

您需要transform-class-properties 插件：https://babeljs.io/docs/en/babel-plugin-transform-class-properties

你的 babelrc 将如下所示：

{
  "presets": ["react-app", "env"],
  "plugins": [
    [
      "react-intl",
      {
        "messagesDir": "./public/messages/"
      }
    ],
    "transform-class-properties"
  ]
}