如何开发一个极简的前端脚手架
背景
虎妞同学，在工作中，遇到了重构旧运营系统的技术需求，旧系统都是前后端不分离的项目
因此对于前端需要一套整体的后台管理框架。
功能上，要满足登录，权限管理，菜单配置，用户管理，字典管理，角色管理等后台管理系统的常规功能，
技术上，要使用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')流程图示意
最后
在开发完这个脚手架之后，其实发现开发一个脚手架很简单，都是调用的三方库，难点在于怎么接入公司业务。对公司的统一模版如何管理和配置。
有脚手架的前提是有一个统一的项目模版。
现有的项目模版是一次性的，如果拉下来，就无法继续更新了，如果能够把整个项目模版打成一个安装包在项目中安装，这样我们唯一统一的项目模版，有新功能的更新，只需要改一次，其他平台更新依赖就可以了。