从零开始开发一个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目录下生成出对应的执行命令文件

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

作为一个脚手架工具其实是可以分为两部分的。
一是生成对应的dir和file,搭建好环境,让我们能直接跑起项目。 这一部分比较简单,我们到最后再来完成这一步(等我们完成自己的脚手架工具之后),类似create-create-app myApp之类的。
二我感觉才是关键,是各种命令的实现,npm run start之类,接下来我会简单的解读下这一步的源码。

create-react-app用的是分包管理lerna,这里就不讲了。直接找到react-scripts目录里面的package.json,

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

可以看到虽然script里面有4条命令,但其实就是一个react-scripts命令,后面的只是参数。
所有运行的react-scripts start|test|build,其实都是在执行react-scripts.js。

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

看源码其实解析process.arg,然后解析出参数,最后执行对应的scripts目录下的文件,我们执行的是start,就是start.js文件。

接下来就是解析这个start.js源码了。
这里面有很多参数判定,代理处理,各种细节处理,抛开这些,核心其实就两个函数
一 createCompiler,这个就是简单点就是 new webpack(config)的实例。因为平常我们写的大部分都是配置文件,实际是执行webpack打包的时候,他也就是读取配置文件,然后new webpack(config)。

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

二 第二个就更简单了。读取各种配置参数,起一个服务,WebpackDevServer。

《从零开始开发一个react脚手架(二)》
平常我们都是通过命令行起一个服务,然后配置webpack.config.js里面的devServer,而现在就是通过API来实现。

虽然没有讲的很细,但是明显可以发现,脚手架说白一点就是通过各种api来完成我们原本需要考命令行或者配置文件来做的事情。这样更加灵活,而且复用性高,起新项目,如果差别不大,几乎可以做到零配置,这样开发者压根就不需要关心业务之外的东西

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

    原文作者:白衣卿相
    原文地址: https://segmentfault.com/a/1190000018720941
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞