如何在React应用中启用类私有方法语法提案？

你已经安装@babel/plugin-proposal-private-methods依赖的前提下，直接修改项目根目录下的config-overrides.js配置即可，操作步骤如下：

• 打开根目录的config-overrides.js文件，该文件是你之前配置装饰器时用到的customize-cra配置文件
• 从customize-cra依赖中引入addBabelPlugins工具方法
• 在导出的override配置项中，添加私有方法babel插件配置，注意如果开启了装饰器的loose模式，私有方法插件的loose配置需要和装饰器、类属性插件的loose值保持一致

配置示例如下：

const { override, addDecoratorsLegacy, addBabelPlugins } = require('customize-cra');

module.exports = override(
  // 你之前已有的装饰器配置
  addDecoratorsLegacy(),
  // 新增私有方法语法支持配置
  ...addBabelPlugins(
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  )
);

• 保存修改后，停止当前正在运行的npm start进程，重新执行npm start启动项目即可，私有方法语法会被正常识别。

如果修改后依然报错，可以做如下检查：

• 确认你项目中是否存在单独的.babelrc或者babel.config.json配置文件，如果有，需要在对应配置的plugins数组中也加上私有方法插件配置
• 如果项目中同时配置了@babel/plugin-proposal-class-properties插件，确认它的loose值和私有方法插件的loose值完全相同，两者不一致会引发编译冲突

内容的提问来源于stack exchange，提问作者Yan Yang