JavaScript装饰器尚未纳入ES标准，需通过Babel的@babel/plugin-proposal-decorators插件支持，配置时应启用legacy: true以兼容TypeScript并配合class-properties插件，确保构建工具正确处理语法转换。
JavaScript 注解（Decorators）目前仍处于提案阶段，尚未被正式纳入 ECMAScript 标准。但在实际开发中，尤其是使用 TypeScript 或现代前端框架（如 Angular、NestJS）时，开发者常常希望在 Babel 环境下使用注解功能。Babel 提供了对实验性语法的支持，包括对装饰器（Decorators）的转换能力。
理解 JS 装饰器与 Babel 的关系
JavaScript 装饰器是一种特殊的语法，用于增强类、方法、属性等的定义行为。它以 @decorator 的形式出现在类成员前。由于该语法尚未定稿，原生 JavaScript 引擎不支持，必须通过编译工具（如 Babel）进行转换。
Babel 本身不直接解析装饰器语法，需要借助特定插件来启用和转换这种语法结构。
配置 Babel 支持装饰器语法
要在 Babel 项目中使用装饰器，需完成以下步骤：
- 安装必要的 Babel 插件
- 正确配置 .babelrc 或 babel.config.js
- 选择合适的装饰器版本（提案阶段不同）
你需要安装 @babel/core 和对应的装饰器插件。目前主流的是 @babel/plugin-proposal-decorators：
npm install --save-dev @babel/core @babel/plugin-proposal-decorators2. 配置 Babel 插件
在 .babelrc 或 babel.config.js 中添加插件配置。注意：装饰器插件必须放在前面，因为它会修改 AST 结构。
示例 .babelrc 配置：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
说明：
-
"legacy": true表示使用旧版（TypeScript 兼容）装饰器实现，这是目前最广泛支持的方式 - 必须同时启用 class-properties 插件，因为装饰器常与类属性一起使用
- 若使用
legacy: false，则遵循最新的装饰器提案（仍在变化），兼容性较差
实际使用装饰器的示例
配置完成后，你可以在代码中使用装饰器：
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class MyClass {
@readonly
getName() {
return "hello";
}
}
Babel 会将上述代码转换为可运行的 ES5/ES6 语法，实现类似功能。
TypeScript 用户注意事项
如果你在使用 TypeScript，建议保持一致性：
- TypeScript 默认使用实验性装饰器（
experimentalDecorators: true） - Babel 配置应设置
legacy: true以匹配 TS 行为 - 避免同时用 tsc 和 Babel 转换装饰器，防止重复处理或冲突
通常做法是关闭 tsc 的编译输出，仅用 Babel 处理语法转换。
构建工具集成（如 Webpack、Vite）
只要 Babel 配置正确，Webpack 中使用 babel-loader 或 Vite 中配置 @vitejs/plugin-react / vite-plugin-babel 均可正常处理装饰器语法。
确保 .js 或 .ts 文件经过 Babel 处理即可。
基本上就这些。装饰器在 Babel 中属于实验性功能，需谨慎用于生产环境，尤其是涉及深层元编程逻辑时。关注 TC39 装饰器提案进展，未来可能会有 breaking change。当前最佳实践是使用 legacy: true 模式保持稳定兼容。
