理解脚手架
- 脚手架是什么？
答：脚手架只是一个工具，类似webpack、rollup等，只是为了实现或者解决某个、某些问题而出现
- 为什么会有脚手架，它的出现解决了什么痛点、难点？
答：提升效率、减少复制粘贴可能带来的一些问题、降低前端开发人员搭建项目框架的成本等
脚手架核心逻辑的三个阶段
- 创建拉取代码的
命令、选项配置 - 定义问题，获取到答案后，
修改package.json文件 - 下载代码到
目标目录
第一阶段-主要核心包 commander 辅助包 path
import { program } from "commander";
import path from "path";
program.command("create <name>").description("创建项目存放的目录名称").action((name) => {
const downloadPath = path.join(process.cwd(), name); // 得到目标目录路径
})
第二阶段-主要核心包 inquirer
import inquirer from "inquirer";
inquirer.prompt([
{
name: "author",
message: "作者名字: ",
},
{
name: "version",
message: "版本号: ",
default: "0.0.1",
},
{
name: "description",
message: "工程描述: ",
}
]).then((res) => {
const { author, version, description } = res; // 拿到用户输入或者默认值
})
第三阶段-主要核心包 download-git-repo 辅助包 path、fs-extra
import path from "path";
import fs from "fs-extra";
import download from "download-git-repo";
// downloadPath 在第一阶段获取
download("direct:https://gitee.com/luocheng-fu/view-mobile.git", downloadPath, { clone: true }, (err) => {
if (!err) {
const packagePath = path.join(downloadPath, "package.json");
const packageJson = JSON.parse(fs.readFileSync(packagePath).toString());
fs.writeFileSync(
packagePath,
JSON.stringify(packageJson, (k, v) => {
if (["author", "version", "description"].include(k)) {
return 对应的用户输入或者默认值;
}
return true;
}, "\t")
);
// 下载成功
} else {
// 下载失败
}
});
完整代码
#! /usr/bin/env node
import path from "path";
import fs from "fs-extra";
import { program } from "commander";
import inquirer from "inquirer";
import download from "download-git-repo";
program.version("0.0.1", "-v, --version", "定义脚手架版本号");
program.command("create <name>").action((name) => {
const downloadPath = path.join(process.cwd(), name);
inquirer.prompt([
{
name: "author",
message: "作者名字: ",
},
{
name: "version",
message: "版本号: ",
default: "0.0.1",
},
{
name: "description",
message: "工程描述: ",
}
]).then((res) => {
const { author, version, description } = res;
const mergeObj = {
author,
name,
version,
description,
};
download("direct:https://gitee.com/luocheng-fu/view-mobile.git", downloadPath, { clone: true }, (err) => {
if (!err) {
const packagePath = path.join(downloadPath, "package.json");
const packageJson = JSON.parse(fs.readFileSync(packagePath).toString());
fs.writeFileSync(
packagePath,
JSON.stringify(packageJson, (k, v) => mergeObj[k] || v, "\t")
);
// 下载成功
} else {
// 下载失败
}
});
});
});
program.parse(process.argv);
主要核心包
- commander
创建命令、选项等 - inquirer
定义问题，让用户可以和终端一问一答的交互 - download-git-repo
远程下载代码到目标目录
其他辅助包
- path
获取路径 - fs-extra
操作文件以及目录，写入、删除、读取功能 - ora
loading效果，下载模版时给出loading效果，提升用户体验 - chalk
美化终端输出
