开发自己的脚手架（react）

Posted 2021-06-17 lin_fightin

开发自己的脚手架

因为我们使用脚手架创建项目的时候，很多配置都是没有的，比如路由的匹配，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就能正常启动了。第一步就大功告成了