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，这与在Babel 7中添加的webpack.config.js中的配置以及实际上的babel.config.json中的配置具有类似的效果，这在很大程度上是为了解决您遇到的问题。