如何在Create React App中启用实验性装饰器语法-js教程-PHP中文网

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

碧海醫心

发布： 2025-10-27 08:46:10

原创

417人浏览过

如何在create react app中启用实验性装饰器语法

本文详细介绍了在基于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;这样的类字段语法，这个插件是必需的。
- "loose": true：这会将类属性转换为赋值语句，而不是使用Object.defineProperty。这通常能提高兼容性和性能，但需要确保你的代码库对此兼容。

步骤三：修改 package.json 中的脚本

将package.json文件中的scripts部分，把react-scripts替换为react-app-rewired。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

{
  "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等库的强大功能，提升开发效率。

以上就是如何在Create React App中启用实验性装饰器语法的详细内容，更多请关注php中文网其它相关文章！