如何在Create React App中启用实验性装饰器语法

在Create React App（简称CRA）项目中，实验性装饰器语法可以让我们用更简洁的方式处理类属性、路由绑定或依赖注入等逻辑。不过CRA官方脚手架出于稳定性考虑，默认并没有开启对装饰器的支持。如果直接在代码里写装饰器，控制台会提示不支持该语法。下面介绍如何在不执行 eject 的情况下为CRA启用实验性装饰器。

什么是实验性装饰器

装饰器是一种特殊类型的声明，可以附加到类、方法或属性上，用来修改或扩展它们的行为。在JavaScript中，装饰器目前仍是实验性提案，需要通过Babel插件进行转译。

• 类装饰器：修饰整个类
• 方法装饰器：修饰类中的方法
• 属性装饰器：修饰类的属性

不 eject 启用装饰器的方法

CRA允许通过项目根目录的 package.json 或 .babelrc 文件覆盖部分Babel配置。我们借助 @babel/plugin-proposal-decorators 插件即可。

第一步：安装依赖

在CRA项目根目录执行以下命令安装所需Babel插件：

npm install --save-dev @babel/plugin-proposal-decorators customize-cra react-app-rewired

第二步：修改启动脚本

将 package.json 中的 scripts 字段改为使用 react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

第三步：添加配置文件

在项目根目录创建 config-overrides.js，加入装饰器插件配置：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    '@babel/plugin-proposal-decorators',
    { legacy: true }
  ])
);

第四步：验证装饰器用法

写一个简单类验证是否生效：

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log('调用方法:', name);
    return original.apply(this, args);
  };
  return descriptor;
}

class Demo {
  @log
  sayHello() {
    return 'hello';
  }
}

const d = new Demo();
d.sayHello();

注意事项

启用 legacy 模式是为了兼容目前大部分CRA项目中的装饰器写法。如果你使用了 TypeScript，还需要在 tsconfig.json 中设置 experimentalDecorators 为 true。另外，不同Babel版本插件名称可能略有差异，若安装失败可检查插件包的最新名称。

装饰器语法尚未正式进入ECMAScript标准，生产环境使用前请评估稳定性风险。

常见问题

Create_React_Appdecorators babel修改时间：2026-07-27 02:24:09