前端轻量化部署脚手架，支持测试、线上等多环境部署，支持环境配置扩展

目录

前端脚手架实现原理及开发调试流程

一、核心实现原理

1. 核心技术栈

2.核心执行流程

3. 核心逻辑拆解

二、脚手架开发步骤

1：初始化项目

2：配置 package.json

3：核心代码

三、开发调试流程

1.使用npm i -g deploy-cli 命令安装

2.使用 npm link 命令[推荐]

前端轻量化部署脚手架，支持测试、线上等多环境部署，支持环境配置扩展，配置好后仅需一条命令即可完成整个部署流程。

最后附有完整项目地址

前端脚手架实现原理及开发调试流程

前端脚手架（如 create-react-app、vue-cli、umi 等）的核心是自动化项目初始化流程，本质是通过命令行交互（CLI）拉取预设模板、配置工程化环境、生成标准化项目结构，解决重复搭建项目的问题。下面从原理、开发步骤、调试流程三个维度详细讲解。

一、核心实现原理

1. 核心技术栈

脚手架开发的核心依赖以下工具 / 库（均为 Node.js 生态）：

2.核心执行流程

graph TD
A[用户执行命令] –> B[解析命令参数]
B –> C[命令行交互提问]
C –> D[获取用户输入的配置]
D –> E[拉取远程模板/读取本地模板]
E –> F[渲染模板（替换变量）]
F –> G[生成项目文件]
G –> H[安装依赖（可选）]
H –> I[提示项目创建完成]

3. 核心逻辑拆解

• 命令解析：通过 commander 定义脚手架的指令（如 create/init）、选项（如 –version/–force）；

• 交互收集配置：通过 inquirer 询问用户项目名称、框架（React/Vue）、是否使用 TypeScript 等，收集后生成配置对象；

• 模板处理：

  • 远程模板：通过 download-git-repo 拉取 Git 仓库中的模板文件到本地临时目录；
  • 模板渲染：用 handlebars 替换模板中预定义的变量（如 {{projectName}}、{{author}}）；

• 文件生成：将渲染后的模板文件复制到用户指定的项目目录，完成项目初始化；

• 反馈交互：通过 chalk/ora 给用户实时反馈（成功 / 失败提示、加载状态）。

二、脚手架开发步骤

1：初始化项目

# 创建项目目录
mkdir deploy-cli && cd deploy-cli
# 初始化 package.json
npm init -y
# 安装核心依赖
npm install commander inquirer download-git-repo handlebars chalk ora fs-extra archiver node-ssh semver -S

2：配置 package.json

{
"name": "deploy-cli",
"version": "1.0.2",
"description": "A cli tool for web deploy.",
"bin": {
"deploy": "./bin/index.js"
},
"keywords": [
"web",
"node-ssh",
"deploy"
],
"author": "glony",
"license": "ISC",
"engines": {
"node": ">=9.0.0"
},
"repository": {
"type": "git",
…
},
"dependencies": {
"archiver": "^3.1.1",
…
}
}

3：核心代码

…..
// 部署流程
function deploy() {
// 检测部署配置是否合理

const deployConfigs = checkDeployConfig(deployConfigPath);
if (!deployConfigs) {
infoLog(`未检查到配置文件 ${deployConfigPath}`)
process.exit(1);
}
console.log(">>>. deploy >>>>> ")
console.log(`deployConfig = ${JSON.stringify(deployConfigs)}`)
// 注册部署命令
deployConfigs.forEach(config => {
const { command, projectName, name } = config;
console.log(`config ${JSON.stringify(config)}`)
program.command(`${command}`)
.description(`${underlineLog(projectName)}项目${underlineLog(name)}部署`)
.action(() => {
console.log("action", "prompt ")
inquirer.prompt([
{
type: 'confirm',
message: `${underlineLog(projectName)}项目是否部署到${underlineLog(name)}？`,
name: 'sure'
}
]).then(answers => {
console.log("action answers >>>> ")
const { sure } = answers;
if (!sure) {
process.exit(1);
}
if (sure) {
console.log("start deploy ")
// const deploy = require('../lib/deploy');
// deploy(config);
}
});
});
});
…..

模板配置代码

// nodejs 14版本时使用module.exports，大于14时使用 export default
module.exports = {
projectName: '', // 项目名称
privateKey: '', // 本地私钥地址，位置一般在C:/Users/xxx/.ssh/id_rsa，非必填，有私钥则配置
passphrase: '', // 本地私钥密码，非必填，有私钥则配置
// 根据需要进行配置，如只需部署prod线上环境，请删除dev测试环境配置，反之亦然，支持多环境部署
dev: { // 测试环境
name: '测试环境',
script: "npm run build", // 测试环境打包脚本
host: '', // 测试服务器地址
port: 22, // ssh port，一般默认22
username: '', // 登录服务器用户名
password: '', // 登录服务器密码
distPath: 'dist', // 本地打包dist目录
backupDir:'', // 服务器代码备份目录
webDir: '', // // 测试环境服务器地址
},

…..
}

三、开发调试流程

1.使用npm i -g deploy-cli 命令安装

在deploy-cli脚手架项目目录的上一级，执行 npm i -g deploy-cli

这种方式，可以用到已经发版上线的脚手架项目中

2.使用 npm link 命令[推荐]

在未发过版的脚手架项目的根目录中，也就是 deploy-cli/ 下执行 $ npm link 也可以调试本地脚手架，这时候，在当前命令的日志输出中，就会出现两个软链

将当前使用的node目录下的 bin/xxx -> 当前node所使用的node_modules中的 xxx/bin/index.js

注意，这个要确保package.json 中配置的 bin 属性是 bin/index.js

再将当前node所使用的node_modules中的 xxx -> 当前脚手架的项目目录 xxx

注意 -> 表示软链的意思

通过以上两次软链，就可以直接调试当前脚手架项目，做到随时修改，随时使用

# 在脚手架项目根目录执行（将当前包链接到全局）
npm link
# 验证是否生效
deploy –help
# 测试 init 指令
deploy init

## 如果失败或调试完成使用unlink 清理链接
npm unlink

源码地址