从零开始开发一个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脚手架(三)