本篇文章將實(shí)現(xiàn)一個(gè)名為create-easyest腳手架的開發(fā),只需一個(gè)命令npm init easyest就可以將整個(gè)組件庫(kù)開發(fā)框架拉到本地。

創(chuàng)建 Cli 包

首先,我們?cè)?packages 目錄下新建 cli 目錄,同執(zhí)行pnpm init進(jìn)行初始化,然后將包名改為create-easyest

這里需要知道的是當(dāng)我們執(zhí)行npm init xxx或者npm create xxx的時(shí)候,實(shí)際上是執(zhí)行npx create-xxx,所以當(dāng)我們執(zhí)行npm init easyest的時(shí)候?qū)嶋H上就是執(zhí)行npx create-easyest

當(dāng)我們執(zhí)行create-easyest時(shí)會(huì)執(zhí)行 package.json 下的 bin 對(duì)應(yīng)的路徑,因此我們將package.json修改為

{
  "name": "create-easyest",
  "version": "1.0.0",
  "description": "",
  "bin": "index.js",
  "keywords": [],
  "author": "",
  "license": "MIT"
}

同時(shí)新建 index.js 作為入口文件,注意開頭要加上#! /usr/bin/env node

#! /usr/bin/env node

使用 command-line-args 處理用戶輸入命令

其實(shí)處理用戶輸入?yún)?shù)的插件有很多,比如 CAC,Yargs,Commander.js,command-line-args 等,但是就我看來 command-line-args 使用起來是最簡(jiǎn)單的,所以這里使用 command-line-args 進(jìn)行用戶參數(shù)解析

pnpm add command-line-args

新建一個(gè) cli.js 用于處理我們腳手架的邏輯,這里簡(jiǎn)單寫一個(gè)-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))
);
//配置命令參數(shù)
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

這里只貼了相關(guān)代碼

import commandLineArgs from "command-line-args"
import commandLineUsage from "command-line-usage"
...

//幫助命令
const helpSections = [
  {
    header: 'create-easyest',
    content: '一個(gè)快速生成組件庫(kù)搭建環(huán)境的腳手架',
  },
  {
    header: 'Options',
    optionList: [
      {
        name: 'version',
        alias: 'v',
        typeLabel: '{underline boolean}',
        description: '版本號(hào)',
      },
      {
        name: 'help',
        alias: 'h',
        typeLabel: '{underline boolean}',
        description: '幫助',
      }
    ],
  },
];


if (options.help) {
  console.log(commandLineUsage(helpSections))
  return
}

交互式命令

當(dāng)我們使用一些腳手架的時(shí)候,比如 create-vite,它會(huì)讓我們一些選項(xiàng)讓我們選擇

所以我們的腳手架也要有這個(gè)功能,但是這個(gè)應(yīng)該怎么實(shí)現(xiàn)呢?

其實(shí)很簡(jiǎn)單,我們只需要 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: "選擇學(xué)習(xí)框架",
    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();

然后我們就可以根據(jù)對(duì)應(yīng)的值處理不同的邏輯了,當(dāng)然我們的腳手架不需要這么多參數(shù),我們改成下面選項(xiàng)即可

const promptsOptions = [
  {
    type: "text",
    name: "project-name",
    message: "請(qǐng)輸入項(xiàng)目名稱",
  },
  {
    type: "select", //單選
    name: "template",
    message: "請(qǐng)選擇一個(gè)模板",
    choices: [
      { title: "kitty-ui", value: 0 },
      { title: "easyest", value: 1 },
    ],
  },
];

然后我們就可以根據(jù)用戶的選擇來拉取不同的倉(cāng)庫(kù)了

拉取遠(yuǎn)程倉(cāng)庫(kù)模板

拉取遠(yuǎn)程倉(cāng)庫(kù)我們可以使用 download-git-repo 工具,然后使用它的 clone 方法即可,同時(shí)我們需要安裝一個(gè) 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,
  });
};

然后執(zhí)行完成后目錄下就有我們的模板啦

最后將我們的create-easyest發(fā)布即可,發(fā)布這里前面已經(jīng)介紹過,就不多贅述了。這里我已經(jīng)發(fā)布過了,我們隨便找個(gè)文件夾執(zhí)行npm create easyest試一下

同時(shí)我們發(fā)現(xiàn)了easyest項(xiàng)目也被克隆了下來

本篇文章代碼地址:如何搭建一個(gè) Cli 腳手架,歡迎star一下??

如果你對(duì)Vue3組件庫(kù)搭建感興趣的話,可以掃碼關(guān)注公眾號(hào)web前端進(jìn)階獲取完整教程

文章來源地址http://www.zghlxwxcb.cn/news/detail-482049.html

到了這里，關(guān)于從0搭建Vue3組件庫(kù)(十):如何搭建一個(gè) Cli 腳手架的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！