一、初始化——把脚本映射为命令
1.vue-cli演示
在这里我们希望可以像vue-cli那样 在终端输入vue 有对应的命令显示
![69bf6cbbb4ad09633104efc3fdbc381c.png](https://i-blog.csdnimg.cn/blog_migrate/764091878a4f9fdc70588d9b5a757247.jpeg)
2.创建自己的脚手架文件(pgx-cli)
![5edf62f05632f44749f8bd0345d4ef9a.png](https://i-blog.csdnimg.cn/blog_migrate/662699e83eb93b9108fe5b891c116ea9.png)
index.js文件中写入
#!/usr/bin/env node
console.log('pgx-cli脚手架工具');
使用Node开发命令行工具所执行的javascript 脚本必须在顶部加入#!/usr/bin/env node 声明
接下来,需要在当前文件夹中使用 npm init -y 命令 创建pakaage.json文件,并在文件中 加入bin字段,如图所示
![7e9989d4f1330c5b57ce34c52e3a2b28.png](https://i-blog.csdnimg.cn/blog_migrate/89d5f4eff63f386b62f882fc0e16a44b.png)
然后再使用 npm link命令 就可以实现 将 该文件映射到全局了
![a4e25c5948aff6d8ae08742eca6ed606.png](https://i-blog.csdnimg.cn/blog_migrate/7a9281b3469c90938016fa593f827c4d.jpeg)
试着在cmd中输入 pgx,发现成功执行index.js
![cb197670d721befc0d26d1d9c95ccc20.png](https://i-blog.csdnimg.cn/blog_migrate/50e3d9a72d794cab9fb06e21e37dc928.png)
二、使用commander解析命令行参数
1.vue-cli演示
在这里,我们希望可以像vue-cli 一样,可以输入对应的参数,实现不同的功能
![235b9951f9fe903d15e306611e4f0e67.png](https://i-blog.csdnimg.cn/blog_migrate/4725f84e97c51f567d4da98680aced0f.jpeg)
2.安装使用commander
![6681ae9cfe16396a01f4d10666065d0c.png](https://i-blog.csdnimg.cn/blog_migrate/b32603e418c2980bff2f11432fbcd31a.png)
我们可以直接复制 commander官网上的实例代码来使用
![1d9e7c87205e0a1f2a86fc33f6de7688.png](https://i-blog.csdnimg.cn/blog_migrate/a7e2a548d9d1cc55cfc5e80dd4ff2053.jpeg)
三、设计命令行参数
在index.js中将复制过来的代码简化。
![c8d4ab85ed6628af55e20176129e835f.png](https://i-blog.csdnimg.cn/blog_migrate/64555ac19387788fa18fe61e7cef839c.jpeg)
接下来 就可以在cmd测试命令是否生效
![4383e6dbd3d77915254e7bdd6f6ee89e.png](https://i-blog.csdnimg.cn/blog_migrate/b70811cb168574cca1522d49e33b3c8e.png)
可见生效。
四、准备模板
在github创建一个仓库当作模板
![107a320f153d75e25aef769b886f035f.png](https://i-blog.csdnimg.cn/blog_migrate/50def89f3d0b983038ca6d744c78171d.png)
五、根据pgx create <projectName>命令 将模板下载到本地
1.安装 download-git-repo 插件
npm install download-git-repo
2.在index.js中引入并使用
![1bb55375b3a0b68216abc89e41a67422.png](https://i-blog.csdnimg.cn/blog_migrate/30d9b033eefde70e07853f819072bc88.jpeg)
接下来 试着在 cmd 输入 pgx create testDemo
看看能否成功下载
![0d4375fad7060dfe64c9ddd83cb2b03c.png](https://i-blog.csdnimg.cn/blog_migrate/aae930b15dcf6c5bfc42eada85531cc7.png)
![00352b4e85057f9e5beb612fa478059d.png](https://i-blog.csdnimg.cn/blog_migrate/701c57b45573e30433c797aafa0f0037.png)
桌面上成功生成一个文件
可见,成功。
六、用ora增加下载中的loading效果
安装
npm install ora
接下来,在index.js中引入并使用
![6a0a62e01ddb0e6ee40d65a254a614ad.png](https://i-blog.csdnimg.cn/blog_migrate/50bd753fa93acac694b57cd14326b699.jpeg)
我们再在cmd中 使用 pgx create testDemo
看看效果
![78ed8fdecd977181034d275addfceaab.png](https://i-blog.csdnimg.cn/blog_migrate/4490b443bc664fa1042c24dab282709e.png)
可见现在有了loading样式了
七、使用chalk 和 logSymbols增加文本样式
1.下载chalk
npm install chalk
引入并使用
![dfe1a44afc443f84fc3eb870e2d67fb1.png](https://i-blog.csdnimg.cn/blog_migrate/0395f298d1ed0682224db580ea3f79c8.jpeg)
接下来可以再试一次
![7ba8a4fad63075c4cf9d8bb3e1332d7b.png](https://i-blog.csdnimg.cn/blog_migrate/99eb55715678f3e975e3a70ed5b8961d.png)
![450f358d76fdc049c389088d29735f85.png](https://i-blog.csdnimg.cn/blog_migrate/647f2134cfc196f5fb7fa9b5049815e7.png)
可见文字提示有颜色了。
接下来,我们希望 文字前面有图标
![3ef93a3e92a58ebce19e41942aba35f0.png](https://i-blog.csdnimg.cn/blog_migrate/ec1ea3d136ea5e3a7371a0fb8c3b4d4c.png)
这时,需要安装
npm install log-symbols
然后引入并使用
![9d5c95f3dafbf9245b80203d9ee01c86.png](https://i-blog.csdnimg.cn/blog_migrate/7b71ee5320e381c505c261fde4edc7d4.jpeg)
再次测试
![62e3ff252059aeeed7377dc99e6b16df.png](https://i-blog.csdnimg.cn/blog_migrate/cd8694b1f84bd1ed4a64b2ff6614f6e8.png)
![01a490c577677c232805d05cddd65dcb.png](https://i-blog.csdnimg.cn/blog_migrate/53ab97b4db6fa21ad9f4c06cd205d4f1.png)
成功。
八、npm发布
- 打开npm官网
- 注册一个npm账号
- 在npm中检索是否有重复的包名
- 将package.json中的name改为发布到npm上的包名
- 打开控制台,执行
npm login
- 登陆成功后,在项目下执行
npm publish
发布
![9de861aeea9de5aff765bc1ece7fbde5.png](https://i-blog.csdnimg.cn/blog_migrate/8c5db6f89b80c559e4c3a76224e30cd0.png)
在npm官网搜索,看看是否发布成功
![a3277de2cb45d080b7b467c0daeafb48.png](https://i-blog.csdnimg.cn/blog_migrate/a212551b2c6123f1852f4dbd7bab7b03.png)
可见发布成功。
接下来
测试拉下来的的pgx能不能用。
我们需要先把使用 npm unlink
把之前的映射去除。
![872b833ebe25992e8316aaf626c66025.png](https://i-blog.csdnimg.cn/blog_migrate/f4a613ab10065e69e309342b3cff2d2f.png)
然后 再npm install pgx-cli -g
![96c05d76b889fc6f39f45692792fb89e.png](https://i-blog.csdnimg.cn/blog_migrate/c623ac060d3dfd28e34d4b76c2c63528.png)
![fdc9ef9a04351c1e08b08d7be813418d.png](https://i-blog.csdnimg.cn/blog_migrate/cc974ae4e9617fa46611f93c09e95650.png)
到此为止就实现了自己的脚手架根据, 想要下载下来的模板跟vue 一样,只需要 把自己做好的模板放在git上就好了,是不是很简单。
九、项目源码以及笔记
https://github.com/peigexing/...
点击跳转