摘要：弄清之后，就去脚手架源代码里面找。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西从零开始开发一个脚手架三
上一篇已经初步整了个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脚手架(三)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109256.html
摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。 前言：最近天天加班做新项目，Taro版的小程序，还要实现富文本加海报，踩了不少坑，下次专门开个坑说一下。 回到脚手架，说实话从头写一个，即便是参考crea...
摘要：第一步创建两个项目这个是脚手架项目，脚手架说白点就是项目了，但要时时看效果，总不能一直到，所以需要。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。 前沿： 脚手架工具一大堆，但如果全部用第三方的脚手架，项目做起来肯定束手束脚，想来点差异化的东西都很难，所以最好是整一份自己的脚手架工具，想咋玩咋玩。阅读了next脚手架和create-react-app脚手架源码，...
摘要：前面两篇文都只是铺垫，今天至少要实现一个简单的开始之前再说一下垫片和。我一开始以为会在引入，但并不是。这是我的，当然以后会拆出来，作为目录下的一个执行文件。里面就配置了一个。下一篇从零开始开发一个脚手架四 前面两篇文都只是铺垫，今天至少要实现一个简单react的hello word 开始之前再说一下垫片和presets。 前几天突发疑问，create-react-app是怎么做的垫片，...
摘要：根据配置经验，还需要配置一个，根据我实际的测试结果，不用手动加入这个也可以实现热更新。我们公司的脚手架没用这个结果，导致自己额外增添了很多配置。，走到这里，我们会发现只实现了第一步页面自动刷新。很细，很有意思从零开始开发一个脚手架五 这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。 前沿：webpack-dev-server支持热更新，简单的说就是你修改...
摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。 一、 快速开始： 全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...
阅读 2529·2021-10-12 10:12
阅读 2097·2021-09-02 15:41
阅读 2336·2019-08-30 15:55
阅读 1232·2019-08-30 13:05
阅读 2257·2019-08-29 11:21
阅读 3368·2019-08-28 17:53
阅读 2914·2019-08-26 13:39
阅读 652·2019-08-26 11:50
