为什么要有前端脚手架
前端脚手架是前端工程化的核心产物，本质是用自动化对抗复杂性。它从“手动砌砖”进化到“装配式建筑”，让开发者聚焦业务逻辑而非基建重复。随着智能化发展（如 AI 辅助配置生成），其角色将从“工具”进一步转向“开发伙伴”
总结： 脚手架是一个通用开发工具， 为了避免重复的工作， 让开发者聚焦业务本身
开发一个简单的脚手架
我们实现一个简单的启动应用的脚手架
1、 创建一个项目
mkdir cli
cd cli
npm init -y
npm install commander inquirer ora
mkdir src
cd src
touch index.js
vim index.js
// 将下面的内容写进去, 保存后退出
// ==========start=========
#!/usr/bin/env node
import { program } from "commander";
import inquirer from "inquirer";
import fs from "node:fs";
import ora from "ora";
import { exec } from "node:child_process";
let json = fs.readFileSync("./package.json", "utf-8");
json = JSON.parse(json);
program.version(json.version);
const spinner = ora("启动中...");
program
.command("startApp <name>")
.description("Start the app")
.action((appName) => {
inquirer
.prompt([
{
type: "input",
name: "appPath",
message: "Enter the app path",
default: "/Applications",
},
])
.then((answers) => {
spinner.start();
exec(
`open ${answers.appPath}/"${appName}".app`,
(error, stdout, stderr) => {
if (error) {
console.error(`Error: ${error.message}`);
spinner.fail(`Error: ${error.message}, 启动失败`);
return;
}
spinner.succeed(`启动成功`);
}
);
});
});
program.parse(process.argv);
// ========== end ===========
vim package.json
// 将下面内容写进去
// ===== start =====
{
"name": "startapp-cli-lc",
"version": "1.0.2",
"description": "开机自启动应用脚手架",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"bin": {
"startapp-cli": "src/index.js"
},
"type": "module",
"keywords": [],
"author": "====",
"license": "ISC",
"dependencies": {
"commander": "^14.0.0",
"inquirer": "^12.7.0",
"ora": "^8.2.0"
}
}
// ===== end =====
执行 npm link
通过上面的操作你就实现了一个简单的开机启动脚手架
代表什么含义
-
commander
Commander 是一个用于构建命令行工具的 npm 库。它提供了一种简单而直观的方式来创建命令行接口，并处理命令行参数和选项。使用 Commander，可以轻松定义命令、子命令、选项和帮助信息。它还可以处理命令行的交互，使用户能够与你的命令行工具进行交互
-
inquirer
Inquirer 是一个强大的命令行交互工具，用于与用户进行交互和收集信息。它提供了各种丰富的交互式提示（如输入框、选择列表、确认框等），可以帮助你构建灵活的命令行界面。通过 Inquirer，你可以向用户提出问题，获取用户的输入，并根据用户的回答采取相应的操作,返回的是一个 promise 值
-
ora
ora 是一个用于在命令行界面显示加载动画的 npm 库。它可以帮助你在执行耗时的任务时提供一个友好的加载状态提示。Ora 提供了一系列自定义的加载动画，如旋转器、进度条等，你可以根据需要选择合适的加载动画效果，并在任务执行期间显示对应的加载状态。
-
#!/usr/bin/env node
这行代码在入口文件处一定要有， 代表着node执行文件从显式变成了隐式， 有了这行代码我们还需要在 package.json 文件中添加 bin 配置项， 指定入口文件
同时需要添加 name 属性（有 name 属性才能进行 npm link ）
除此之外， 如果需要下载别人的模板可以使用 download-git-repo 方法
import download from 'download-git-repo'
...
download(`direct:https://gitee.com/chinafaker/vue-template.git#${branch}`, project , { clone: true, }, （err） => {
console.log(err)
}）
这样就可以通过脚手架直接创建项目模板
