本文详细介绍了在react应用中，尤其是基于create-react-app的项目中，如何解决“support for the experimental syntax ‘decorators’ isn’t currently enabled”错误。核心解决方案是通过配置babel插件来启用实验性装饰器语法，并着重讲解了在react-app-rewired和customize-cra环境下正确配置babel的方式，包括创建config-overrides.js文件并移除冲突的package.json内嵌babel配置。
在React项目中启用Babel装饰器语法支持的全面指南
在使用现代javaScript特性，特别是像装饰器（Decorators）这样的实验性语法时，开发者经常会遇到编译错误，例如“Support for the experimental syntax ‘decorators’ isn’t currently enabled”。这通常意味着您的项目构建工具（如Babel）尚未配置为识别和转换这些语法。本教程将深入探讨这一问题，并提供在React应用中，尤其是在使用create-react-app及其衍生工具（如react-app-rewired）时，启用装饰器语法的详细步骤。
理解装饰器与Babel
装饰器是一种实验性的javascript特性，它允许您以声明式的方式修改类、方法、属性或参数的行为。在React生态系统中，它们常用于某些库（例如@nozbe/watermelondb的@field和@action）或自定义的逻辑封装。
由于装饰器仍处于提案阶段，它们不是ES标准的一部分，因此需要Babel这样的转译器来将其转换为浏览器或node.js可以理解的兼容代码。Babel通过插件机制来支持这些实验性特性。具体来说，@babel/plugin-proposal-decorators插件负责处理装饰器语法。
当您看到类似以下错误时：
SyntaxError: ...: Support for the experimental syntax 'decorators' isn't currently enabled (8:3): 6 | 7 | > 8 | @field('name') name; | ^
这意味着Babel在尝试解析您的代码时，遇到了它不认识的装饰器语法。
create-react-app环境下的特殊性
create-react-app (CRA) 是一个广受欢迎的React项目脚手架，它抽象了复杂的构建配置，包括webpack和Babel。为了提供开箱即用的体验，CRA默认隐藏了这些配置，使得直接修改.babelrc文件或package.json中的babel字段变得无效或容易引发冲突。
许多基于CRA的项目会使用react-app-rewired和customize-cra等工具来“重写”CRA的默认配置，而无需执行eject操作。在这种情况下，即使您在package.json中定义了Babel配置，也可能不会被构建过程采纳，因为react-app-rewired会接管配置加载。
解决方案：使用customize-cra启用装饰器
如果您正在使用react-app-rewired来修改CRA的配置，那么启用装饰器的正确方法是通过customize-cra。
步骤一：确保安装customize-cra和react-app-rewired
首先，请确保您的项目已经安装了customize-cra和react-app-rewired。如果尚未安装，请通过以下命令安装：
npm install customize-cra react-app-rewired --save-dev # 或者 yarn add customize-cra react-app-rewired --dev
同时，确保您已经安装了Babel装饰器插件：
npm install @babel/plugin-proposal-decorators --save-dev # 或者 yarn add @babel/plugin-proposal-decorators --dev
步骤二：创建或修改config-overrides.js文件
在项目的根目录（与package.json同级）创建或打开config-overrides.js文件。然后，添加以下代码来启用装饰器插件：
// config-overrides.js const { addBabelPlugins, override } = require("customize-cra"); module.exports = override( ...addBabelPlugins( // 启用装饰器插件 [ "@babel/plugin-proposal-decorators", { "legacy": true // 启用旧版（Stage 1）装饰器语法，通常与现有库兼容性更好 } ], // 如果您的项目还使用了类属性（如`class MyClass { myProperty = 1; }`），也建议在此处添加 [ "@babel/plugin-proposal-class-properties", { "loose": true // 启用宽松模式，通常与现有库兼容性更好 } ] ) );
legacy: true的说明：@babel/plugin-proposal-decorators插件支持两种模式：legacy（旧版）和非legacy（新版）。许多现有库和框架（如WatermelonDB）可能依赖于旧版的装饰器提案（Stage 1）。设置”legacy”: true可以确保与这些库的兼容性。如果您不确定，通常建议使用legacy: true。
步骤三：移除package.json中冲突的Babel配置
这一步至关重要。 如果您的package.json中包含一个名为babel的字段，并且其中已经配置了Babel插件，那么它可能会与customize-cra的配置发生冲突。为了避免不一致性，请将package.json中的babel字段整个移除。
示例（需要移除的部分）：
// package.json (请将以下部分移除) { // ... 其他配置 "babel": { "presets": [ "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "@babel/plugin-transform-runtime", { "helpers": true, "regenerator": true } ] ] }, // ... 其他配置 }
注意： 如果package.json中的babel字段包含了其他必要的presets或plugins（例如@babel/preset-react或@babel/plugin-transform-runtime），您也需要将它们一并迁移到config-overrides.js中，以确保所有Babel配置都通过customize-cra进行管理。例如：
// config-overrides.js (迁移所有Babel配置) const { addBabelPlugins, addBabelPresets, override } = require("customize-cra"); module.exports = override( ...addBabelPresets( "@babel/preset-react" // 确保React预设被加载 ), ...addBabelPlugins( [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "@babel/plugin-transform-runtime", // 如果需要，也迁移这个插件 { "helpers": true, "regenerator": true } ] ) );
步骤四：修改package.json中的脚本
确保您的package.json文件中的scripts部分配置为使用react-app-rewired来启动和构建项目：
// package.json { "name": "your-app", // ... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, // ... }
步骤五：重启开发服务器
完成上述更改后，请停止并重新启动您的开发服务器：
npm start # 或者 yarn start
此时，您的React应用应该能够正确编译并运行，不再报告装饰器语法错误。
总结
解决“Support for the experimental syntax ‘decorators’ isn’t currently enabled”错误的关键在于正确配置Babel插件以支持实验性语法。在create-react-app环境中，尤其是在使用react-app-rewired和customize-cra时，务必通过config-overrides.js文件来集中管理Babel配置，并移除package.json中可能存在的冲突配置。通过遵循这些步骤，您可以顺利地在您的React项目中使用装饰器等现代JavaScript特性。