react intl和babel不会导出消息，预置错误

Question

运行包，并在FormattedMessage元素中进行翻译。当我尝试运行babel-时，它应该将消息提取到/build/ messages，预置要么是"react“，要么是"env"，”get“我要么在无效的预设上得到错误，要么是箭头函数。

我正在尝试使用将react信息提取到/build/ messages /。我无法使用箭头函数，= () =>，因为在上使用预置的“react”时会出错：

ReferenceError: [BABEL] src\components\LocaleSelector\index.js: Unknown option: node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

当我以预设的"env“、"react”运行它时，我会得到箭头函数的语法错误：

SyntaxError: src/views/Header/index.js: Unexpected token (15:12)
  13 |  }
  14 |
> 15 |  toggleMenu = () => {
     |             ^
  16 |          document.body.classList.toggle('show-menu');
  17 |  };

我尝试过安装像“transform- to 2015-箭头-函数”这样的插件来弥补没有解决方案。

我也尝试过添加stage-2等预置，但是根据Babel的说法，这些都是在7.0版本之后被废弃的。我有一次让构建运行，但是消息没有被提取出来。

下面是我的package.json和.babelrc。

package.json

{
    "name": "my-app",
    "version": "1.0.0",
    "private": true,
    "homepage": ".",
    "dependencies": {
        "axios": "^0.18.0",
        "glob": "^7.1.3",
        "intl-messageformat-parser": "^1.4.0",
        "mkdirp": "^0.5.1",
        "npm": "^6.6.0",
        "prop-types": "^15.6.2",
        "react": "^16.6.0",
        "react-addons-update": "^15.6.2",
        "react-axios": "^2.0.3",
        "react-bootstrap": "^0.32.4",
        "react-dom": "^16.6.0",
        "react-intl": "^2.8.0",
        "react-router-dom": "^4.3.1",
        "react-scripts": "2.1.1",
        "update": "^0.7.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "npm run build-messages && react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "build-messages": "set NODE_ENV=development&& babel ./src >NUL&&babel-node ./src/scripts/translate.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "babel-cli": "^6.26.0",
        "babel-plugin-react-intl": "^3.0.1",
        "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2017": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-app": "^7.0.0"
    }
}

.babelrc

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        [
            "transform-es2015-arrow-functions",
            "react-intl",
            {
                "messagesDir": "build/messages"
            }
        ]
    ]
}

我可以通过移除所有箭头函数并在构造函数中绑定this来实现这一工作，但这需要更多的代码和更多的工作。我想让语法起作用。

这里到底出了什么问题？

Answer 1

从您的示例中可以看出，您不仅使用箭头函数，还使用箭头函数作为类属性(如果我错了，请随意分享更多的代码片段)。

类字段目前是不标准的(几乎！-第3阶段- https://github.com/tc39/proposal-class-fields)。如果您希望像代码所显示的那样使用它，您可以使用babel插件进行建议：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

或者，您可以像这样定义方法：

toggleMenu () {
   document.body.classList.toggle('show-menu');
};

Answer 2

使用babel 7，您需要使用

@babel/plugin-提案-类-属性

使用Babel 7，您还应该更新预设的env和预设的反应。

.babelrc看起来就像

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
        "transform-es2015-arrow-functions",
        "react-intl",
        {
            "messagesDir": "build/messages"
        }
    ]
  ]
}

添加@babel/预设-env，@babel/plugin-提议-类-属性，@babel/预设-在开发依赖项中反应