脚手架工具

我的脚手架

将模板发布到 npm 私库，同步备份 github 私库。

开发管理后台，维护模板，新增和修改。

开发 serve 端提供 API。

我的常用模板

• 管理后台 - 内部综合平台
• 管理后台 - 奥印平台
• H5 - vue3
• H5 - react

架构

痛点分析：

• 创建项目/组件时，存在大量重复代码拷贝:快速复用已有沉淀
• 协同开发时，由于 git 操作不规范，导致分支混乱，操作耗时:制定标准的 git 操作规范并集成到脚手架
• 发布上线耗时，而且容易出现各种错误:定制标准流程混合规范并集成到脚手架

需求分析：

• 通用的研发脚手架
• 通用的项目/组件创建能力
  • 模板支持制定，制定后能够发布生效
  • 模板支持快速接入，极低的接入成本
• 通用的项目/组件发布能力
  • 发布过程自动完成标准的 git 操作
  • 发布成功后自动删除开发分支并创建 tag
  • 发布后自动完成云构建、CDN、域名绑定
  • 发布过程支持测试/正式两种模式

脚手架的执行原理

脚手架框架

脚手架框架：Yargs、commander

Yargs

commander

命令执行流程

启动阶段

动态加载 initCommand

架构设计

执行流程图

架构背后的思考

1. 可扩展：能够快速复用到不同团队，适应不同团队之间的差异
2. 低沉本：在不改动脚手架源码的情况下，能够低成本的新增模板
3. 高性能：控制存储空间，安装充分利用 Node 多进程提升安装性能

准备阶段

主要处理参数解析，检查安装环境，采集项目基本信息

本地开发调试

在 Node 的 bin 目录下配置环境变量执行本地命令，将环境变量链接到实际文件bin/index.js。

将本地命令添加到 Node 环境变量中

1. 先找到 Node 文件目录

which node
# /Users/cass/.nvm/versions/node/v16.16.0/bin/node

2. 进入 bin 文件夹

cd /Users/cass/.nvm/versions/node/v16.16.0/bin

3. 使用ls -la可以查看到所有命令具体执行的文件

ls -la

4. 使用 npm link 创建本地脚手架

5. 注意: 执行npm link的包 package.json 里面要有bin

"bin": {
  "lc-cli": "bin/index.js"
}

代码

本地开发

每一个命令都是一个包，未发布上线之前，添加--targetPath，测试脚手架运行，使用本地init包：

imooc-cli-dev init test-project --targetPath /Users/cass/Desktop/code/learning/web-architect/lc-imooc-cli-dev/packages/init --force --debug

使用 lerna 在模块中安装包

lerna add inquirer commands/init/

可能出现的问题

跟着学习资料开发的代码在文件目录划分上是有问题的，破坏了 lerna 的文件结构，导致安装模块的时候出现问题，也无法使用很多 lerna 命令。正式版本使用 lerna 推荐的目录

Error: Cannot find module '@lc-imooc-cli-dev/log'

使用lerna add安装包之后，会导致本地引入的包找不到，需要重新npm install