React官方脚手架
- 以5.0.1版本为例
- 创建项目执行过程
源码解读debug
创建项目create-react-app my-app
,前面/packages/create-react-app
源码解读,详细可以从create-react-app之pacakage/create-react-app核心源码解读(一)
相当于在packages/react-scripts
运行命令:
yarn init
以下scripts/init.js
,代码从上到下按需执行解析
1. 进入函数
const appPackage = require(path.join(appPath, 'package.json'));
debug
代码如下:
- 接着执行,
useyarn
返回false
,因为前面使用的npm
安装的依赖 templateName
的值为cra-template
;templatePath
运行值为'my-app/node_modules/cra-template'
;templateJsonPath
运行值'my-app/node_modules/cra-template/template.json'
- 获取
templateJson
读取值为:
2. templatePackageToReplace
执行返回false
3. 新建项目my-app
的package.json
中添加scripts
,具体源码如下:
appPackage.scripts = Object.assign(
{
start: 'react-scripts start',
build: 'react-scripts build',
test: 'react-scripts test',
eject: 'react-scripts eject',
},
templateScripts
);
到这里是不是很眼熟,create-react-app
脚手架初始化的项目,package.json
中就是这样
4. 设置 eslint config
appPackage.eslintConfig = {
extends: 'react-app',
};
5. 设置browers list
6. 异步写入package.json
fs.writeFileSync(
path.join(appPath, 'package.json'),
JSON.stringify(appPackage, null, 2) + os.EOL
);
执行完成后,就去新建的项目my-app
下查看如下:
- 判断是否存在
README.md
,返回false
8. 拷贝模版项目到新建项目目录下
在create-react-app/packages
目录下可以看到有cra-template
为初始化项目模版
templateDir
运行值为'my-app/node_modules/cra-template/template'
appPath
运行值为'/Users/coco/project/shiqiang/create-react-app/packages/my-app'
- 源码执行拷贝
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;
}
运行完,去my-app
下查看,此时的目录如下:
不存在.gitignore
文件
9. 判断是否存在.gitignore
源码如下:
const gitignoreExists = fs.existsSync(path.join(appPath, '.gitignore'));
if (gitignoreExists) {
// Append if there's already a `.gitignore` file there
const data = fs.readFileSync(path.join(appPath, 'gitignore'));
fs.appendFileSync(path.join(appPath, '.gitignore'), data);
fs.unlinkSync(path.join(appPath, 'gitignore'));
} else {
// Rename gitignore after the fact to prevent npm from renaming it to .npmignore
// See: https://github.com/npm/npm/issues/1862
fs.moveSync(
path.join(appPath, 'gitignore'),
path.join(appPath, '.gitignore'),
[]
);
}
返回false
,于是进入else
,运行完成,新建项目gitignore
替换为.gitignore
10. 初始化git repo
源码如下:
function tryGitInit() {
try {
execSync('git --version', { stdio: 'ignore' });
if (isInGitRepository() || isInMercurialRepository()) {
return false;
}
execSync('git init', { stdio: 'ignore' });
return true;
} catch (e) {
console.warn('Git repo not initialized', e);
return false;
}
}
yarn
ornpm
if (useYarn) {
command = 'yarnpkg';
remove = 'remove';
args = ['add'];
} else {
command = 'npm';
remove = 'uninstall';
args = [
'install',
'--no-audit', // https://github.com/facebook/create-react-app/issues/11174
'--save',
verbose && '--verbose',
].filter(e => e);
}
- 安装其他模板依赖项(如果存在)
const dependenciesToInstall = Object.entries({
...templatePackage.dependencies,
...templatePackage.devDependencies,
});
if (dependenciesToInstall.length) {
args = args.concat(
dependenciesToInstall.map(([dependency, version]) => {
return `${dependency}@${version}`;
})
);
}
debug
数据:
args
运行数据:
11. 判断是否安装react
- 源码如下:
if ((!isReactInstalled(appPackage) || templateName) && args.length > 1) {
console.log();
console.log(`Installing template dependencies using ${command}...`);
const proc = spawn.sync(command, args, { stdio: 'inherit' });
if (proc.status !== 0) {
console.error(`\`${command} ${args.join(' ')}\` failed`);
return;
}
}
- 函数
isReactInstalled
function isReactInstalled(appPackage) {
const dependencies = appPackage.dependencies || {};
return (
typeof dependencies.react !== 'undefined' &&
typeof dependencies['react-dom'] !== 'undefined'
);
}
- 关键打印信息:
12. 子进程执行安装命令
- 源码如下:
const proc = spawn.sync(command, args, { stdio: 'inherit' });
- 控制台运行信息如下:
13. 执行删除,删除node_modules
目录下的cra-template
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsjGCYba-
14. 显示最优雅的 cd 方式
- 源码如下:
let cdpath;
if (originalDirectory && path.join(originalDirectory, appName) === appPath) {
cdpath = appName;
} else {
cdpath = appPath;
}
运行后cdpath
值为my-app
15. 成功信息提示打印
- 源码如下:
const displayedCommand = useYarn ? 'yarn' : 'npm';
console.log();
console.log(`Success! Created ${appName} at ${appPath}`);
console.log('Inside that directory, you can run several commands:');
console.log();
console.log(chalk.cyan(` ${displayedCommand} start`));
console.log(' Starts the development server.');
console.log();
console.log(
chalk.cyan(` ${displayedCommand} ${useYarn ? '' : 'run '}build`)
);
console.log(' Bundles the app into static files for production.');
console.log();
console.log(chalk.cyan(` ${displayedCommand} test`));
console.log(' Starts the test runner.');
console.log();
console.log(
chalk.cyan(` ${displayedCommand} ${useYarn ? '' : 'run '}eject`)
);
console.log(
' Removes this tool and copies build dependencies, configuration files'
);
console.log(
' and scripts into the app directory. If you do this, you can’t go back!'
);
console.log();
console.log('We suggest that you begin by typing:');
console.log();
console.log(chalk.cyan(' cd'), cdpath);
console.log(` ${chalk.cyan(`${displayedCommand} start`)}`);
if (readmeExists) {
console.log();
console.log(
chalk.yellow(
'You had a `README.md` file, we renamed it to `README.old.md`'
)
);
}
console.log();
console.log('Happy hacking!');
- 控制台打印信息如下:
至此,新建项目react-scripts
中的完成