Angular、vue都有自己的脚手架,方便生成项目模板,而 yeoman 则是专注于generator的构建工具。
然自己公司的项目势必会有一套专属的文件目录结构,每次手工生成 ctrl c ctrl v 修修改改也不太好。所以我参照 vue-cli ‘复刻’了一个mini版的 xx-cli。算是对 vue-cli 的源码解读。
实现的功能如下:
1、类似vue-init webpack projectName 的命令 2、通过github拉取仓库模板 3、支持提问模式修改到 package.json
看过 vue-cli 的源码之后,信息量有点大,光是 require 的第三方库就有10来个(没细数),绝大多数没使用过的。。。
需求如下:
不想手工生成项目!
参考 vue-cli 的做法,拉取 github 仓库的模板,然后提供一些选项,生成 package.json (这个是最基本的需求,不包括其他e2e webpack等附带功能)
所以需要下面几个库:
- download-git-repo //git仓库clone
- commander // The complete solution for node.js command-line interfaces,
- inquirer //用来提问的
项目目录结构
bin 目录下的是整个构建工具的入口。这个和 npm run 其实是一个套路,就是一个映射
代码语言:javascript复制"bin": {
"gl": "bin/gl",
"gl-init": "bin/gl-init"
}
1、当你输入 gl-init 的时候就会进入 bin 下面的的这个文件。vue-cli 先是提取你的输入去判断路径还是模板类型
2、预先下载github上的模板,存放到系统用户下的文件夹以 .vue-templates 命名的文件夹中
3、进入提问环节-首先获得git-username等默认信息,然后收集目标答案。
4、根据配置文件的filter来删除不需要的文件,并通过一个 consolidate 的render方法来填充package.json中的字段(之前收集的提问)
5、删除临时目录,复制项目到目标路径下。
github 地址:https://github.com/tabyouto/gl-cli