虎妞同学,在工作中,遇到了重构旧运营系统的技术需求,旧系统都是前后端不分离的项目
因此对于前端需要一套整体的后台管理框架。
功能上,要满足登录,权限管理,菜单配置,用户管理,字典管理,角色管理等后台管理系统的常规功能,
技术上,要使用vue3,element-ui等主流框架。
很快虎妞同学,就确定了技术框架的选型,并创建了项目仓库,作为项目模版。
在具体业务中,虎妞在创建新项目时,每次手动去克隆项目模版,然后再修改相关参数。
比如env中的系统名称,package.json中的名字,描述和作者。
很快,同事们就发现这种方式的几个问题
虎妞计划,建立一个简单的脚手架,打包成一个npm包,发布到公司私有库中,其他同事只要在全局安装了这个包,就只可以执行命令创建项目,然后输入需要配置的参数,就可以拉下来一个新的项目。
想到这里,思路清晰之后,虎妞说干就干。
首先在掘金上搜索了相关的文章,大同小异,但是需要接入公司的业务中,还需要修改一些内容。
用到的三方依赖库有这些:
"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"
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);
此处使用fs.existsSync 方法判断
此处使用fs.remove 实现
此处主要使用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已经删除原项目");
}
}
}
此处使用了download-git-repo库
此处主要使用Inquirer 库实现
这段代码定义了一个名为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);
}
主要修改三个字段
import {execSync} from "child_process"
packageContent.author = execSync('git config user.name').toString().trim() || ''
这里使用了chalk 库来实现打印日志
export function Log(msg, color = 'blue') {
console.log(chalk[color](msg))
}
Log(`\r\n${projectName}项目已成功创建`, 'white');
Log(`\r\ncd ${projectName}`, 'green')
Log(`npm install`, 'green')
Log(`npm run dev`, 'green')
在开发完这个脚手架之后,其实发现开发一个脚手架很简单,都是调用的三方库,难点在于怎么接入公司业务。对公司的统一模版如何管理和配置。
有脚手架的前提是有一个统一的项目模版。
现有的项目模版是一次性的,如果拉下来,就无法继续更新了,如果能够把整个项目模版打成一个安装包在项目中安装,这样我们唯一统一的项目模版,有新功能的更新,只需要改一次,其他平台更新依赖就可以了。