reactjs - Babel 配置文件在 Lerna monorepo 中不起作用

Question

我正在使用 Lerna 构建一个包含多个 React 应用程序和一些自定义库(utils、UI React 组件等)的 monorepo。

这是到目前为止我的 monorepo 的结构:

packages
  app1
  app2
  ui-component
  utils

但是当我尝试在应用程序中使用我的库时，我遇到了以下两个问题:

    SyntaxError: ...\packages\ui-component\index.js Support for the experimental syntax 'classProperties' isn't currently enabled (2:8):
    
      1 | class Foo {
    > 2 |   name = 'This is Foo'
        |        ^
      3 | }
    
    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

    SyntaxError: ...\packages\ui-component\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
    
      1 | function Foo() {
      2 |   return (
    > 3 |     <div>Foo React Component</div>
        |     ^
      4 |   );
      5 | }
    
    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

错误消息非常明确，我读到了 Babel 配置文件 here并且，安装了 @babel/preset-react 和 @babel/plugin-proposal-class-properties，创建了以下 babel.config.json >:

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

但由于某种原因，它没有被考虑在内。

我尝试将此文件放置在我的 monorepo 的根目录中。我试着把它放进我的包裹里。我尝试将其重命名为 .babelrc.json 。我尝试将这些设置放在 package.json 的 "babel" 部分中。没有效果...

注意:我没有任何 webpack.config.js，而且我不想弹出我的应用程序。

Answer 1

对于那些感兴趣的人，我的问题只是我的代码没有被转译，而是按原样复制到我的应用程序的 node_modules 文件夹中。 所以，我所做的是:

1. 将 index.js 移至 src/index/js
2. 将我的 package.json 更改为:

{
  "name": "utils",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "transpile": "babel src --watch --out-dir dist --source-maps inline --copy-files"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "dependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0"
  }
}

然后我运行了 npm run transpile 并且我的库代码现在已正确导入到我的应用程序中。

是的，Babel 配置在 package.json 中定义时工作正常。