伪前端工程化之开发构建工具

By Noxxxx from https://www.noxxxx.com/?post_type=post&p=309
欢迎分享与聚合，尊重版权，可以联系授权

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等附带功能）

所以需要下面几个库：

项目目录结构

bin 目录下的是整个构建工具的入口。这个和 npm run 其实是一个套路，就是一个映射

"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、删除临时目录，复制项目到目标路径下。