react项目es6利用babel转换es5

在React项目中，如果你使用的是ES6（ECMAScript 6）语法，但是目标环境可能是不支持ES6的浏览器或Node.js版本，这时候就需要借助Babel这个工具进行转换。Babel是一个JavaScript编译器，它能将新版本的JavaScript语法（如箭头函数、let和const等）转化为ES5（早期版本的JavaScript，大部分浏览器都支持）。

以下是基本步骤：

1. **安装依赖**：首先需要安装`babel-cli` 和 `@babel/core`，以及适合处理React的插件，比如`@babel/preset-env` 和 `@babel/preset-react`。可以使用npm或yarn进行安装：

   npm install --save-dev babel-cli @babel/core @babel/preset-env @babel/preset-react

2. **配置`.babelrc`文件**：创建或编辑项目的根目录下的`.babelrc` 文件，添加Babel的配置项，指定用于转码的preset：

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }

3. **转换代码**：在命令行里，通过`babel`命令将源文件转换成ES5，例如：

   npx babel src --out-dir lib

这里的`src`是你ES6代码所在的目录，`lib`是输出转换后的文件的目标目录。

4. **引入转换后的文件**：在你的应用中，你需要引入`lib`目录下的ES5兼容代码替换原来的ES6代码。