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

lylwyy2016 发布于2019-08-23 16:25 / 1384人阅读

摘要：第一步创建两个项目这个是脚手架项目，脚手架说白点就是项目了，但要时时看效果，总不能一直到，所以需要。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。

前沿： 脚手架工具一大堆，但如果全部用第三方的脚手架，项目做起来肯定束手束脚，想来点差异化的东西都很难，所以最好是整一份自己的脚手架工具，想咋玩咋玩。
阅读了next脚手架和create-react-app脚手架源码，next脚手架太重，create-react-app好像没有服务器端渲染的内容，心血来潮自己写一个，中途会夹杂着两个脚手架工作的源码解读，只要理解了思想，就算照搬过来也是自己东西。哈哈（必然是会参考的）

脚手架不难，但是涉及到源码解读，可能会分为几个章节，反正最后能实现create-react-app一模一样的效果，并且支持服务器端渲染。

第一步创建两个项目

kkk-react 这个是脚手架项目，脚手架说白点就是node项目了，但要时时看效果，总不能一直publish到npm，所以需要npm link。
cli-view，这个项目理论上应该是由kkk-react创建出来的，包含一些基本的文件和文件夹，并且
package.json的scripts包含了start,build等构建命令。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。

详细步骤
在kkk-react目录下, 执行npm init ,编辑package.json中的name为"kkk-react"，最后在项目根目录中执行npm link命令。还有一些细节看截图

更改package.json中的main，指向lib目录，开发阶段先这么玩，真正发布的时候，应该是新建一个bin字段，里面可以包含命令，当npm install这个脚手架的时候，这些命令生成对应的执行命令到node_modules的bin目录中，这样我们在项目中就执行了。
开发的时候我们npm run dev，就能时时编译到lib目录了。

至于cli-view一样的，先npm init,然后执行npm link kkk-react。创建一个cs.js
引入kkk-react，就能看到效果了。

可以看到引入后，通过node执行就打印了我们在kkk-react输出的测试字段。同样的只是开发阶段这么玩，等一切都搞定了，就是通过npm run xxx，来执行对应的操作了。

第一篇先这么着了，还只是试试水，争取明天出第二篇

第二篇，粗略解读下create-react-app

GPU云服务器云服务器从零开始android开发 android开发从零开始从零开始 linux从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103017.html

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

摘要：弄清之后，就去脚手架源代码里面找。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西从零开始开发一个脚手架三上一篇已经初步整了个kkk-react，这一篇不写代码，粗略讲解下create-react-app的部分源码。前沿：科普下看源码的思路。以本人看过N多源码的经验总结，想要看这种脚手架或者npm包的源码，第一步就是看...

Y3G 2019-08-26 13:39 评论0 收藏0
从零开始开发一个react脚手架（三）

摘要：前面两篇文都只是铺垫，今天至少要实现一个简单的开始之前再说一下垫片和。我一开始以为会在引入，但并不是。这是我的，当然以后会拆出来，作为目录下的一个执行文件。里面就配置了一个。下一篇从零开始开发一个脚手架四前面两篇文都只是铺垫，今天至少要实现一个简单react的hello word 开始之前再说一下垫片和presets。前几天突发疑问，create-react-app是怎么做的垫片，...

wums 2019-08-23 16:47 评论0 收藏0
从零开始开发一个react脚手架（五）

摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。前言：最近天天加班做新项目，Taro版的小程序，还要实现富文本加海报，踩了不少坑，下次专门开个坑说一下。回到脚手架，说实话从头写一个，即便是参考crea...

gekylin 2019-08-23 17:15 评论0 收藏0
从零开始开发一个react脚手架（四）

摘要：根据配置经验，还需要配置一个，根据我实际的测试结果，不用手动加入这个也可以实现热更新。我们公司的脚手架没用这个结果，导致自己额外增添了很多配置。，走到这里，我们会发现只实现了第一步页面自动刷新。很细，很有意思从零开始开发一个脚手架五这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。前沿：webpack-dev-server支持热更新，简单的说就是你修改...

Kosmos 2019-08-23 16:54 评论0 收藏0
前端之从零开始系列

摘要：只有动手，你才能真的理解作者的构思的巧妙只有动手，你才能真正掌握一门技术持续更新中项目地址求求求源码系列跟一起学如何写函数库中高级前端面试手写代码无敌秘籍如何用不到行代码写一款属于自己的类库原理讲解实现一个对象遵循规范实战手摸手，带你用撸 Do it yourself!!! 只有动手，你才能真的理解作者的构思的巧妙只有动手，你才能真正掌握一门技术持续更新中…… 项目地址 https...

Youngdze 2019-08-26 10:57 评论0 收藏0