Babel 6 和 Babel 7 支持答案

【问题标题】：Babel 6 and Babel 7 supportBabel 6 和 Babel 7 支持
【发布时间】：2021-03-17 15:15:54
【问题描述】：

我有一个使用 Babel 版本 6 配置的主要 react 发布包（本地克隆）

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

我该如何解决这个问题？

【问题讨论】：

"具有以下配置：" 是在 .babelrc 还是 babel.config.json 中？
所以很明显，依赖内部的 Babel 配置对于构建整个应用程序并不重要。
这是 babel.config.json 但我也尝试过 .babelrc
嗯等等，我想我最初阅读这篇文章时误解了，您的主要应用程序，实际负责构建的应用程序使用的是 Babel 6，对吗？您是否使用npm link 或类似的东西来使用v7 安装组件库？它最终会成为同级目录吗？
是的，主要的是使用 babel 6，我使用 npm link 链接组件库包。链接后它将在我的节点模块中

标签： reactjs babeljs babel-loader

【解决方案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，这与将配置放在 @987654331 中的效果类似@ 和实际上是在 Babel 7 中添加的 babel.config.json 在很大程度上是为了解决您遇到的问题。

【讨论】：