create-react-app 代码逻辑图

2.初始化

3.解析

检查 root 目录下是否存在可能造成冲突的多余文件

在新目录下创建 package.json 文件

校验

根据提供的名称，产生一个 root 目录（新项目根目录） 和 appName （项目名）

根据 node spawn函数 、（npm | yarn）、需要的依赖项等条件执行 npm install 或者 yarn install

目的：如果本地版本是旧版本，就提示用户升级最新版 create-react-app远程版本获取策略，先走 https 检查，失败就用 npm 命令获取1.从 https://registry.npmjs.org/-/package/create-react-app/dist-tags 获取版本2.执行 npm view create-react-app version

执行

完整流程

根据提供的项目名创建本地目录

主要逻辑

确定将使用的包管理器 （npm | yarn）

初始化

1.校验

通过 validate-npm-package-name 检查 npm 项目名称合法性

create-react-app 全部执行流程

create-react-app

通过 validate-npm-package-name 检查是否为合法的npm包名

检查 npm 或者 yarn 版本是否达到要求

cli 输入参数校验

据提供的参数来决定使用的模板 cra-template 或者 cra-template-typescript （react js | react ts ）

node 版本检查，主版本不能低于10

根据 process.versions.node 检查 node major 版本号，主版本号不能低于 10

package版本检查，提醒用户及时升级

切换工作目录到新项目目录，同时，检查 npm 或者 yarn 版本是否达到要求

入口验证

使用 commander 来构造一个 cli 程序

4.执行

1.如果没提供新项目名，警告并退出

结束执行

同时实现基础功能，如帮助提示，当前系统环境信息打印等

解析

cli 基础逻辑

操作示意图