当我们在开发的时候，时常会在创建项目的时候重复很多操作，比如下载相同的依赖(锁定依赖版本)、封装网络请求、封装路由、配置代码提示/检查、配置vite/webpack打包、配置自动导入(auto-import)、配置项目基础结构、注册全局指令等，有非常多重复的步骤其实都是可以被省略的，或者说开发者应该专注于业务的实现，而不是在这些上浪费大量的时间，所以我们可以将以上重复且关键的步骤提炼出来放在一个仓库里，然后创建一个属于我们自己的脚手架并放在npm上，通过全局安装这个脚手架，使用脚手架指令就可以直接下载我们存在仓库里面的基础模版了。
一、创建脚手架
1、初始化脚手架
npm init -y2、创建入口文件
mkdir bin
cd bin
touch www.js
//然后进入 www.js 文件 ，将下列代码粘贴上去
#! /usr/bin/env node
require('../index.js')3、配置package.json的入口文件
//将以下代码贴入 package.json中
"bin": "bin/www",4、在根目录创建index.js并软链接到全局
touch index.js
cnpm link5、安装依赖（工具）
"axios": "^0.26.1",
"chalk": "^4.0.0",
"commander": "^9.0.0",
"download-git-repo": "^3.0.2",
"figlet": "^1.5.2",
"fs-extra": "^10.0.1",
"gitee-repo": "^0.0.2",
"inquirer": "^8.2.1",
"ora": "^5.0.0"6、创建配置文件
我已经将所要配置的文件都放在代码里面的，直接贴进去就行，当然也可以在我的基础上加以改造，可以让脚手架变的更加完善。
mkdir lib
touch api.js create.js Creator.js util.js
//index.js
const program = require("commander");
const chalk = require("chalk");
const figlet = require("figlet");
program
.command("create <project-name>") //增加创建指令
.description("create a new project") //添加描述信息
.option("-f, --force", "overwrite target directory if it exists") //强制覆盖
.action((projectName, cmd) => {
// 处理用户输入create 指令附加的参数
require("./lib/create")(projectName, cmd);
});
program
.command("config [value]")
.description("inspect and modify the config")
.option("-g, --get <key>", "get value by key")
.option("-s, --set <key> <value>", "set option[key] is value")
.option("-d, --detede <key>", "delete option by key")
.action((value, keys) => {
// 处理用户输入create 指令附加的参数
console.log(value, keys);
});
program.on("--help", function () {
console.log(
"\r\n" +
figlet.textSync("当输入 --help 所展示的颜文字，可以自定义", {
font: "3D-ASCII",
horizontalLayout: "default",
verticalLayout: "default",
width: 80,
whitespaceBreak: true,
})
);
// 前后两个空行调整格式，更舒适
console.log();
console.log(
`Run ${chalk.cyan(
"自定义颜文字 <command> --help"
)} for detailed usage of given command.`
);
console.log();
});
program
.name("自定义脚手架命名")
.usage(`<command> [option]`)
.version(`dragon-cli-frontend ${require("./package.json").version}`);
// 解析用户执行时输入的参数
// process.argv 是 nodejs 提供的属性
// npm run server --port 3000
// 后面的 --port 3000 就是用户输入的参数
program.parse(process.argv);
********************************************************************************
//api.js
const axios = require("axios");
// 拦截全局请求响应
axios.interceptors.response.use((res) => {
return res.data;
});
/**
* 获取模版
* @returns Promise
*/
async function getZhuRongRepo() {
//这里我填写是gitee的
return axios.get("https://gitee.com/api/v5/users/**这是你gitee的用户名**/repos");
}
/**
* 获取仓库下的版本
* @param {String} repo 仓库名称
* @returns Promise
*/
async function getTagsByRepo(repo) {
return axios.get(`https://gitee.com/api/v5/repos/**这是你gitee的用户名**/${repo}/tags`);
}
module.exports = {
getZhuRongRepo,
getTagsByRepo
}
********************************************************************************
//create.js
const path = require("path");
const fs = require("fs-extra");
const Inquirer = require("inquirer");
const Creator = require("./Creator");
const { loading } = require("./util");
module.exports = async function (projectName, options) {
// 获取当前工作目录
const cwd = process.cwd();
const targetDirectory = path.join(cwd, projectName);
if (fs.existsSync(targetDirectory)) {
if (options.force) {
// 删除重名目录
await fs.remove(targetDirectory);
} else {
let { isOverwrite } = await new Inquirer.prompt([
// 返回值为promise
{
name: "isOverwrite", // 与返回值对应
type: "list", // list 类型
message: "Target directory exists, Please choose an action",
choices: [
{ name: "Overwrite", value: true },
{ name: "Cancel", value: false },
],
},
]);
if (!isOverwrite) {
console.log("Cancel");
return;
} else {
await loading(
`Removing ${projectName}, please wait a minute`,
fs.remove,
targetDirectory
);
}
}
}
// 创建项目
const creator = new Creator(projectName, targetDirectory);
creator.create();
};
********************************************************************************
//Creator.js
const inquirer = require("inquirer");
const downloadGitRepo = require("gitee-repo");
const chalk = require("chalk");
const fs = require("fs-extra");
const util = require("util");
const path = require("path");
const { loading } = require("./util");
const { getZhuRongRepo, getTagsByRepo } = require("./api");
class Creator {
constructor(name, target) {
this.name = name;
this.target = target;
// 转化为 promise 方法
this.downloadGitRepo = util.promisify(downloadGitRepo);
}
// 创建项目部分
async create() {
// 仓库信息 —— 模板信息
let repo = await this.getRepoInfo();
// 标签信息 —— 版本信息
console.log("我是版本信息", repo);
let tag = await this.getTagInfo(repo);
// 下载模板
await this.download(repo, tag);
// 模板使用提示
console.log(`\r\nSuccessfully created project ${chalk.cyan(this.name)}`);
console.log(`\r\n cd ${chalk.cyan(this.name)}`);
console.log(" npm install");
console.log(" npm run serve\r\n");
}
// 获取模板信息及用户选择的模板
async getRepoInfo() {
// 获取组织下的仓库信息
let repoList = await loading(
"waiting for fetching template",
getZhuRongRepo
);
if (!repoList) return;
// 提取仓库名
const repos = repoList.map((item) => item.name);
// 选取模板信息
let { repo } = await new inquirer.prompt([
{
name: "repo",
type: "list",
message: "Please choose a template to create project",
choices: repos,
},
]);
return repo;
}
// 获取版本信息及用户选择的版本
async getTagInfo(repo) {
console.log(repo);
let tagList = await loading(
"waiting for fetching version",
getTagsByRepo,
repo
);
if (!tagList) return;
const tags = tagList.map((item) => item.name);
// 选取模板信息
let { tag } = await new inquirer.prompt([
{
name: "tag",
type: "list",
message: "Please choose a version to create project",
choices: tags,
},
]);
return tag;
}
// 下载git仓库
async download(repo, tag) {
// 模板下载地址
const templateUrl = `gitee:***gitee的用户名***/${repo}${tag ? "#" + tag : ""}`;
// 调用 downloadGitRepo 方法将对应模板下载到指定目录
await loading(
"downloading template, please wait",
this.downloadGitRepo,
templateUrl,
path.resolve(process.cwd(), this.target) // 项目创建位置
);
const packageJsonPath = path.join(
process.cwd() + `/${this.name}`,
"package.json"
);
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
packageJson.name = this.name;
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
}
}
module.exports = Creator;
********************************************************************************
//utils.js
const ora = require("ora");
/**
* 睡觉函数
* @param {Number} n 睡眠时间
*/
function sleep(n) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, n);
});
}
/**
* loading加载效果
* @param {String} message 加载信息
* @param {Function} fn 加载函数
* @param {List} args fn 函数执行的参数
* @returns 异步调用返回值
*/
async function loading(message, fn, ...args) {
const spinner = ora(message);
spinner.start(); // 开启加载
try {
let executeRes = await fn(...args);
spinner.succeed();
return executeRes;
} catch (error) {
spinner.fail("request fail, reTrying");
await sleep(1000);
return loading(message, fn, ...args);
}
}
module.exports = {
loading,
};7、发布脚手架到npm上
1、先 npm login 登陆npm（需要先有npm账号，可以先去npm上创建一个账号）
2、发布npm包 使用 npm push 将当前包传上去（切记npm的源要是国外哪个，不能是国内的）
完成后就可以登陆npm上看见了。
二、发布gitee基础模版标签(否则在创建的时候会失败)
在我们使用脚手架的时候有一步就是选择要下载基础模版的版本，所以我们需要给gitee上的项目打一个标签推上去
//查看标签
git tag
//创建标签
git tag v1.0.0
//或
git tag v1.0.0 -m "添加新功能"
//查看标签
git tag
//v1.0.0
git show v1.0.0
//将标签推送到远程三、源码地址
dragom-cli-frontend：dragon-cli-frontend - npm
![[Shell编程学习路线]——for循环应用技巧 语法和案例](https://img-blog.csdnimg.cn/direct/be4467ce207541fdb175c897344aeb68.png)
