开发自己的脚手架(react)

开发自己的脚手架

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

第一步

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

那我们想跟命令呢

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

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

你可能感兴趣的:(开发自己的脚手架(react))