手把手15分钟搭一个企业级脚手架(2)

包 功能 安装位置 备注
全局命令包   就像一个大脑,负责响应全局命令,并进行调度   全局包路径   global 安装,提供全局命令  
模板插件包   初始化工程所拷贝的模板   某个约定路径,如 ~/.maoda   模板可随业务扩展  
构建插件包   提供构建(webpack)能力   工程内 (目前主流脚手架都改用此方案)   不同模板可使用同一构建包,也可不同  

注:构建插件包,早期很多脚手架都把它放在工程外,比如放在全局,优势是多工程可复用一套 webpack 能力,但弊端也暴露出来,即在多人协同开发的项目中,由于构建插件包不在工程里没能被 git 仓库收录,导致一些不可预期的差异结果。

其调度关系如下:

手把手15分钟搭一个企业级脚手架

5 全局命令包

前面说了一通理论,下面开始正式搭建

全局命令包的功能:负责接收全局命令,并调度。

比如我做的 cli 的模板 demo cli-tpl

npm i cli-tpl -g # 或 yarn global add cli-tpl

全局安装后,暴露出一个 dcli 命令 (自己随便取的名字),该命令有以下典型功能:

暴露全局命令通过 package.json 中 bin 来指定,可参考我的 demo

命令 效果
dcli install [pkgName]   安装一个「模板插件包」到 ~/.maoda 路径,如果已经安装再执行,则询问更新到最新版,如安装 dcli install gen-tpl  
dcli init   以某个模板初始化一个新工程,执行后会让你从已装模板里选择  
dcli build   在工程根目录执行 (或写进工程的 scripts 里),尝试读取工程依赖的「构建插件包」并执行构建  
dcli dev   与 dcli build 类似,只不过是执行调试  

5.1 cli 开发中值得收藏的一些第三方调料包

重要性 包名称 功能
必要   minimist   解析用户命令,将 process.argv 解析成对象  
必要   fs-extra   对 fs 库的扩展,支持 promise  
必要   chalk   让你 console.log 出来的字带颜色,比如成功时的绿色字  
必要   import-from   类似 require,但支持指定目录,让你可以跨工程目录进行 require,比如全局包想引用工程路径下的内容  
必要   resolve-from   同上,只不过是 require.resolve  
必要   inquirer   询问用户并记录反馈结果,界面互动的神器  
必要   yeoman-environment   【核心】用于执行一个「模板插件包」,后文详细描述  
锦上添花   easy-table   类似 console.table,输出漂亮的表格  
锦上添花   ora   提供 loading 菊花  
锦上添花   semver   提供版本比较  
锦上添花   figlet   console.log出一个漂亮的大logo  
锦上添花   cross-spawn   跨平台的child_process (跨 Windows/Mac)  
锦上添花   osenv   跨平台的系统信息  
锦上添花   open   跨平台打开 app,比如调试的时候开打 chrome  

5.2 命令解析与分发

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/934b04713319969ee0b929108151408d.html