从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架
本篇文章将实现一个名为create-easyest脚手架的开发,只需一个命令npm init easyest就可以将整个组件库开发框架拉到本地。
创建 Cli 包
首先,我们在 packages 目录下新建 cli 目录,同执行pnpm init进行初始化,然后将包名改为create-easyest
这里需要知道的是当我们执行
npm init xxx或者npm create xxx的时候,实际上是执行npx create-xxx,所以当我们执行npm init easyest的时候实际上就是执行npx create-easyest
当我们执行create-easyest时会执行 package.json 下的 bin 对应的路径,因此我们将package.json修改为
{
"name": "create-easyest",
"version": "1.0.0",
"description": "",
"bin": "index.js",
"keywords": [],
"author": "",
"license": "MIT"
}
同时新建 index.js 作为入口文件,注意开头要加上#! /usr/bin/env node
#! /usr/bin/env node
使用 command-line-args 处理用户输入命令
其实处理用户输入参数的插件有很多,比如 CAC,Yargs,Commander.js,command-line-args 等,但是就我看来 command-line-args 使用起来是最简单的,所以这里使用 command-line-args 进行用户参数解析
pnpm add command-line-args
新建一个 cli.js 用于处理我们脚手架的逻辑,这里简单写一个-v 版本命令
import commandLineArgs from "command-line-args";
import { readFile } from "fs/promises";
const pkg = JSON.parse(
await readFile(new URL("./package.json", import.meta.url))
);
//配置命令参数
const optionDefinitions = [{ name: "version", alias: "v", type: Boolean }];
const options = commandLineArgs(optionDefinitions);
if (options.version) {
console.log(`v${pkg.version}`);
}
我们还可以使用 command-line-usage 插件让它为我们提供帮助命令
pnpm add command-line-usage
这里只贴了相关代码
import commandLineArgs from "command-line-args"
import commandLineUsage from "command-line-usage"
...
//帮助命令
const helpSections = [
{
header: 'create-easyest',
content: '一个快速生成组件库搭建环境的脚手架',
},
{
header: 'Options',
optionList: [
{
name: 'version',
alias: 'v',
typeLabel: '{underline boolean}',
description: '版本号',
},
{
name: 'help',
alias: 'h',
typeLabel: '{underline boolean}',
description: '帮助',
}
],
},
];
if (options.help) {
console.log(commandLineUsage(helpSections))
return
}
交互式命令
当我们使用一些脚手架的时候,比如 create-vite,它会让我们一些选项让我们选择
所以我们的脚手架也要有这个功能,但是这个应该怎么实现呢?
其实很简单,我们只需要 prompts 插件即可,它可以配置用户输入哪些东西以及单选还是多选等,首先安装 prompts
pnpm add prompts
然后在 cli.js 中
import prompts from "prompts";
const promptsOptions = [
{
type: "text",
name: "user",
message: "用户",
},
{
type: "password",
name: "password",
message: "密码",
},
{
type: "select", //单选
name: "gender",
message: "性别",
choices: [
{ title: "男", value: 0 },
{ title: "女", value: 1 },
],
},
{
type: "multiselect", //多选
name: "study",
message: "选择学习框架",
choices: [
{ title: "Vue", value: 0 },
{ title: "React", value: 1 },
{ title: "Angular", value: 2 },
],
},
];
const getUserInfo = async () => {
const res = await prompts(promptsOptions);
console.log(res);
};
getUserInfo();
然后我们就可以根据对应的值处理不同的逻辑了,当然我们的脚手架不需要这么多参数,我们改成下面选项即可
const promptsOptions = [
{
type: "text",
name: "project-name",
message: "请输入项目名称",
},
{
type: "select", //单选
name: "template",
message: "请选择一个模板",
choices: [
{ title: "kitty-ui", value: 0 },
{ title: "easyest", value: 1 },
],
},
];
然后我们就可以根据用户的选择来拉取不同的仓库了
拉取远程仓库模板
拉取远程仓库我们可以使用 download-git-repo 工具,然后使用它的 clone 方法即可,同时我们需要安装一个 loading 插件 ora 以及 log 颜色插件 chalk
pnpm add download-git-repo ora chalk
//gitClone.js
import download from "download-git-repo";
import chalk from "chalk";
import ora from "ora";
export default (remote, name, option) => {
const downSpinner = ora("正在下载模板...").start();
return new Promise((resolve, reject) => {
download(remote, name, option, (err) => {
if (err) {
downSpinner.fail();
console.log("err", chalk.red(err));
reject(err);
return;
}
downSpinner.succeed(chalk.green("模板下载成功！"));
resolve();
});
});
};
//cli.js
const remoteList = {
1: "https://gitee.com/geeksdidi/kittyui.git",
2: "https://github.com/qddidi/easyest.git",
};
const getUserInfo = async () => {
const res = await prompts(promptsOptions);
if (!res.name || !res.template) return;
gitClone(`direct:${remoteList[res.template]}`, res.name, {
clone: true,
});
};
然后执行完成后目录下就有我们的模板啦
最后将我们的create-easyest发布即可,发布这里前面已经介绍过,就不多赘述了。这里我已经发布过了,我们随便找个文件夹执行npm create easyest试一下
同时我们发现了easyest项目也被克隆了下来
本篇文章代码地址:如何搭建一个 Cli 脚手架,欢迎star一下??
如果你对Vue3组件库搭建感兴趣的话,可以关注公众号web前端进阶获取完整教程