我应该使用哪种Babel预设？ [重复]

Question

这个问题在这里已有答案：

• Unexpected token '=' in React Component [duplicate] 2回答

我在使用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"
  ]
}