共计 1509 个字符，预计需要花费 4 分钟才能阅读完成。
上一篇已经初步整了个 kkk-react，这一篇不写代码，粗略讲解下 create-react-app 的部分源码。
前沿：科普下看源码的思路。以本人看过 N 多源码的经验总结，想要看这种脚手架或者 npm 包的源码，第一步就是看 package.json 的配置，一般看的就是 main.js 和 script。main.js 就是引入 npm 包后，取的真实的 js 文件地址。script 就是脚手架命令，类似下面 create-react-app
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
脚手架看 script,npm 包看 main。找到 script 之后，就 4 个命令，第一个 start 就是开启本地服务，build 就是打包文件，test 没仔细看我估计就是代码检查吧，因为我们公司的 test 就是 eslint 检查，eject 类似于生成配置文件之类的，因为他的配置走的是 api, 不是 webpack 配置文件，这个命令可能就是生成出对应的 webpack 文件（后面的两个没细看，不必太 care）。弄清 script 之后，就去脚手架源代码里面找 package.json。去这个文件里面看 bin 配置，说直接一点，为嘛 script 里面的命令能其效果呢，就是你安装一个包之后，如果这个包里面有 bin 配置，那么 npm 就会去 node_modules 里面的.bin 目录下生成出对应的执行命令文件
作为一个脚手架工具其实是可以分为两部分的。一是生成对应的 dir 和 file，搭建好环境，让我们能直接跑起项目。这一部分比较简单，我们到最后再来完成这一步（等我们完成自己的脚手架工具之后），类似 create-create-app myApp 之类的。二我感觉才是关键，是各种命令的实现，npm run start 之类，接下来我会简单的解读下这一步的源码。
create-react-app 用的是分包管理 lerna, 这里就不讲了。直接找到 react-scripts 目录里面的 package.json，
可以看到虽然 script 里面有 4 条命令，但其实就是一个 react-scripts 命令，后面的只是参数。所有运行的 react-scripts start|test|build，其实都是在执行 react-scripts.js。
看源码其实解析 process.arg，然后解析出参数，最后执行对应的 scripts 目录下的文件，我们执行的是 start，就是 start.js 文件。
接下来就是解析这个 start.js 源码了。这里面有很多参数判定，代理处理，各种细节处理，抛开这些，核心其实就两个函数一 createCompiler, 这个就是简单点就是 new webpack(config) 的实例。因为平常我们写的大部分都是配置文件，实际是执行 webpack 打包的时候，他也就是读取配置文件，然后 new webpack(config)。
二 第二个就更简单了。读取各种配置参数，起一个服务，WebpackDevServer。
平常我们都是通过命令行起一个服务，然后配置 webpack.config.js 里面的 devServer，而现在就是通过 API 来实现。
虽然没有讲的很细，但是明显可以发现，脚手架说白一点就是通过各种 api 来完成我们原本需要考命令行或者配置文件来做的事情。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西
下一篇就开始真正写我们的自己的脚手架了。
