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"
  ]
}

我应该使用哪些Babel预设？

1 个答案: