Babel 6 和 Babel 7 支持

Question

我有一个主要的 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'
      },
...

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

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

我该如何解决这个问题？

Answer 1

在 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 中添加的那样，很大程度上是为了解决你运行遇到的问题。

Babel 6 和 Babel 7 支持

Babel 6 and Babel 7 support

reactjs

babeljs

babel-loader