在现代前端开发中，随着项目规模和复杂度的不断增加，高效工具链成为开发者们加速开发流程的关键。本文将深入探讨脚手架工具的原理和应用，并结合理论与实践，详细解读主流脚手架工具的内部机制，帮助开发者系统地掌握构建和使用这些工具的技能，同时提供从零开始创建自己的前端脚手架的全面指导和实战经验。

1.主流脚手架/CLI工具

脚手架是一种基础设施工具，用于快速生成项目的标准框架代码和文件结构。

01 Vue CLI脚手架

Vue CLI是一个基于Vue.js进行快速开发的完整系统，使用过程如下：

Step1：安装与创建

npm install -g @vue/cli
vue create hello-world

Step2：询问用户问题

引导用户回答一些关键问题。这些问题通常涵盖了项目的基本配置，如选择技术栈、配置开发环境、启用特定功能或插件等。

Step3：生成符合用户需求的项目文件

经过渲染的模板文件被保存到用户指定的项目目录中，完成项目的基础构建，涉及依赖安装、目录结构创建及配置文件的自动生成等。

02 React CLI脚手架

Next.js的页面路由是一个全栈的React框架。它用途广泛，可让用户创建任何规模的React应用程序。

提示：React CLI脚手架的创建步骤、交互式对话和文件结构与Vue Cli方式基本相同。

2.脚手架/CLI的设计与规划

01 实现规划

脚手架/CLI的核心功能是管理与更新。通过将项目模板存储在GitHub上，用户可以通过命令行交互的方式选择并下载不同的模板，然后脚手架工具会利用模板引擎对模板进行渲染，并插入用户自定义的信息，从而生成定制化的项目结构和文件内容。

02 环境搭建

脚手架需要在Node环境下才可以运行。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，Npm是随同Node.js一起安装的包管理工具。用户可以访问Node.js官方网站下载稳定版。

03 用户体验

设计一个友好且易用的命令行界面，使用户可以简单明了地使用脚手架工具：

① 命令设计：设计易于记忆和使用的命令，例如：create, build等；

② 交互设计：使用inquirer提供交互式的命令行，例如：选择模板、配置选项等；

③ 提示信息：使用Chalk和Ora提供清晰的提示信息和进度指示。

最终实现效果如下图所示：

3.搭建自己的脚手架/CLI工具

01 初始化Vue CLI脚手架

Step1：创建脚手架目录

mkdir bf-pc-cli

Step2：新建脚手架入口文件

npm init -y   
touch index.js

Step3： 文件作用解析

package.json文件：文件中指定入口文件为bin/index.js, 其中的"bf-pc-cli": "bin/index.js"就是第一个命令。

{
"name": "bf-pc-cli",
"version": "1.0.1",
"bin": {  "bf-pc-cli":
 "bin/index.js"
 },
 }

bin/index.js文件：脚手架入口文件，#!/usr/bin/env node通常出现在Unix系统上的脚本文件的开头，它告诉系统该脚本应该使用哪种解释器来运行。

#!/usr/bin/env node
console.log('bf-pc-cli working~')

02 创建可执行命令

npm link: 要创建一个可执行的命令，可以使用npm link命令。

npm unlink: 将当前项目从Node全局node_modules中移除，自定义命令失效。

03 运行脚手架

bf-pc-cli文件的根目录下运行npm link命令，可以将该脚手架工具链接到本地的全局Node.js环境中。执行bf-pc-cli命令，如果看到 "bf-pc-cli working~" 的提示，说明脚手架已成功运行。

4.热门脚手架插件应用

01 Commander解析命令行参数

Commander是一个强大的Node.js模块，用于构建命令行接口应用程序，使开发者能够轻松定义和处理命令行参数、选项及子命令等。

Step1：下载Commander

npm install commander

Step2：实现bf-pc-cli -v|--version命令

通过require方法引入Commander，使用program.version('1.0.0') 设置版本号1.0.0。当用户在命令行中输入bf-pc-cli-v时，会显示该版本号。

const { program } = require('commander') 
program.version('1.0.0')
program.parse(program.argv)

Step3：实现"bf-pc-cli create"命令

①通过.command()可以配置自定义命令；

②.command()的第一个参数为命令名称，命令参数可以跟在名称后面;

③参数必选的使用尖括号表示<>，可选的使用中括号表示[]。

program
.command('create <template> <project>')
.action((template, project) => {
  console.log(template, project)
})

Step4：实现"bf-pc-cli list"命令

开发者定义一个名为templates的数组，使用.command('list') 方法定义list命令。当用户在命令行中输入bf-pc-cli list时，将每个版本的名称和描述输出到控制台。

const templates = [{
  name: 'vue3',
  description: 'bf-pc-cli 前端脚手架pc通过模版(vue3)',
  downloadUrl: 'xxx'}]
program
.command('list')
.action(() => {
  templates.forEach(item => {
    console.log(`${item.name}`)
  })
})

02  Ora命令行loading

Ora是一个用于在终端显示微调器的轻量级Node.js模块。Ora支持多种样式和动画效果，且易于集成到各种CLI应用程序中。

Step1：下载Ora

npm install ora

Step2：代码应用

通过Ora('正在下载模版...') 创建一个下载提示信息，并使用.start() 方法启动它。如果发生错误，调用spinner.fail(logSymbols.error, '下载模版失败') 来停止动画。

const ora = require('ora')const spinner = ora('正在下载模版...').start()
spinner.succeed(

03  download-git-repo下载模版

download-git-repo是一个用于从Git仓库下载代码的Node.js模块，它支持多种Git平台和协议，包括GitHub、GitLab等。

Step1：下载download-git-repo

npm install download-git-repo

Step2：代码应用

根据模版名下载对应的模版到本地并起名为<projectName>。以下代码是编写在program.action中的代码：

const download = require('download-git-repo')
 templates.forEach((item) => {
  if (item.name === templateName) {
    download(item.downloadUrl, projectName, {
 clone: true }, (err) => {})
  }
})

04 Chalk 命令行美化工具

Chalk是一个用于在终端中设置文本样式的Node.js库，它可以为文本添加颜色、背景色、加粗等多种样式，使得终端输出更具可读性和美观性。

Step1：下载Chalk

npm install chalk

Step2：代码应用

使用Chalk库为命令行输出文本添加样式和颜色。

const chalk = require('chalk')
console.log(chalk.bold(projectName))

05  其它

主要包括Inquirer、Handlebars及logSymbols。

Inquirer是一个用于在命令行界面 (CLI) 创建交互式用户输入提示，它可帮助开发者在终端中实现各种形式的用户交互。

Handlebars是一个强大的模板引擎，用于构建动态HTML和其他文本格式，使得在模板中嵌入动态内容更加方便。

logSymbols是一个用于在命令行输出中添加漂亮的图标模块，它提供了一组常用的图标，用于表示成功、错误、警告和信息等状态。

Step2：实现步骤：

①把下载项目的package.json文件读出来；

②使用向导的方式采集用户管输入的值；

③使用模板引擎把用户输入的值解析到package.json文件中;

④解析完毕，把解析之后的结果重新写入package.json文件中。

5.脚手架/CLI发布与安装

01 发布

脚手架/Vue CLI发布如下：

①打开Npm官网，注册一个Npm账号，检索Npm中是否有重名的CLI包，无重名即可发布；

②在脚手架目录下执行：npm login、npm publish等待发布成功；

③在Npm上能看到自己发布的包，即表示发布成功。

02 使用安装

Step1：全局安装

npm install--global bf-pc-cli

Stpe2：测试版本号

bf-pc-cli--version

Step3：运行结果

可获取到bf-pc-cli的版本号，即表示安装成功，代表可以开始使用bf-pc-cli脚手架下载模板。

6.总结

01 核心知识点

开发前端脚手架需要多方面的技术支撑，主要需要掌握JavaScript语法、Node开发环境、npm相关知识及插件库：命令行工具（如Commander）、进度指示器（如Ora）、模板引擎（如Handlebars）、用户输入处理（如Inquirer）、样式和图标库（如Chalk和log-symbols）等。

02 进一步学习资源推荐

Vite：一个现代化的前端构建工具，具有快速的开发和构建速度。它支持Vue、React等框架，适用于各种前端项目；

Parcel：一个零配置的前端打包工具，支持多种文件格式和模块系统。它简化了配置和使用过程，适合各种前端项目。

本文作者

邓涛：碧桂园服务前端开发专家

指导人：

余俭：碧桂园服务技术总监