背景
虎妞同学,在工作中,遇到了重构旧运营系统的技术需求,旧系统都是前后端不分离的项目
因此对于前端需要一套整体的后台管理框架。
功能上,要满足登录,权限管理,菜单配置,用户管理,字典管理,角色管理等后台管理系统的常规功能,
技术上,要使用vue3,element-ui等主流框架。
很快虎妞同学,就确定了技术框架的选型,并创建了项目仓库,作为项目模版。
开发中遇到的问题
在具体业务中,虎妞在创建新项目时,每次手动去克隆项目模版,然后再修改相关参数。
比如env中的系统名称,package.json中的名字,描述和作者。
很快,同事们就发现这种方式的几个问题
- 手动修改配置容易出现漏改
- 每次克隆项目太过麻烦
- 模版项目的优化无法同步
解决方案
虎妞计划,建立一个简单的脚手架,打包成一个npm包,发布到公司私有库中,其他同事只要在全局安装了这个包,就只可以执行命令创建项目,然后输入需要配置的参数,就可以拉下来一个新的项目。
想到这里,思路清晰之后,虎妞说干就干。
首先在掘金上搜索了相关的文章,大同小异,但是需要接入公司的业务中,还需要修改一些内容。
相关依赖库
用到的三方依赖库有这些:
- chalk: 用于在控制台输出彩色的文本,使输出信息更加清晰易读。
- commander: 是一个命令行接口工具,可以轻松地创建命令行应用程序,并解析命令行参数。
- dotenv: 用于加载环境变量,从而避免将配置敏感信息硬编码到代码中。
- download-git-repo: 用于从 Git 仓库下载文件或整个仓库,支持多种协议(如 HTTP、SSH)和分支。
- fs-extra: 扩展了 Node.js 原生的文件系统模块(fs),提供了更多的方法,如复制、移动、删除等,方便文件的操作。
- inquirer: 提供了一个交互式命令行界面,可以方便地与用户进行交互,获取输入数据。
- ora: 用于在控制台显示进度条或者一些符号,表示正在进行某个耗时的操作,提高用户体验。
"chalk": "4.0.0", "commander": "10.0.0", "dotenv": "^16.1.4", "download-git-repo": "3.0.2", "fs-extra": "11.1.0", "handlebars": "^4.7.7", "inquirer": "8.0.0", "ora": "6.1.2"
流程
1.新增help 指令和 create指令
- help 意思为查看帮助,
- create 为创建项目命令,接受一个参数,该参数为要新建的项目名字。
- -f 为强制覆盖命令
import { program } from 'commander' program .name("cf-cli") .usage(`<command> [option]`) .version(`cf-cli ${packageInfo.version}`); program .command("create <project-name>") // 增加创建指令 .description("创建新项目") // 添加描述信息 .option("-f, --force", "强制覆盖") // 强制覆盖 .action(async (projectName, cmd) => { // 处理用户输入create 指令附加的参数 await create(projectName, cmd); }); program.parse(process.argv);
2.当用户执行cf-cli create aaa 时,就会在开始当前目录下新建一个aaa 的项目。
3.优先判断当前目录下是否存在同名目录,
- 若存在执行第4条,
- 若不存在走第7条,请求项目模版。
此处使用fs.existsSync 方法判断
4.判断指令中是否使用了-f 参数
- 如果使用-f 或者--force 则直接删除重命目录
- 若没有使用强制覆盖命令,则继续执行第5条,走下一步判断
此处使用fs.remove 实现
5.询问当前用户是否要覆盖当前目录
- 若覆盖,则删除原有重名目录后,执行第6步。
- 若选择取消,则中断流程
此处主要使用Inquirer 库实现
import fs from "fs-extra" import Inquirer from "inquirer" const cwd = process.cwd(); const targetDirectory = path.join(cwd, projectName); if (fs.existsSync(targetDirectory)) { // 判断是否使用 --force 参数 if (options.force) { // 删除重名目录(remove是个异步方法) await fs.remove(targetDirectory); } else { let {isOverwrite} = await new Inquirer.prompt([ // 返回值为promise { name: "isOverwrite", // 与返回值对应 type: "list", // list 类型 message: "项目已经存在,请选择", choices: [ {name: "覆盖", value: true}, {name: "取消", value: false}, ], }, ]); // 选择 Cancel if (!isOverwrite) { console.log("\r\n已取消"); return; } else { // 选择 Overwirte ,先删除掉原有重名目录 await fs.remove(targetDirectory); console.log("\r\n已经删除原项目"); } } }
6.从gitlab 仓库拉取需要代码
此处使用了download-git-repo库
7.拉取成功后,询问用户,要求输入系统的中文标题。
此处主要使用Inquirer 库实现
8.获取到中文标题后,注入项目模版的env和package.json
修改env
这段代码定义了一个名为generateEnv的函数,它接受三个参数:
projectName表示项目名称,name表示要生成的.env文件的名称(例如.env.production),title表示应用的标题。
该函数的主要功能是读取指定的.env文件(路径由projectName和name组成),并将其中的VITE_APP_TITLE变量的值设置为传入的title,最后将修改后的内容覆盖原文件中的内容。
具体来说,它通过使用dotenv.parse解析.env文件的内容,然后将VITE_APP_TITLE的值替换为传入的title,接着将其余变量的键值对格式化为字符串,并写入到文件中。
generateEnv(projectName, '.env.production', '后台管理系统') function generateEnv(projectName, name, title) { const envFilePath = `${projectName}/${name}`; const envConfig = dotenv.parse(fs.readFileSync(envFilePath)); envConfig.VITE_APP_TITLE = title; const newEnvContent = Object.entries(envConfig) .map(([key, value]) => `${key}=${value}`) .join('\n'); fs.writeFileSync(envFilePath, newEnvContent); }
修改package.json
主要修改三个字段
- name 取创建项目时的名字
- description 取系统的中文名字
- author 取当前git 的用户名
- 这里使用了child_process库
import {execSync} from "child_process" packageContent.author = execSync('git config user.name').toString().trim() || ''
9.打印成功的消息
这里使用了chalk 库来实现打印日志
export function Log(msg, color = 'blue') { console.log(chalk[color](msg)) }
10.输出提示,结束流程。
Log(`\r\n${projectName}项目已成功创建`, 'white'); Log(`\r\ncd ${projectName}`, 'green') Log(`npm install`, 'green') Log(`npm run dev`, 'green')
流程图示意
最后
在开发完这个脚手架之后,其实发现开发一个脚手架很简单,都是调用的三方库,难点在于怎么接入公司业务。对公司的统一模版如何管理和配置。
有脚手架的前提是有一个统一的项目模版。
现有的项目模版是一次性的,如果拉下来,就无法继续更新了,如果能够把整个项目模版打成一个安装包在项目中安装,这样我们唯一统一的项目模版,有新功能的更新,只需要改一次,其他平台更新依赖就可以了。