组件库脚手架工具开发

一、开发流程

1. 创建项目

# 创建文件夹并进入
mkdir zo-biz-cli && cd zo-biz-cli
# 初始化项目
npm init

2. 安装可能使用到的相关依赖

# 安装 commander 创建命令行界面工具
pnpm add commander --save
# 安装 chalk 命令行美化工具
pnpm add chalk --save
# 安装 inquirer 命令行交互工具
pnpm add inquirer --save
# 安装 ora 命令行loading工具
pnpm add ora --save
# 安装 fs-extra 文件操作工具
pnpm add fs-extra --save

3. 编写代码

• 创建bin目录

# 创建目录
mkdir bin && cd bin
# 创建文件
touch index.js

• package.json文件配置

//添加指令 并配置指令代码路径
 "bin": {
    "zo-biz": "./bin/index.js"
  },

• index.js编码

// 指明脚本的执行环境是 node
#!/usr/bin/env node

// 引入相关依赖
const program = require("commander");
const chalk = require("chalk");
const inquirer = require("inquirer");
const ora = require("ora");
const fs = require("fs-extra");

// 定义命令行参数
program.version("1.0.0");


// [] 非必填 <> 必填
// 添加copy指令（别名：c）
program
  .command(`copy [project-path]`)
  .alias("c")
  .description(`复制组件库到项目目录`)
  .action((projectPath) => {
    // 执行复制指令代码
    require("../lib/copy-lib").copySync(projectPath);
  });


// 添加install指令（别名：i）
program
  .command(`install`)
  .alias("i")
  .description(`安装组件库`)
  .action(() => {
    require("../lib/install-lib").installLib();
  });


// 添加update指令（别名：u）
program
  .command(`update`)
  .alias("u")
  .description(`更新组件库`)
  .action(() => {
    require("../lib/update-lib")();
  });
// 解析命令行参数
program.parse(process.argv);

4. 代码实现逻辑

安装

• 安装指令:

  zo-biz i
  # 或者
  zo-biz install

  该指令会调用install-lib.js方法，实现组件库的安装
• 实现流程
  • 判断组件库是否安装,如果安装询问用户是否重新安装
  • 没有安装或者同意重新安装，询问用户使用哪种方式安装（npm/pnpm/yarn）
  • 根据用户选择的安装方式，调用对应的安装方法 例如：执行pnpm add zo-biz-lib
  • 安装完成之后，询问用户是否需要复制组件库到项目中
  • 用户同意复制，执行复制指令

复制

• 复制指令:

  zo-biz c
  # 或者
  zo-biz copy

  该指令会调用copy-lib.js方法，实现组件库的复制
• 实现流程
  • 判断组件库是否安装,如果没有安装询问是否需要安装组件库
  • 如果用户执行命令时候没有传入路径，让用户填写复制的目标路径
  • 如果目标路径存在，询问用户是否需要覆盖目标路径下的文件
  • 用户同意复制，询问用户复制范围（全部复制/选择复制）
  • 用户选择全部复制，直接将整个组件复制到目标路径下
  • 用户选择选择复制，询问用户需要复制哪些组件
  • 用户选择需要复制的组件，将组件复制到目标路径下

更新

• 更新指令:

  zo-biz u
  # 或者
  zo-biz update

  该指令会调用update-lib.js方法，实现组件库的更新
• 实现流程
  • 判断组件库是否安装,如果没有安装,直接执行安装指令
  • 如果组件库存在，询问用户组件库的更新方式（仅更新组件库文件夹/更新组件库的包）
  • 仅更新组件库文件夹，直接执行复制指令
  • 更新组件库的包，直接执行安装指令

二、项目结构

注：这是一个基础的目录结构，只作为示例

├── bin
│   └── index.js
├── lib
│   ├── copy-lib.js
│   ├── install-lib.js
│   └── update-lib.js
├── package.json
└── README.md

三、使用文档

1. 全局安装zo-biz-cli

npm install -g zo-biz-cli

2. 查看帮助文档

zo-biz -h
# 或者
zo-biz --help

3. 安装组件库

zo-biz i
# 或者
zo-biz install

4. 复制组件库到项目中

# src为组件的复制目标目录  也可忽略
zo-biz c src
# 或者
zo-biz copy src

5. 更新组件库

zo-biz u
# 或者
zo-biz update

四、问题记录

1. node 环境无法获取 pnpm 依赖安装的包的真实路径

• 原因：pnpm 的安装路径是相对路径，无法获取到真实路径
• 解决方法: 通过fs.realpath方法获取 pnpm 包软链的真实地址