react 如何支持es7

React 支持 ES7 的配置方法

在 React 项目中支持 ES7 语法（如 async/await、类属性、装饰器等），通常需要配置 Babel 和 Webpack。以下是具体实现步骤：

安装必要的依赖

确保项目已安装 @babel/core、@babel/preset-env 和 @babel/preset-react。若需支持 ES7 实验性语法，还需安装 @babel/plugin-proposal-class-properties 和 @babel/plugin-proposal-decorators：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

配置 Babel

在项目根目录创建或修改 .babelrc 或 babel.config.json 文件，添加以下配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

• @babel/preset-env 自动根据目标环境转换 ES6+ 语法。
• legacy: true 启用旧版装饰器语法（Stage 1）。
• loose: true 优化类属性的编译输出。

配置 Webpack

在 webpack.config.js 中确保 Babel 加载器正确处理 .js 和 .jsx 文件：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            ['@babel/plugin-proposal-decorators', { legacy: true }],
            ['@babel/plugin-proposal-class-properties', { loose: true }]
          ]
        }
      }
    }
  ]
}

使用 Create React App 的配置

若项目基于 create-react-app，需通过 react-app-rewired 和 customize-cra 覆盖配置：

1. 安装工具包：

   

   npm install --save-dev react-app-rewired customize-cra

2. 修改 package.json 的脚本命令：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build"
   }

3. 创建 config-overrides.js 并添加 Babel 插件：

   const { override, addBabelPlugins } = require('customize-cra');
   module.exports = override(
     addBabelPlugins(
       ['@babel/plugin-proposal-decorators', { legacy: true }],
       ['@babel/plugin-proposal-class-properties', { loose: true }]
     )
   );

验证 ES7 语法

测试以下 ES7 特性是否生效：

// 类属性
class MyComponent extends React.Component {
  state = { count: 0 }; // ES7 类属性
}

// 装饰器
@log
class Button extends React.Component {}

注意事项

• 装饰器语法仍处于提案阶段，需谨慎使用。
• 若使用 TypeScript，需在 tsconfig.json 中启用 experimentalDecorators。