首页
学习
活动
专区
圈层
工具
发布
50 篇文章
1
【架构师(第一篇)】整体需求分析和架构设计
2
【架构师(第二篇)】脚手架架构设计和框架搭建
3
【架构师(第三篇)】脚手架开发之掌握Lerna操作流程
4
【架构师(第四篇)】脚手架开发之Lerna源码分析
5
【架构师(第五篇)】脚手架之import-local执行流程及简历设计
6
【架构师(第六篇)】脚手架之需求分析和架构设计
7
【架构师(第七篇)】脚手架之准备阶段编写
8
【架构师(第八篇)】脚手架之 commander 框架使用方法
9
【架构师(第九篇)】如何让 Node 环境支持 ES Module
10
【架构师(第十篇)】脚手架之注册命令及架构优化
11
【架构师(第十一篇)】脚手架之命令注册和执行过程开发
12
【架构师(第十二篇)】脚手架之命令行交互工具 inquirer.js 使用方法
13
【架构师(第十三篇)】脚手架之创建项目准备阶段开发
14
【架构师(第十四篇)】脚手架之 egg.js 和 mongodb 的使用
15
【架构师(第十五篇)】脚手架之创建项目模板开发
16
【架构师(第十六篇)】脚手架之创建项目模板的下载与更新
17
【架构师(第十七篇)】脚手架之 ejs 和 glob 的使用
18
【架构师(第十八篇)】脚手架之项目模板的安装
19
【架构师(第十九篇)】脚手架之组件库模板开发
20
【架构师(第二十篇)】脚手架之自定义模板及第一阶段总结
21
【架构师(第二十一篇)】编辑器开发之需求分析和架构设计
22
【架构师(第二十二篇)】编辑器开发之项目整体搭建
23
【架构师(第二十三篇)】编辑器开发之画布区域组件的渲染
24
【架构师(第二十四篇)】编辑器开发之添加模版到画布
25
【架构师(第二十五篇)】编辑器开发之属性编辑区域表单渲染
26
【架构师(第二十六篇)】编辑器开发之属性编辑同步渲染
27
【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门
28
【架构师(第二十八篇)】 测试工具 Vue-Test-Utils 基础语法
29
【架构师(第二十九篇)】Vue-Test-Utils 触发事件和异步请求
30
【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
31
【架构师(第三十一篇)】前端测试之 TDD 的开发方式
32
【架构师(第三十二篇)】 通用上传组件开发及测试用例
33
【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
34
【架构师(第三十四篇)】 业务组件库开发之 vue3 的插件系统
35
【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
36
【架构师(第三十六篇)】 业务组件库开发之发布到 NPM
37
【架构师(第三十七篇)】 服务端开发之后端框架与数据库技术选型
38
【架构师(第三十八篇)】 服务端开发之本地安装最新版 MySQL 数据库
39
【架构师(第三十九篇)】 服务端开发之连接 MySQL 数据库
40
【架构师(第四十篇)】 服务端开发之连接 Mongodb 数据库
41
【架构师(第四十一篇)】 服务端开发之安装并连接 Redis数据库
42
【架构师(第四十二篇)】 服务端开发之常用的登录鉴权方式
43
【架构师(第四十三篇)】 服务端开发之单元测试和接口测试
44
【架构师(第四十四篇)】 服务端开发之 pm2 和 nginx 介绍
45
【架构师(第四十五篇)】 服务端开发之认识 Github actions
46
【架构师(第四十六篇)】 服务端开发之安装 Docker
47
【架构师(第四十七篇)】 服务端开发之认识 Docker
48
【架构师(第四十八篇)】 服务端开发之 Dockerfile
49
【架构师(第四十九篇)】 服务端开发之认识 Docker-compose
50
【架构师(第五十篇)】 服务端开发之自动发布到测试机
清单首页架构文章详情

【架构师(第十篇)】脚手架之注册命令及架构优化


脚手架之命令注册和执行过程开发

将收获什么

  • 如何设计一个高性能脚手架
  • Node 多进程开发
  • JavaScript 对面对象的实战技巧
  • Node 多进程原理

主要内容

  • 图解高性能脚手架架构设计方法
  • 封装通用的 CommandPackage
  • 基于缓存 + Node 多进程实现动态命令加载和执行
  • 将业务逻辑和脚手架逻辑彻底解耦
  • Node 多进程 child_process 源码分析

关键词

  • 高性能/可扩展的脚手架 - 利用缓存提升脚手架性能并解耦业务逻辑
  • 面向对象 - 利用 Class 完成 JavaScript 面向对象编程
  • Node 多进程 - 深入 Node 多进程原理

注册命令

安装依赖

代码语言:javascript
复制
lerna add commander core/cli/
代码语言:javascript
复制
// core\cli\lib\index.js
// 引入封装的 init 命令
const init = require('@hzw-cli-dev/init');
// 创建一个 commander 实例
const program = new commander.Command();

/**
 * @description: 注册命令
 * @param {*}
 * @return {*}
 */
function registerCommand() {
  // 注册 debug 模式
  program
    .name(Object.keys(pkg.bin)[0])
    .usage('<command> [options]')
    .version(pkg.version)
    .option('-D, --debug', '是否开启调试模式', false);

  // 注册命令
  program
    .command('init [projectName]')
    .option('-f, --force', '是否强制初始化项目')
    .action(init);

  // 获取参数
  const params = program.opts();

  // 注册 debug 命令
  program.on('option:debug', () => {
    if (params.debug) {
      process.env.LOG_LEVEL = 'verbose';
    } else {
      process.env.LOG_LEVEL = 'info';
    }
    // 设置 log 的等级
    log.level = process.env.LOG_LEVEL;
    log.verbose('test debug');
  });

  // 监听未注册的所有命令
  program.on('command:*', (obj) => {
    const commands = program.commands.map((cmd) => cmd.name());
    log.info(colors.red('未知的命令 ' + obj[0]));
    if (commands.length > 0) {
      log.info(colors.blue('支持的命令 ' + commands.join(',')));
    }
  });

  //解析参数
  program.parse(process.argv);

  // 判断是否输入命令 显示帮助文档
  if (program.args &amp;&amp; program.args.length < 1) {
    program.outputHelp();
    console.log();
  }
}

新建一个包,把 init 命令的业务代码抽离处理,方便后续维护。

代码语言:javascript
复制
lerna create @hzw-cli-dev/init
代码语言:javascript
复制
// command\init\lib\index.js

function init(projectName, cmdObj) {
  console.log('init', projectName, cmdObj);
}
module.exports = init;

当前脚手架架构痛点分析

当前脚手架架构如下图

这样的架构设计已经可以满足一般的脚手架需求,但是有以下的问题

  • 脚手架安装速度慢: 所有 package 都集成在 cli 里,因此当命令较多时,会减慢脚手架的安装速度。
  • 灵活性差: init 命令只能使用 @hzw-cli-dev/init 包,对于大公司而言,每个团队的 init 命令可能都各不相同,可能需要 init 命令动态化,如:
    • A 团队使用 @hzw-cli-dev/init-a 作为初始化模块
    • B 团队使用 @hzw-cli-dev/init-b 作为初始化模块
    • C 团队使用 @hzw-cli-dev/init-c 作为初始化模块

这个时候对我们的架构设计提出了挑战,要求我们能够动态加载 init 模块,这将增加架构的复杂度,但大大提升脚手架的可扩展性,将脚手架框架和业务逻辑解耦。

脚手架架构优化

当前脚手架执行流程如下图

优化后流程图如下

脚手架命令动态加载功能架构设计图

下一篇
举报
领券