本文详细介绍了在基于Create react app的项目中，如何解决“Support for the experimental syntax ‘decorators’ isn’t currently enabled”的Babel编译错误。通过利用`customize-cra`和`react–app-rewired`工具，用户可以无需弹出（eject）项目即可配置Babel插件，特别是启用对javaScript装饰器语法的支持，从而顺利使用如WatermelonDB等库中依赖此特性的功能。
解决Create React App中的装饰器语法错误
在使用现代javascript特性，特别是像装饰器（Decorators）这样的实验性语法时，开发者可能会在基于Create React App（CRA）的项目中遇到编译错误，例如“Support for the experimental syntax ‘decorators’ isn’t currently enabled”。这通常是因为CRA默认的Babel配置不支持这些仍在提案阶段的特性。本文将提供一个无需弹出（eject）CRA项目即可启用装饰器支持的专业教程。
理解问题根源
当你在代码中尝试使用装饰器（例如 @field(‘name’) name;），而项目的Babel配置没有相应的插件来转换这种语法时，Babel就会抛出SyntaxError。CRA为了简化配置，默认隐藏了底层的webpack和Babel配置。虽然你可以在package.json中添加”babel”配置段，但这通常会被CRA内部的配置覆盖或忽略，导致自定义配置不生效。
错误信息通常会明确指出需要添加@babel/plugin-proposal-decorators插件：
SyntaxError: ...: Support for the experimental syntax 'decorators' isn't currently enabled (8:3): ... Add @babel/plugin-proposal-decorators ... to the 'plugins' section of your Babel config to enable transformation.
解决方案：使用 customize-cra 和 react-app-rewired
为了在不弹出CRA项目的前提下修改其Webpack和Babel配置，我们通常会使用react-app-rewired配合customize-cra。
步骤一：安装必要的工具和插件
首先，你需要安装customize-cra和react-app-rewired这两个库，以及Babel装饰器提案插件。
npm install --save-dev customize-cra react-app-rewired @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties # 或者使用 yarn yarn add --dev customize-cra react-app-rewired @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
- customize-cra: 提供了一系列辅助函数，用于简化对CRA配置的修改。
- react-app-rewired: 允许你在不弹出CRA的情况下，使用自定义的配置覆盖CRA的默认配置。
- @babel/plugin-proposal-decorators: 负责转换装饰器语法。
- @babel/plugin-proposal-class-properties: 通常与装饰器一起使用，因为它处理类字段（如name;或Static table = ‘staff’;）的转换，在许多情况下是必需的。
步骤二：创建 config-overrides.js 文件
在你的项目根目录（与package.json同级）创建一个名为config-overrides.js的文件。这个文件将包含你对CRA配置的自定义逻辑。
// config-overrides.js const { addBabelPlugins, override } = require("customize-cra"); module.exports = override( ...addBabelPlugins( // 启用装饰器提案插件 [ "@babel/plugin-proposal-decorators", { "legacy": true // 使用旧版（Stage 1）装饰器语法 } ], // 启用类属性提案插件，通常与装饰器一起使用 [ "@babel/plugin-proposal-class-properties", { "loose": true // 使用宽松模式，可能与某些库兼容性更好 } ] ) );
配置说明：
- @babel/plugin-proposal-decorators：这是启用装饰器语法的核心插件。
- “legacy”: true：表示使用旧版（Stage 1）的装饰器提案语法。目前JavaScript的装饰器提案仍在演进中，许多现有库（如WatermelonDB）可能仍依赖于旧版语法。如果未来切换到新版提案，此选项可能需要调整或移除。
- @babel/plugin-proposal-class-properties：如果你在类中使用了像name;这样的类字段语法，这个插件是必需的。
步骤三：修改 package.json 中的脚本
将package.json文件中的scripts部分，把react-scripts替换为react-app-rewired。
{ "name": "your-react-app", "version": "0.1.0", "private": true, "dependencies": { // ... 其他依赖 }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, // ... 其他配置 }
通过这些修改，当你运行npm start、npm run build或npm test时，CRA的内部脚本将通过react-app-rewired加载，并应用你在config-overrides.js中定义的配置覆盖。
步骤四：移除 package.json 中冲突的Babel配置（如果存在）
如果你的package.json中存在一个”babel”配置段，并且其中包含了与装饰器相关的配置，建议将其移除。因为react-app-rewired和customize-cra会通过更底层的Webpack配置来管理Babel，package.json中的”babel”字段可能会被忽略或导致冲突。
例如，移除以下结构：
{ // ... "babel": { "presets": [ "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], // ... 其他插件 ] }, // ... }
步骤五：验证配置
完成上述步骤后，重新启动你的开发服务器：
npm start # 或者 yarn start
现在，你的项目应该能够正确编译并运行包含装饰器语法的代码了。
示例代码回顾
假设你正在使用WatermelonDB，并在src/watermelon/model/Staff.js文件中使用了装饰器：
import { Model } from '@nozbe/watermelondb'; import { field } from '@nozbe/watermelondb/decorators'; export default class Staff extends Model { static table = 'staff'; // 类属性，需要 @babel/plugin-proposal-class-properties @field('name') name; // 装饰器语法，需要 @babel/plugin-proposal-decorators // @action async getStaff() // { // return { // id: this.id, // name: this.name // } // } }
经过上述配置，这段代码将不再引发SyntaxError。
注意事项与总结
- 实验性语法： 装饰器语法仍在提案阶段，其规范可能会发生变化。legacy: true选项尤其重要，因为它指定了使用旧版提案。
- 兼容性： 确保你安装的Babel插件版本与你的Babel核心版本兼容。通常，npm install会自动选择兼容的版本。
- 其他Babel插件： 如果你的项目还使用了其他实验性语法（例如可选链?.或空值合并运算符??），你可能需要根据需要添加相应的Babel提案插件到config-overrides.js中。
- react-app-rewired的限制： 尽管react-app-rewired非常有用，但它毕竟是一种“绕过”CRA默认配置的方式。在某些复杂的场景下，它可能无法完全满足需求，此时可能需要考虑eject或使用其他构建工具。
通过遵循本教程，你可以在Create React App项目中无缝地集成和使用实验性的JavaScript装饰器语法，从而利用WatermelonDB等库的强大功能，提升开发效率。