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

前沿: 脚手架工具一大堆,但如果全部用第三方的脚手架,项目做起来肯定束手束脚,想来点差异化的东西都很难,所以最好是整一份自己的脚手架工具,想咋玩咋玩。
阅读了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命令。还有一些细节看截图

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

更改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,就能看到效果了。

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

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

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

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