webpack客户端打包报错

webpack 打包的时候报错：
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

这个错误信息表明在使用 Webpack 和 Babel 打包时，Babel 遇到了装饰器语法，但你的 Babel 配置中没有启用相应的插件来处理装饰器。为了解决这个问题，你需要在 Babel 配置中添加装饰器插件。

解决步骤

1. 安装必要的 Babel 插件

   你需要安装 @babel/plugin-proposal-decorators 插件。你可以通过以下命令进行安装：
    

   npm install --save-dev @babel/plugin-proposal-decorators

2. 配置 Babel

   在 Babel 配置文件中（如 .babelrc、babel.config.js、package.json 中的 babel 字段等）添加配置以启用装饰器插件。

   如果使用 .babelrc 文件，更新配置如下：

   {
     "plugins": [
       ["@babel/plugin-proposal-decorators", { "legacy": true }]
     ],
     "presets": [
       "@babel/preset-env"
     ]
   }

   如果使用 babel.config.js 文件，更新配置如下：

   module.exports = {
     presets: [
       '@babel/preset-env',
     ],
     plugins: [
       ['@babel/plugin-proposal-decorators', { legacy: true }],
     ],
   };

1. 在这个配置中，legacy: true 选项用于启用装饰器的旧版语法，这在使用 TypeScript 或某些旧代码库时是常见的。

2. 重新运行 Webpack

   在更新 Babel 配置后，重新运行 Webpack 打包命令。

3. 注意事项

4. TypeScript 用户：如果你在使用 TypeScript，你可能还需要确保 tsconfig.json 中的 experimentalDecorators 选项被设置为 true：
    

   {
     "compilerOptions": {
       "experimentalDecorators": true
     }
   }

5. 装饰器的不同语法：Babel 提供了两种装饰器的语法：legacy 和 2021-12 提案语法。如果你使用的是新的提案语法，你可能需要设置 { decoratorsBeforeExport: true/false }，并确保你的代码与提案一致。

6. 通过以上步骤，你应该能够解决装饰器语法的解析和转换问题，并成功使用 Webpack 和 Babel 打包你的项目。