【从0-1实现一个前端脚手架】

介绍

为什么需要脚手架？

脚手架本质就是一个工具，作用是能够让使用者专注于写代码，它可以让我们只用一个命令就生成一个已经配置好的项目，而不用我们再花时间去配置和安装相关依赖，可以在很大程度上提升我们的开发效率。比如我们常用的create-vue和create-react-app就是脚手架，很多大厂也都有自己的脚手架。

一个脚手架应该具备哪些功能？

我们以vue官方的脚手架create-vue为例来分析下一个脚手架应该具备哪些功能？

1. 运行命令创建项目：npm create vue@latest
2. 用户根据自己需要选择一些配置项
   
3. 根据选择的配置项会生成一个模版项目
   

通过分析create-vue，我们可以知道，一个脚手架如果想要创建一个项目，最少要有以下两点功能：

1. 可以通过命令行和用户交互
2. 根据交互的结果去生成对应的模版项目

脚手架实现

初始化项目

1. 在电脑终端执行以下命令

mkdir kfc-vme50
cd kfc-vme50
npm init -y

2. 在根目录下创建bin/index.js文件作为入口文件，并添加如下代码，第一行注解是为了告诉操作系统，本文件用node执行

#!/usr/bin/env node
console.log('肯德基疯狂星期四v我50')

3. 在package.json中添加bin字段

"bin": "/bin/index.js"

4. 在根目录下执行npm link将项目链接到本地环境，就可以实现kfc-vme50命令全局调用
5. 运行kfc-vme50并查看控制台输出
   

实际上，npm link将这个包装到了全局，我们在全局执行kfc-vme50系统会在package.json中找到bin声明，bin指定的文件会被获取到，然后用node执行这个文件

相关依赖

实现一个脚手架，通常会用到以下依赖包

1. commander：命令行处理工具，安装：npm install commander

#!/usr/bin/env node// #! 是shebang的标识，告诉操作系统这是一个脚本文件。
// /usr/bin/env 是一个程序，用来查找环境变量中定义的程序路径。在这个例子中，它用来查找node的路径。
// node 是Node.js的可执行文件名，它是运行JavaScript代码的运行时环境。// 它用于处理命令行参数;
const { program } = require("commander");/***  .name 命令名称出现在帮助中，也用于定位独立的可执行子命令。*  .usage 通过这个选项可以修改帮助信息的首行提示，即修改usage提示*/program.name("kfc-vme50-cli").usage("<command> [option]");/*** 「选项」 定义选项* 使用.option()方法来定义选项，同时可以附加选项的简介。每个选项可以定义一个短选项名称（-后面接单个字符）*    一个长选项名称（--后面接一个或多个单词），使用逗号、空格或|分隔。*    有两种最常用的选项，一类是 boolean 型选项，选项无需配置参数，*    另一类选项则可以设置参数（使用尖括号声明在该选项后，如--expect <value>）。*    如果在命令行中不指定具体的选项及参数，则会被定义为undefined*/program.option("-d, --debug", "output extra debugging").option("-s, --small", "small pizza size").option("-p, --pizza-type <type>", "flavour of pizza");/*** 「命令」 通过.command()或.addCommand()可以配置命令，* .command()的第一个参数为命令名称。命令参数可以跟在名称后面，也可以用.argument()单独指定。* 参数可为必选的（尖括号表示）、可选的（方括号表示）或变长参数（点号表示，如果使用，只能是最后一个参数）。* ----------------------------------------------------------------* description 出现在命令的帮助中。* action 命令触发后的回调函数 [命令行的参数]*/program.command("clone <source> [destination]").description("clone a repository into a newly created directory").action((source, destination) => {console.log("clone command called");console.log(source, destination);});/** * 「parse」解析命令行参数* program.parse 它的作用是解析 process.argv 数组，将命令行参数转换为可操作的对象。* process.argv 是 Node.js 中的一个全局变量，它是一个数组，包含了命令行启动脚本时传递给 Node.js 进程的参数。数组的第一个元素 process.argv[0] 总是 node， 表示 Node.js 可执行文件的路径 （安装路径）接下来的元素是脚本文件的路径，即你正在运行的 JavaScript 文件的路径。之后的元素是传递给脚本的命令行参数process可以理解为node的环境变量，argv是用户在控制台输入的命令
*/
program.parse(process.argv);/*** 「opts」获取用户输入的![请添加图片描述](https://i-blog.csdnimg.cn/direct/b2cb8c1bd37a4dfb8909597ff262e39c.jpeg)
命令行参数* 解析后的选项可以通过Command对象上的.opts()方法获取，同时会被传递给命令处理函数。*/
const options = program.opts();
console.log(options);console.log("肯德基疯狂星期四v我500");

打印process.argv结果如下（注意，截图的指令为kfc-vme50-cli）：


使用上面定义好的clone命令

并且执行kfc-vme50-cli --help可以看到我们刚才定义的命令

2. chalk：命令行输出美化工具，安装：npm install chalk@4.0.0

#!/usr/bin/env node// 重要提示：Chalk 5 部分是 ESM。如果您想将 Chalk 与 TypeScript 或构建工具一起使用，您现在可能需要使用 Chalk 4/**
ESM 是 "ECMAScript Module" 的缩写，它指的是一种 JavaScript 模块的规范，允许开发者将代码分割成可重用的模块。
ESM 是现代 JavaScript 的一个特性，它支持静态模块的导入和导出，这意味着模块的依赖关系可以在编译时就确定下来，从而提高代码的加载和执行效率。
然而，ESM 也有它的限制，比如它不支持 CommonJS 模块中的 require() 函数，而是使用 import() 来动态加载模块。
此外，ESM 需要在支持 ESM 的环境中使用，比如现代浏览器或者使用 Babel 等工具转换的 Node.js 环境。*/const chalk = require("chalk");// 颜色
console.log(chalk.yellow("Welcome"));
// 加粗
console.log(chalk.red.bold("Welcome"));
// 背景色
console.log(chalk.yellow.bold.bgBlue("Welcome"));

3. inquirer：命令行交互工具，安装：npm install inquirer@8.0.0

#!/usr/bin/env node
/*** !警告] Inquirer v9 及更高版本是 esm 模块，* 这意味着您不能再使用 commonjs 语法 require('inquirer') * 或者，如果您需要 commonjs 模块，则应该依赖旧版本，直到准备好升级环境*/
const inquirer = require("inquirer");/*** inquirer.prompt(questions, answers) -> promise* 启动提示界面（查询会话）*    questions (Array) 包含 Question 对象（使用反应式接口，还可以传递 Rx.Observable 实例）*    答案（对象）包含已回答问题的值。询问者将避免询问此处已提供的答案。默认值 {}。**「Question对象」 问题对象是包含问题相关值的哈希type  （字符串）提示的类型。【input, number, confirm, list, rawlist, expand, checkbox, password, editor】name：（字符串）将答案存储在答案哈希中时使用的名称。如果名称包含句点，它将在答案哈希中定义路径。message：（字符串|函数）要打印的问题。如果定义为函数，第一个参数将是当前询问者会话的答案。默认为 name 的值（后跟冒号）default：（字符串|数字|布尔值|数组|函数）未输入任何内容时使用的默认值，或返回默认值的函数。如果定义为函数，第一个参数将是当前询问者会话的答案**/inquirer.prompt([// 将你的问题放在这{type: "input",name: "food",message: "你吃啥",default: "披萨",},{type: "confirm",name: "hot",message: "吃不吃辣",default: false,},]).then((answers) => {//使用用户反馈。。。无论什么结果console.log(answers);}).catch((error) => {if (error.isTtyError) {// 无法在当前环境中呈现提示} else {//其他问题}});

就是用来定义询问用户操作的命令，使用如下：

4. ora：终端loading美化工具，安装：npm install ora@5.0.0，更高版本是esm模块，不能使用require引入

#!/usr/bin/env node
const ora = require("ora");// 启动旋转器。返回实例。如果提供了文本，则设置当前文本。
const spinner = ora("Loading unicorns").start();// 旋转器1s后变为黄色，文案变为：Loading rainbows
setTimeout(() => {spinner.color = "yellow";spinner.text = "Loading rainbows";
}, 1000);// 停止旋转器，将其更改为绿色 ✔ 并保留当前文本或文本（如果提供）。返回实例。请参阅下面的 GIF。
// setTimeout(() => {
//   spinner.succeed("succeed");
// }, 2000);// 停止旋转器，将其更改为红色 ✖ 并保留当前文本或文本（如果提供）。返回实例。
setTimeout(() => {spinner.fail("fail");
}, 2000);

5. git-clone：下载项目模版工具，安装：npm install git-clone
6. figlet：终端生成艺术字，安装：npm insatll figlet

#!/usr/bin/env node
var figlet = require("figlet");// 将 Figlet 对象作为函数调用是调用文本函数的简写。此方法允许您从文本创建 ASCII 艺术。
// 输入文本 - 要转换为 ASCII 艺术的文本字符串。
// 选项 - 指示字体名称的字符串或选项对象（如下所述）
// 回调 - 使用生成的 ASCII Art 执行的函数。figlet("Hello World!!", function (err, data) {if (err) {console.log("Something went wrong...");console.dir(err);return;}console.log(data);
});// 该方法是上述方法的同步版本
// 输入文本 - 要转换为 ASCII 艺术的文本字符串。
// 字体选项 - 指示字体名称的字符串或选项对象（如下所述）。
console.log(figlet.textSync("Boo!", {font: "Ghost", //类型：字符串 默认值：'标准' 指示要使用的 Figlet 字体的字符串值。horizontalLayout: "default", //指示要使用的水平布局的字符串值verticalLayout: "default", //指示要使用的垂直布局的字符串值width: 80, //宽度whitespaceBreak: true, //此选项与“宽度”结合使用。如果此选项设置为 true，则库在限制宽度时将尝试在空白处分解文本。})
);

7. fs-extra：用来操作本地目录，安装：npm run fs-extra

实现脚手架

#!/usr/bin/env node// 操作终端命令行
const { program } = require("commander");
// 艺术字
const figlet = require("figlet");
// 操作文件
const fs = require("fs-extra");
// 获取路径
const path = require("path");
// 命令行交互
const inquirer = require("inquirer");
// 彩色输出
const chalk = require("chalk");
//控制台loadding
const ora = require("ora");// clone 项目
const gitClone = require("git-clone");// 项目仓库
const projectList = {vue: "https://gitee.com/y_project/RuoYi-Vue.git",react: "https://gitee.com/whiteshader/ruoyi-react.git","react&ts": "https://gitee.com/whiteshader/ruoyi-react.git","vue&ts": "https://gitee.com/lyforvue/ruoyi_vue3_ts.git",
};// 修改帮助信息的首行展示
program.usage("<command> [options]");// 版本号
program.version(`v${require("../package.json").version}`);// 艺术字展示 监听 help添加提示信息
program.on("--help", function () {console.log(figlet.textSync("kfc vme50", {font: "Ghost",horizontalLayout: "default",verticalLayout: "default",width: 100,whitespaceBreak: true,}));
});// 创建项目的命令
program.command("create <app-name>") // 创建项目的命令 name必填.description("创建新项目") //描述//执行命令后的回调【命令后的值，】.action(async function (name, option) {//创建一个名为name的文件夹，把我们模板项目的代码都放到文件夹下// 1. 先判断有没有名为name的文件夹const cwd = process.cwd(); //获取命令执行的文件目录// 创建项目的位置const targetPath = path.join(cwd, name);// 如果文件夹存在if (fs.existsSync(targetPath)) {const res = await inquirer.prompt([{name: "action",type: "list",message: "是否覆盖已有文件夹？",choices: [{name: "YES",value: true,},{name: "NO",value: false,},],},]);//不覆盖 直接返回，让用户取一个新的名字再创建if (!res.action) return;fs.remove(targetPath);console.log(chalk.red("已删除之前的文件夹"));}//新建项目const res = await inquirer.prompt([{name: "type",type: "list",message: "请选择使用的框架",choices: [{name: "Vue",value: "vue",},{name: "React",value: "react",},],},{name: "ts",type: "list",message: "是否使用ts项目",choices: [{name: "YES",value: true,},{name: "NO",value: false,},],},]);// 是否为tsconst rep = res.type + (res.ts ? "&ts" : "");// 拉取项目模板const spinner = ora("正在加载项目模板...").start();gitClone(projectList[rep], //拉取路径targetPath, //保存路径//分支{checkout: "master",},//回调函数(err) => {if (!err) {fs.remove(path.resolve(targetPath, ".git"));spinner.succeed("项目模板加载完成！");console.log("now run:");console.log(chalk.green(`\n  cd ${name}`));console.log(chalk.green("  npm install"));console.log(chalk.green(`  npm run ${res.type === "react" ? "start" : "dev"}\n`));} else {spinner.fail(chalk.red("项目模板加载失败，请重新获取！", err));}});});//解析控制台参数
program.parse(process.argv);

发布

1. npm官网注册npm账号
2. 在本地登录并发布

# 登录刚注册的账号
npm login
Username: 用户名
Password: 密码
Email: 注册邮箱
Enter one-time password: 一次性密码  邮箱会收到邮件# 在我们脚手架的根目录下执行发布命令
npm publish

注意：

1. 登录和发包前一定要先查看npm的源，需要修改为https://registry.npmjs.org/
2. 在发布时包名不能重复，所以可以先在npm官网搜索下看看有没有存在的包，如果出现403错误可能是包名和线上的包重复了，修改package.json中的name即可
3. 如果以后要更新包，更新package.json的version，再发布一下即可
4. 在npm官网上为你的包添加readme
5. 登陆npm官网可以在setting中删除你自己发的包