在React项目中启用Babel装饰器语法支持的全面指南

本文详细介绍了在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装饰器插件：

法语写作助手

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

31

查看详情

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特性。

以上就是在React项目中启用Babel装饰器语法支持的全面指南的详细内容，更多请关注php中文网其它相关文章！