最近把vue-cli@2.x和create-react-app 的源码都看了一遍。由于现在官方推荐使用vue-cli@3.0，改动比较大，所以就不写关于vue-cli的了（据说是因为vue-cli@2.x创建项目时操作有点太复杂了，于是犹雨溪大大就借鉴了create-react-app的思想，搞出了个零配置的vue-cli@3.0，有兴趣的小伙伴可以去自己看一下哈)。这篇随笔只讲解create-react-app的实现，但是，因为 create-react-app源码 加上注释总共800多行代码，这里也不打算对它的源码进行逐一解读了，如果想要对全部源码解读的，可以先把这篇文章看完、再去看源码，应该会容易明白很多。
前面说了这么多废话，现在该进入正题了。那create-react-app到底是什么东东叱？这里还是引用官方readme文件的第一句话解释：
Create React apps with no build configuration.
嗯，这解释得很清楚了：creact-react-app可以让你零配置创建一个React应用！为什么要强调零配置呢？因为我们都知道，React是分模块的组件化的框架，这需要配置webpack打包吧？还有使用了JSX和高大上的ES6新特性，这需要配置babel了啊？另外还需要对代码做静态检查，需要配置eslint吧？对于一个新手来说，能够成功的配置一个能运行React的环境，真的很有可能需要一两天时间的。所以零配置的意义就在于让小萌新在不懂配置的情况下，也能迅速的编写自己的第一个react-hello-world，这是很有成就感的！
如果之前没有使用过create-react-app也没有关系 ，这里是它最简单的用法：
create-react-app my-app
等待数分钟，就会在当前目录下创建一个my-app的项目，然后进入这个根目录npm start就可以启动一个React项目了。记得要先全局安装好create-react-app。
介绍了create-react-app是什么，以及他的最简单的用法。现在我们就一起动手实现一个create-react-app山寨版吧。因为我们实现的是一个简化版的，去除了环境检查、版本检测、离线包安装等功能，代码就剩下100行左右，暂且就叫做simple-create-react-app。
在实现代码之前我们先梳理一上思路：

• 通过commander获取项目名称;
• 如果项目名称为空（实际上还要对包名进行有效性检查的，这里暂且忽略），则退出进程，并提示用户项目名称不能为空，否则进行步骤3;
• 在当前目录下创建一个子目录，目录名称就是用户输入的项目名，并在里面初始化一个package.json文件;
• 进入项目的根目录，安装react, react-dom 和react-scripts三个依赖;
• 依赖安装完成后，调用react-scripts的init方法初始化项目;
• 结束;
  

按照上面的思路，开始编码吧！
先引入一些必要的依赖，对于这些依赖有什么作用这里就不展开了。 以及定义一个用来存放项目名称的变量projectName：
const commander = require('commander');const chalk = require('chalk');const spawn = require('cross-spawn'); const fs = require('fs-extra');const path = require('path');const os = require('os');const packageJson = require('./package.json');let projectName; // 项目名称，通过命令行参数获取
接下来，就创建一个Commander的实例，获取用户输入的项目名称, 并判断是否为空。如果是空，则提示用户，并退出进程。
const program = new commander.Command(packageJson.name).version(packageJson.version).arguments('<project-directory>').usage(`${chalk.green('<project-directory>')} [options]`).action(name => {  projectName = name;}).parse(process.argv) // 格式化参数，必须要的// 如果没有输入项目名称，则给出提示，并退出进程if(typeof projectName === 'undefined') {  console.error('please specify the project directory');  console.log();  console.log('For examaple: ')  console.log(`    ${chalk.cyan(program.name())} ${chalk.green('my-react-app')}`)  console.log();  process.exit(1);}
如果项目名称不为空，则开始创建一个空的项目，并且初始化一个packgae.json文件：
// 开始创建项目createApp(projectName);function createApp(name) {  const root = path.resolve(name);  fs.ensureDirSync(root); // 创建项目空目录  console.log(`Creating a new React app in ${chalk.green(root)}.`);  // 创建新项目的package.json  const packageJson = {    name: name,    version: '0.1.0',    private: true  };  fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2) + os.EOL);  // 将当前目录的路径存下来。因为下一步我们就要进入到新项目的目录了  // 后面可能还会用到当前的路径  const originalDirectory = process.cwd();  // 进入新创建的项目里面  process.chdir(root);  run(root, originalDirectory);}
创建新项目之后，通过process.chdir(root);让进程的工作目录进入到新项目里面。然后开始安装依赖，等数分钟之后，安装依赖完成后，开始调用create-react-app的init方法初始化项目：
function run(root, originalDirectory) {  const allDependencies = ['react', 'react-dom', 'react-scripts'];  console.log('Installing packages. This migth take a couple of minutes...');  console.log(`Installing ${chalk.cyan('react')}, ${chalk.cyan('react-dom')}, and ${chalk.cyan('react-scripts')}...`);  console.log();  install(root, allDependencies)  .then(() => {    console.log();    console.log('Installing is success!');    console.log();    // 执行react-scripts模块下的init方法进行初始化项目    const scriptsPath = path.resolve(      process.cwd(),      'node_modules',      'react-scripts',      'scripts',      'init.js'    )    const init  = require(scriptsPath);    init(root, projectName, null, originalDirectory);  })  .catch(reason => {    console.log();    console.log('Aborting installation.');    if(reason.command) {      console.log(`    ${chalk.cyan(reason.command)} has failed.`);    } else {      console.log(chalk.red('Unexpected error!'), reason);    }  })}// 在指定目录下安装npm依赖function install(root, dependencies) {  return new Promise((resolve, reject) => {    let command = 'yarnpkg';    const args = ['add'];    [].push.apply(args, dependencies);    let child = spawn(command, args, {stido: 'inherit'});    child.on('close', code => {      if(code !== 0) {        reject({          command: `${command} ${args.join(' ')}`        });        return;      }      resolve();    })  });}
数了一下，代码总共100多行，就这么简单就实现了create-react-app的核心功能了。当然，实际上，还有环境检测、版本检测、离线安装等，我们这里忽略了的，如果有兴趣的，可以自己看一下官方的源码。
关于create-reate-app就写这么多了，源码可以到我的github进行下载，如果喜欢的欢迎star一下哈~

奈斯，很赞