详解基于node.js的脚手架工具开发经历
需积分: 0 194 浏览量
2020-10-17
11:28:09
上传
评论
收藏 135KB PDF 举报
详解基于详解基于node.js的脚手架工具开发经历的脚手架工具开发经历
我的cli
前言前言
我们团队的前端项目是基于一套内部的后台框架进行开发的，这套框架是基于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 目录下创建相应的符号链接
（symlink）关联到执行文件。如果是本地安装，这个符号链接会生成在 ./node_modules/.bin 目录下。这样做的好处是可以直接
在终端中像执行命令一样执行nodejs文件。关于 prefix ，可以通过 npm config get prefix 获取。
hello, commander.js
在bin目录下创建一个macaw.js文件，用于处理命令行的逻辑。
touch ./bin/macaw.js
接下来就要用到github上一位神级人物——tj ——开发的模块commander.js 。commander.js可以自动的解析命令和参数，合
评论0
最新资源