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

Babel config file not working in Lerna monorepo

我正在使用 Lerna 构建一个包含多个 React 应用程序和一些自定义库(实用程序、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,我不想弹出我的应用程序。

对于那些感兴趣的人,我的问题只是我的代码没有被 运行 泄露,而是被原样复制到我的应用程序的 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 中定义时工作正常。