从零开始开发一个react脚手架(二)

上一篇已经初步整了个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来完成我们原本需要考命令行或者配置文件来做的事情。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西

从零开始开发一个react脚手架(三)