Babel 6 和 Babel 7 支持

问题描述

我有一个主要的 react 发布包（在本地克隆），它配置了 Babel 版本 6

 "devDependencies" {
   "babel-core": "6.26.3","babel-eslint": "10.0.3","babel-jest": "21.0.0","babel-loader": "7.1.5","babel-preset-es2015": "6.24.1","babel-preset-react": "6.24.1"
}

使用以下配置

{"presets": ["es2015"] }

和 Webpack 配置：

...
rules: [
      {
        test: /\.js$/,loader: 'babel-loader'
      },...

我正在开发一个未发布的使用 Babel 版本 7 的 react 库组件包

  "devDependencies" {
    "@babel/cli": "^7.12.1","@babel/core": "^7.13.10","babel-core": "7.0.0-bridge.0","@babel/preset-env": "^7.13.10","@babel/preset-react": "^7.12.13"
}
  "resolutions": {
     "babel-core": "7.0.0-bridge.0"
},

使用以下配置：

  { "presets": ["@babel/preset-react","@babel/env"] }

我已将 react 库组件包安装到主包中，但出现以下错误：

SyntaxError: Unexpected token (6:8)

  4 | const Button = () => {
  5 |     return (
> 6 |         <Button>

我该如何解决这个问题？

解决方法

在 Babel 6 中，.babelrc 配置专门应用于包含 .babelrc 的子目录中的文件。由于您的组件库是通过 npm link 加载的，因此它位于同级目录中，因此 .babelrc 不适用于它。

Babel 6 中唯一的选项是将您的 Babel 配置放在 webpack.config.js 文件中，例如

rules: [
      {
        test: /\.js$/,loader: 'babel-loader',options: {
          "presets": ["es2015","react"]
        }
      },

另请注意，此配置必须包含 babel-preset-react。您的库还具有 Babel 作为依赖项并具有 .babelrc 这一事实不会影响您的整个应用程序构建过程。

请注意，如果您的主应用程序使用 Babel 7，您应该将主应用程序 .babelrc 重命名为 babel.config.json，这与放置webpack.config.js 中的配置，实际上 babel.config.json 是在 Babel 7 中添加的，在很大程度上是为了解决您遇到的问题。