Yarn Workspaces项目配置及装饰器编译报错解决方案咨询

我之前碰到过一模一样的情况！问题的核心在于：当使用Yarn Workspaces时，shared包会被链接到web项目的node_modules目录中，但Webpack默认不会转译node_modules里的内容——哪怕这个包是你本地项目的一部分。所以shared里的装饰器语法@没被Babel处理，就导致了这个解析错误。

下面分两种场景给出解决方案：

一、自定义Webpack配置的项目 #

如果你的web项目是自己配置的Webpack，直接修改webpack.config.js，把shared目录加入babel-loader的转译范围：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 把shared目录添加到include列表里
        include: [
          path.resolve(__dirname, 'src'), // 原项目源码目录
          path.resolve(__dirname, '../shared') // 指向你的shared文件夹
        ],
        use: 'babel-loader',
      },
      // ...其他loader规则
    ]
  }
};

同时，记得更新shared目录下的Babel配置（推荐用babel.config.json替代旧的.babelrc，避免配置作用域问题），使用最新的装饰器插件（旧的transform-decorators-legacy已经被弃用了）：

{
  "presets": [
    "@babel/preset-env", // 根据你的环境选择，比如React项目还要加@babel/preset-react
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }], // MobX需要legacy模式
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

最后，确保安装了所有必要的Babel依赖：

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --dev

二、Create React App（CRA）项目 #

如果你的web项目是用CRA创建的，默认无法直接修改Webpack配置，需要用craco或者react-app-rewired来覆盖配置，这里以craco为例：

1. 安装craco依赖：

yarn add @craco/craco --dev

2. 在web项目根目录创建craco.config.js，配置Webpack转译shared目录：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到CRA默认的babel-loader规则
      const babelRules = webpackConfig.module.rules.find(rule => rule.oneOf).oneOf;
      
      // 给每个babel-loader规则添加shared目录的转译权限
      babelRules.forEach(rule => {
        if (rule.loader?.includes('babel-loader')) {
          rule.include.push(path.resolve(__dirname, '../shared'));
        }
      });
      
      return webpackConfig;
    }
  }
};

3. 修改package.json里的启动脚本，替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

额外注意事项 #

• 确保shared包的package.json里的main字段指向正确的入口文件（比如src/index.js），这样Webpack能正确找到它的源码。
• 如果shared里还有其他需要转译的依赖（比如一些未编译的第三方包），也需要把它们加入Webpack的include列表。

内容的提问来源于stack exchange，提问作者Anesh