React 精彩的入门工具：cra 及 react-app-rewired
2024-01-22 08:52:54
前言
create-react-app（以下简称cra）是前端领域炙手可热的脚手架工具，深受React开发者信赖。无论刚接触React技术栈的新手，还是经验丰富的资深开发者，cra都能大大简化React项目的初始化和配置，提升开发效率。而react-app-rewired作为cra的扩展，更是提供了强大的自定义和扩展功能，让开发者可以轻松创建定制化的项目配置。
cra简介
cra是一个基于Node.js的命令行工具，旨在快速创建新的React项目。它集成了对React、webpack、Babel和ESLint等必备工具的支持，并提供了开箱即用的开发环境。借助cra，开发者可以轻松初始化项目、运行开发服务器和构建生产版本，而无需手动配置繁琐的构建工具和插件。
使用cra创建项目只需简单的几个步骤：
- 安装cra：
npm install -g create-react-app
- 创建项目：
create-react-app my-project
- 进入项目目录：
cd my-project
- 启动开发服务器：
npm start
此时，项目将在本地3000端口运行，开发者可以在浏览器中访问项目。cra还提供了各种命令来支持常见开发任务，如构建、测试、发布等。
react-app-rewired简介
react-app-rewired是cra的扩展工具，提供了强大的自定义和扩展功能。它允许开发者修改cra的默认配置，并添加自己的配置和插件，从而创建更适合自己需求的开发环境。
使用react-app-rewired需要先安装它：
npm install --save-dev react-app-rewired
然后，在项目的package.json文件中添加如下配置：
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}
}
这样，cra的启动和构建命令就都交由react-app-rewired处理了。
react-app-rewired提供了丰富而强大的配置选项，开发者可以根据需要进行修改。常见的配置选项包括：
- 自定义webpack配置
- 添加Babel插件
- 修改ESLint规则
- 集成第三方工具
react-app-rewired还支持插件扩展，开发者可以安装和使用社区提供的插件来进一步扩展cra的功能。
cra和react-app-rewired原理
cra和react-app-rewired都是基于webpack的工具，webpack是一个模块化打包工具，用于将多个文件打包成一个或多个可运行的JS文件。cra和react-app-rewired的工作原理都是通过修改webpack的配置来实现的。
cra提供了默认的webpack配置，这些配置可以满足大多数开发者的需求。但对于一些有特殊需求的开发者来说，可能需要修改默认配置。react-app-rewired允许开发者修改cra的默认配置，并添加自己的配置和插件，从而创建更适合自己需求的webpack配置。
cra和react-app-rewired的比较
cra和react-app-rewired各有优缺点。cra的优点是简单易用、开箱即用，非常适合新手开发者。react-app-rewired的优点是提供了强大的自定义和扩展功能，允许开发者创建更适合自己需求的开发环境。
对于新手开发者，cra无疑是更好的选择。但对于有经验的开发者，或者对项目有特殊需求的开发者，react-app-rewired可能是更好的选择。
总结
cra和react-app-rewired都是非常有用的工具，可以极大地提高React开发效率。cra适合新手开发者，react-app-rewired适合有经验的开发者。无论选择哪种工具，都应该根据自己的需求来决定。
