xw-tpl-cli

大前端模版脚手架

是什么？

通过命令 tpl create xx 去快速创建各种大前端框架模版。如 vue2、vue3、react、uniapp、RN、webRTC、three、node 等初始工程化项目。

解决什么问题？

• 快速创建成熟的前端工程化的项目，而不是从零搭建
• 省去基础建设的繁琐工作，专注去开发业务代码

项目地址

• Gitee：https://gitee.com/Wuaixi/xw-tpl-cli
• Npm: https://www.npmjs.com/package/xw-tpl-cli

如何使用

• 执行一行命令即可，确认项目名称，再按提示选择模板

tpl create <templateName>

// 简写
tpl c <templateName>

// 脚手架版本
tpl -V 

• 命令行创建

• 选中模板，下载模板代码

• 内置一些模板可供使用

{
    "vue2": "https://gitee.com/Wuaixi/xw-vue-template.git",
    "vue3": "https://gitee.com/Wuaixi/wu-vue3-ts-template.git",
    "node-server": "https://github.com/15240021857/xw-node-blog-server.git",
    "react": "https://github.com/15240021857/react-frame.git",
    "uniapp": "https://github.com/15240021857/xw-chart-app.git",
    "vitepress": "https://github.com/15240021857/web-docs.git",
    "nuxt": "https://github.com/15240021857/xw-nuxt-vue2-template.git"
}

实现原理

• 创建 bin 命令，可执行文件
• commader 命令行指令
• inqueryer 与命令行交互
• download-git-repo 通过代码下载 git 代码
• ora 加载动画

实现步骤

• 运行 xw create xx: 创建 index.js 首行 node 环境注释
• commander 解析命令行参数
• 交互去获取用户输入的项目名、选择的模版名
• 根据选择的模版名，用 download-git-repo 去下载对应的仓库
• 利用 ora loading，下载完毕关闭 loading
• 发布 npm 或连接私仓 发布到私仓