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

2022-06-14 18:19:18 浏览数 (1)

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

所以需要下面几个库:

  1. download-git-repo //git仓库clone
  2. commander // The complete solution for node.js command-line interfaces,
  3. 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

0 人点赞