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

Question

我正在使用 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，我不想弹出我的应用程序。

Answer 1

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

已将 index.js 移至 src/index/js
将我的 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 中定义时工作正常。

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

Babel config file not working in Lerna monorepo

reactjs

babeljs

lerna

monorepo