1.0.0 • Published 4 years ago
create-components-skeleton v1.0.0
zw-cli
通过交互式命令从github中下载代码生成新项目-学习记
使用姿势
- 全局安装npm i zw-vue-cli -g
- 在项目目录下运行命令zwcli
- 更加提示输入项目名称和版本号即可
参考文档
- Node.js 命令行程序开发教程
- download-git-repo包从远程(GitHub, GitLab, Bitbucket)拉取文件到本地
- commander.js包 在命令行中显示
- Ora 在控制台显示当前加载状态的
- shelljs 模块重新包装了 child_process，调用系统命令
- yargs 获取命令行参数
- chalk 控制控制台输出文字的颜色
- NodeJs交互式命令行工具inquirer
为什么要学习这个
看vue-cli可以用交互式的命令来生成一个项目感觉很好玩，所以我也来学学如何做。一下实现的功能其实一行命令就能解决(git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project)
我要实现什么功能
通过在命令行交互式输入项目名、版本号、选择模板地址后远程(github/gitlab)拉取代码到本地并创建项目.
什么都不懂，如何开始
搜索到了一篇Node.js 命令行程序开发教程，瞬间就有了方向。
具体做什么
- 像vue-cli那样输入命令 vue create hello-world就能开始执行交互程序。
- 交互式命令行
- 远程拉取项目到本地
- 修改package.json文件中的name和版本号
怎么做
- 像vue-cli那样输入命令 vue create hello-world就能开始执行交互程序
从Node.js 命令行程序开发教程-可执行脚本中学到， 可以在package.json文件中的bin下面设置命令，然后通过npm link就可将命令加入到环境变量中,像下面这样配置 运行zwcli就会执行"bin/create-zw-template"脚本。相当于执行node bin/create-zw-template(记得npm link, npm unlink是用来设置刚才的删除环境变量的)
- 交互式命令行
使用NodeJs交互式命令行工具inquirer来实现交互式命令。 - 首先编写问题 - 获取问答结果
- 获取到答案后，就从远程拉取代码下来 远程拉取代码我们选用download-git-repo包从远程(GitHub, GitLab, Bitbucket)拉取文件到本地
为了更好的用户体验我们需要引入Ora 在控制台显示当前加载状态的，来让加载过程更直观好像点
- 拉取代码后，修改package.json文件 使用node自带的api就行