详解基于详解基于node.js的脚手架工具开发经历的脚手架工具开发经历
前言前言
我们团队的前端项目是基于一套内部的后台框架进行开发的,这套框架是基于vue和ElementUI进行了一些定制化包装,并加
入了一些自己团队设计的模块,可以进一步简化后台页面的开发工作。
这套框架拆分为基础组件模块,用户权限模块,数据图表模块三个模块,后台业务层的开发至少要基于基础组件模块,可以根
据具体需要加入用户权限模块或者数据图表模块。尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的
配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目的时候,仍然需要人工去修改很多地方,甚
至为了方便,直接从之前的项目copy过来然后进行魔改。表面上看问题不大,但其实存在很多问题:
重复性工作,繁琐而且浪费时间
copy过来的模板容易存在无关的代码
项目中有很多需要配置的地方,容易忽略一些配置点,进而埋坑
人工操作永远都有可能犯错,建新项目时,总要花时间去排错
内部框架也在不停的迭代,人工建项目往往不知道框架最新的版本号是多少,使用旧版本的框架可能会重新引入一些bug
针对以上问题,我开发了一个脚手架工具,可以根据交互动态生成项目结构,自动添加依赖和配置,并移除不需要的文件。
接下来整理一下我的整个开发经历。
基本思路基本思路
开始撸代码之前,先捋一捋思路。其实,在实现自己的脚手架之前,我反复整理分析了vue-cli的实现,发现很多有意思的模
块,并从中借鉴了它的一些好的思想。
vue-cli是将项目模板作为资源独立发布在git上,然后在运行的时候将模板下载下来,经过模板引擎渲染,最后生成工程。这样
将项目模板与工具分离的目的主要是,项目模板负责项目的结构和依赖配置,脚手架负责项目构建的流程,这两部分并没有太
大的关联,通过分离,可以确保这两部分独立维护。假如项目的结构、依赖项或者配置有变动,只需要更新项目模板即可。
参照vue-cli的思路,我也将项目模板独立发布到git上,然后通过脚手架工具下载下来,经过与脚手架的交互获取新项目的信
息,并将交互的输入作为元信息渲染项目模板,最终得到项目的基础结构。
工程结构工程结构
工程基于 nodejs 8.4 以及 ES6 进行开发,目录结构如下
/bin # ------ 命令执行文件
/lib # ------ 工具模块
package.json
下面的部分代码需要你先对 Promise 有一定的了解才更好的理解。
使用使用commander.js开发命令行工具开发命令行工具
nodejs内置了对命令行操作的支持,node工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。
{
"name": "macaw-cli",
"version": "1.0.0",
"description": "我的cli",
"bin": {
"macaw": "./bin/macaw.js"
}
}
经过这样配置的nodejs项目,在使用 -g 选项进行全局安装的时候,会自动在系统的 [prefix]/bin 目录下创建相应的符号链接