Babel 7.24 启用 Stage 3 装饰器需在@babel/plugin-proposal-decorators插件中配置version: "2023-12"。该配置适用于遵循最新 ECMAScript 提案的项目，若需兼容 TypeScript 旧版装饰器则应使用legacy: true。
先说结论：Babel 7.24 完全支持 Stage 3 装饰器，关键是在插件选项中明确指定提案版本。
- 适合：新建项目或希望遵循最新 ECMAScript 标准的代码库。
- 先准备：安装
@babel/plugin-proposal-decorators并确保 Babel 版本高于 7.20。 - 验收：编译后的代码应包含装饰器逻辑转换，且无语法报错。
命令速用版
在项目根目录执行以下命令安装核心依赖，确保开发依赖与生产依赖分离。
npm install `--save-dev` @babel/core @babel/plugin-proposal-decorators @babel/preset-env
npm install `--save` @babel/runtime为什么会这样
装饰器语法尚未正式纳入 ECMAScript 标准，不同提案阶段的语法行为存在差异。Babel 通过插件版本参数区分 Stage 2（legacy）与 Stage 3（2023-12）的实现逻辑。Stage 3 版本修正了早期提案中的语义问题，但与 TypeScript 默认的experimentalDecorators不完全兼容，因此配置时必须显式声明版本以避免行为不一致。
分步处理
按顺序完成依赖安装、配置文件编写和插件排序，确保构建工具能正确解析语法。
1. 创建配置文件
在项目根目录创建babel.config.json或babel.config.js，优先使用babel.config.json以减少动态配置带来的缓存问题。
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "version": "2023-12" }],
["@babel/plugin-transform-class-properties", { "loose": true }]
]
}2. 调整插件顺序
装饰器插件必须排在类属性插件之前，因为装饰器需要修改类成员的描述符。若顺序颠倒，Babel 可能无法正确转换装饰器逻辑。
3. 处理 React 项目特殊情况
若使用 Create React App，默认配置不允许修改 Babel 设置。需安装react-app-rewired和customize-cra，在config-overrides.js中注入上述插件配置。
怎么验证是否生效
编译完成后检查输出文件，确认装饰器语法已被转换为标准 JavaScript 函数调用。
1. 检查编译产物
查看dist或lib目录下的文件，原@decorator语法应消失，取而代之的是_decorate helper 函数调用。
2. 运行时代码测试
编写一个简单的日志装饰器，运行项目后观察控制台是否输出预期日志。若报错Support for the experimental syntax 'decorators' isn't currently enabled，说明配置未生效或缓存未清除。
常见坑
配置过程中容易遇到插件冲突、版本不匹配或构建工具限制，需针对性排查。
1. TypeScript 兼容性
TypeScript 默认使用 legacy 装饰器，若 Babel 配置为 Stage 3，可能导致类型检查与运行时行为不一致。建议在tsconfig.json中确认experimentalDecorators设置，或统一使用 Babel 进行类型擦除。
2. 插件顺序错误
若同时使用class-properties，必须确保 decorators 插件在配置数组中位于其前方，否则类属性可能先被转换导致装饰器无法挂载。
3. 缓存未清除
修改 Babel 配置后，若构建工具（如 Webpack、Vite）未清除缓存，旧配置可能仍然生效。删除node_modules/.cache目录后重新构建。
常见问题
Stage 3 装饰器能直接在浏览器运行吗？
不能，浏览器原生不支持装饰器语法。必须通过 Babel 编译转换为 ES5 或 ES2015 代码才能在当前浏览器运行。
配置了 version: "2023-12" 还能用 legacy 模式吗？
不能混用，同一项目中应选择一种模式。legacy 模式对应legacy: true，Stage 3 对应version: "2023-12"，两者语义不同。
Vue 项目中可以使用 Babel 装饰器吗？
可以，但 Vue 3 推荐使用 Composition API。若在 Vue 2 或类组件中使用，需确保 Babel 配置已加载，并注意与vue-loader的配合。
参考来源
- 知识库：JavaScript 的装饰器提案目前处于哪个阶段，如何利用 Babel 实现方法装饰
- 知识库：Babel(7.24.0) 配置
- 知识库：配置 Babel 装饰器-CSDN 博客
- 知识库：在 React 项目中启用 Babel 装饰器语法支持的全面指南