相关版本
该版本直接fork官方的GitHub仓库,版本号为 v3.2.1。
具体的源代码注释,请查看GitHub仓库
流程分析
该源代码采用lerna工具管理依赖,主要的源码均位于packages目录下。在create-react-app目录下的package.json中,bin字段内容如下:
"bin": {
"create-react-app": "./index.js"
},
因此我们运行该create-react-app命令时,实际是执行该目录下的index.js。
create-react-app/index.js
该入口文件主要完成以下两个工作:
- 检测NodeJS的主版本号:必须≥8,否则直接退出
- 载入create-react-app/createReactApp.js
create-react-app/createReactApp.js
在文件的主要工作过程如下:
- 读取命令行中所有的相关参数;
- 检测项目名称是否有效;
- NodeJS的版本小于8.10时,只能使用react-scripts@0.9.x;
- 版本依赖管理工具确认,是yarn还是npm?yarn的版本小于1.12不能使用yarn的pnp特性,npm版本小于5.0时,只能使用react-scripts@0.9.x;
- 根据传入参数,生成并安装相应的依赖包;
- 依赖包安装成功后,检测NodeJS版本是否与react-scripts中要求相符,满足时才继续向下执行,否则删除已创建的内容后退出程序。
- 运行子进程执行react-scripts的初始化命令,命令详情如下:
var init = require('react-scripts/scripts/init.js');
init.apply(null, [项目根目录,项目名称,是否打印日志,命令执行目录, create-react-app命令中传入的额外参数:指定的模板文件路径]);
react-scripts/scripts/init.js
在该文件中,主要工作是:复制模板文件到新创建的目录。
流程图
整个源码的执行流程如下图: