在 lerna 设置中将 babel 设置放在哪里，因为它无法识别共享代码目录中的 jsx 代码

Question

我已经使用 lerna 来设置 repo。这是我收到的错误 -

这个错误出现在我放在组件目录中的共享代码中。下面是我的目录结构。

所以我在这两个应用程序中都使用了这个 Button 组件。在看到错误后，在我看来它没有识别 jsx 语法并要求 @babel/preset-react 。所以我尝试的是我尝试使用此内容在按钮文件夹中创建 .babelrc 文件 -

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

然后我还在按钮文件夹中创建了一个 webpack.config.js 文件，内容为 -

module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
}

这对我没有帮助！我还尝试在根文件夹中创建 babel.config.js 并复制一些内容，但它没有用。如快照所示，我在 apps 文件夹内的两个应用程序中都有单独的 .babelrc 和 webpack.config.js 文件。当我在应用程序中使用 buttons 作为 package.json 的依赖项然后使用它时，就会出现此错误。我不知道如何解决这个问题。任何帮助将不胜感激。 This is example repo I have created for reference

Answer 1

让它工作的一种方法可能是将 babel 配置直接钉在 webpack 配置中：

在您的情况下，您必须更改 babel-loader 配置，使其看起来像这样：

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          "@babel/preset-react",
        ],
      }
    }
  },

我刚刚在你的 app2 测试回购上试过了，它有效

在 lerna 设置中将 babel 设置放在哪里，因为它无法识别共享代码目录中的 jsx 代码

Where to put babel setting in lerna setup as it is not recognizing jsx code in shared code directory

reactjs

webpack

babeljs

lerna

babel-loader