开发自己的脚手架(react)

本文介绍了如何开发自己的脚手架,用于快速搭建包含路由匹配、Redux等配置的React项目。通过在package.json中设置bin属性,结合commander.js库解析命令行指令。在创建项目时,从远程仓库克隆模板到本地,并执行npm install及启动命令。通过此方法,可以个性化定制项目的初始化配置,提高开发效率。
摘要由CSDN通过智能技术生成

开发自己的脚手架

因为我们使用脚手架创建项目的时候,很多配置都是没有的,比如路由的匹配,redux,这些,所以我们可以开发自己的脚手架。

第一步

我们希望可以在命令行敲下某个命令时,执行代码,如
在这里插入图片描述
只需要在这里插入图片描述
新建两个文件,
在这里插入图片描述
这个注释是关键,固定用法,然后
在这里插入图片描述
在package.json文件加一个属性bin指定输入aaa的时候用node执行index.js,这时候在npm link后,就可以i输入aaa执行index.js文件了,效果跟node index.js一样。

那我们想跟命令呢

比如 aaa -v, aaa create xxx等等,
我们可以借助一个库,commander.js。vue的脚手架也是借助于这个库。
在这里插入图片描述
借助这个库就能将我们输入在命令行的指令解析并且执行
在这里插入图片描述
可以增在自定义的options,也可以监听help事件。当然我们希望这些配置放在一份单独的文件,在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
现在我们想aaa craete xxx安装我们的项目
要做的事情就是将我们放在register仓库的模板下载下来,然后npm install 然后启动项目
在这里插入图片描述
创建一个指令函数
在这里插入图片描述
输入指令运行时,就会执行action的函调函数。思路就是输入这个命令时,去仓库里面下载模板放到我们的my-app文件去。
主要是这个actions在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
actions四部操作,首先是clone项目,借助一个库,download-git-repo
在这里插入图片描述
由于这个版本比较老,所以没有Pormise的处理方式,这里有个骚操作,
在这里插入图片描述
node内置了util模块,可以让我们解决这个问题,让这个函数能像处理pormise一样被处理。

在这里插入图片描述
这样download就可以使用async await
接着第一步 clone模板
在这里插入图片描述
在这里插入图片描述
这样基本就好了,这里我用了自己写的模板,react里面有适配,redux,route的封装,qiankun包裹一层等等
https://gitee.com/fine509/react_template_ts.git
然后i初步执行aaa create test
就会从gitee上面拉去模板代码
在这里插入图片描述
然后执行yarn install 和yarn start就能正常启动了。第一步就大功告成了

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值