react-creat-app目录结构如下:
?
目录下有模板以及一些插件，今天我们来解析如何通过react-creat-app创建一个react应用，
react-create-app目录下很简单，主要代码在createReactApp.js中
?
从文件下的init方法开始：
const?program?=?new?commander.Command(packageJson.name)
创建react-create-app命令集，如果program.info存在则答应环境调试信息，如果没有输入项目名称则直接退出。
下面通过checkForLatestVersion检查并获取最新的版本。
createApp这个函数最先再次检查Node版本，然后获取根目录root和项目名称,检验项目名称的有效性，如果文件发生冲突直接退出，生成package.json文件。下面判断包的管理方式是yarn还是npm。
下面到run函数，通过getInstallPackage获取安装包，getTemplateInstallPackage获取模板名称，默认是'cra-template，在通过getPackageInfo获取安装包和模板的信息。
下面检查包和模板的版本，如果模板支持就将模板放入依赖中取安装。
调用install函数安装所有的依赖，返回包名和模板名称，调用executeNodeScript执行react-scripts/scripts/init文件中的init方法，传入root, appName, verbose, originalDirectory, templateName等参数，如果发生异常则退出。
executeNodeScript(
? ? ? ? ? {
? ? ? ? ? ? cwd: process.cwd(),
? ? ? ? ? ? args: nodeArgs,
? ? ? ? ? },
? ? ? ? ? [root, appName, verbose, originalDirectory, templateName],
? ? ? ? ? `
? ? ? ? const init = require('${packageName}/scripts/init.js');
? ? ? ? init.apply(null, JSON.parse(process.argv[1]));
? ? ? `
? ? ? ? );
scripts/scripts/init函数：
判断使用的包管理方式，templateName如果不存在直接返回。
const templatePath = path.dirname(
? ? require.resolve(`${templateName}/package.json`, { paths: [appPath] })
? );
?const templateJsonPath = path.join(templatePath, 'template.json');
获取到模板路径下的package.json和template.json，获取if (fs.existsSync(templateJsonPath)) {
? ? templateJson = require(templateJsonPath);
? }
template.json文件内容，并过滤掉不需要的属性
const templatePackageToReplace = Object.keys(templatePackage).filter(key => {
? ? return (
? ? ? !templatePackageBlacklist.includes(key) &&
? ? ? !templatePackageToMerge.includes(key)
? ? );
? });
添加脚本运行命令
// Setup the script rules
? const templateScripts = templatePackage.scripts || {};
? appPackage.scripts = Object.assign(
? ? {
? ? ? start: 'react-scripts start',
? ? ? build: 'react-scripts build',
? ? ? test: 'react-scripts test',
? ? ? eject: 'react-scripts eject',
? ? },
? ? templateScripts
? );
这里设置eslint
// Setup the eslint config
? appPackage.eslintConfig = {
? ? extends: 'react-app',
? };
写入当前目录下的package.json文件
fs.writeFileSync(
? ? path.join(appPath, 'package.json'),
? ? JSON.stringify(appPackage, null, 2) + os.EOL
? );
同样写入README.md，如果存在则替换名字为old
// Copy the files for the user
? const templateDir = path.join(templatePath, 'template');
? if (fs.existsSync(templateDir)) {
? ? fs.copySync(templateDir, appPath);
? } else {
? ? console.error(
? ? ? `Could not locate supplied template: ${chalk.green(templateDir)}`
? ? );
? ? return;
? }
拷贝模板目录下的template文件夹到目标目录下，使用包的管理方式并更新到readme.md文件中。
设置gitignore文件，防止被修改。判断是否需要初始化仓库，判断react react-dom 和template，typescript依赖是否存在，不存在则安装这些依赖。
如果git已经被初始化，且可以自动提交则提交代码。
到这里已经成功的下载了一个模板到目标目录，并已经安装完毕，只需要npm start跑起来就可以了。