Question

运行带有FormattedMessage元素中的翻译的React和react-intl软件包。当我尝试运行babel-plugin-react-intl时，应该将消息提取到/ build / messages中，并且预设为“ react-app”或“ env”，“ react”，我要么在无效的预设上出错，要么箭头功能。

我正在尝试使用babel-plugin-react-intl将react-intl消息提取到/ build / messages /。我无法使用箭头功能= () =>进行此操作，因为在.babelrc上仅使用个预设的“ react-app”时，我会收到错误消息：

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-es2015-arrow-functions”之类的插件以弥补任何解决方案。

我还尝试添加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

从我的示例中可以看出，看起来您不只是在使用箭头函数，还在使用箭头函数作为类属性（如果我输入错了，请更正我，随时分享更多您的代码段）。

Class字段当前不是标准字段（差不多！-阶段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-proposal-class-properties

使用Babel 7，您还应该更新预设环境和预设反应

.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 / preset-env，@ babel / plugin-proposal-class-properties，@ babel / preset-react

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

2 个答案: