要让 babel 支持装饰器，需安装并按序配置 @babel/plugin-proposal-decorators（legacy: true）和 @babel/plugin-proposal-class-properties（loose: true），前者解析 @decorator 语法，后者转换类字段，且 decorators 必须排在前；同时需配置编辑器（如 vs code 开启 experimentaldecorators）及构建工具（如 cra 或 vite）。
要让 Babel 支持装饰器（Decorator）这类尚未正式落地的 ES 实验性语法，关键不是“开启某个开关”，而是安装并正确配置两个核心插件：一个处理 @decorator 语法本身，另一个确保类属性（如 field = 'value'）能被正常转换。两者必须协同工作，顺序也不能错。
装对插件：@babel/plugin-proposal-decorators + class-properties
装饰器语法依赖两个插件配合：
-
@babel/plugin-proposal-decorators：负责解析和转换@xxx语法。必须启用legacy: true模式——这是目前最稳定、兼容 TypeScript 和主流框架（如 NestJS、MobX）的做法，对应 Stage 1 的行为规范； -
@babel/plugin-proposal-class-properties：装饰器常与类字段一起使用（比如@observer class X { data = [] }），这个插件把类字段转成可执行代码，建议配loose: true提升性能且避免潜在报错。
插件顺序不能颠倒
Babel 插件按数组顺序执行，而装饰器会修改 AST 中的类结构，class-properties 需要在此之后处理。所以 decorators 必须排在 class-properties 前面：
["@babel/plugin-proposal-class-properties", {"loose": true}],<br>["@babel/plugin-proposal-decorators", {"legacy": true}]
正确写法（decorators 在前）：
["@babel/plugin-proposal-decorators", {"legacy": true}],<br>["@babel/plugin-proposal-class-properties", {"loose": true}]
配置文件示例（babel.config.js 或 .babelrc）
推荐用 babel.config.js（对 monorepo 和多入口更友好）：
module.exports = {<br> presets: ['@babel/preset-env'],<br> plugins: [<br> ['@babel/plugin-proposal-decorators', { legacy: true }],<br> ['@babel/plugin-proposal-class-properties', { loose: true }]<br> ]<br>};
如果用 .babelrc，格式一致，但注意 JSON 不支持注释和尾逗号。
配套开发环境小贴士
光配 Babel 还不够，编辑器和构建工具也得跟上：
- VS Code 用户需在设置中加一行：
"javascript.implicitProjectConfig.experimentalDecorators": true，否则编辑器会标红； - 用 create-react-app 的项目，不能直接改 webpack，得借助
customize-cra或craco注入插件； - Vite 用户可在
vite.config.js的esbuild或babel配置里加入相同插件（Vite 默认不启用装饰器）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
