本文详细介绍了在 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 特性。
