前端cli你知道多少什么是脚手架为什么需要脚手架 1. 节约精力节约时间自动化生成项目结构、配置文件和基础代码，避免

什么是脚手架

终端命令的集合，用来把前端开发模板下载到本地。 前端开发的模板有vue生态、react生态等。例如使用vue开发项目，需要使用vue框架、vite打包、less预编译等等。可以通过脚手架将这些基础代码直接下载到本地

为什么需要脚手架

1. 节约精力节约时间

自动化生成项目结构、配置文件和基础代码，避免了从零开始配置项目的繁琐步骤。
减少手动安装和配置开发工具的时间（如 Webpack、Babel、ESLint 等）。
提供组件、页面等模板，减少重复性工作。

2. 统一项目规范

提供一致的项目结构和代码风格，有助于团队协作。
使用脚手架生成的项目通常符合行业最佳实践，减少因不规范导致的潜在问题。

3. 减少配置错误

通过预配置的工具链和依赖项，避免手动配置时可能出现的错误或冲突。
自动生成的配置文件通常经过社区验证，更加稳定可靠。

总结：可以提高团队效率，统一代码规范，减少配置错误。一般中小公司不需要，没有时间精力来维护。市面上常见cli已基本满足需求

如何建造一个脚手架

插件准备

commander: 命令行工具，控制台让用户选择等相关命令由它来控制
inquirer: 交互式命令工具，给用户提供一个提问流方式，通过promise的方式返回用户选择。可以实现定制化功能
chalk:控制台输出颜色插件，字体颜色等
ora：控制台loading插件
fs-extra: node fs文件系统模块的增强版，可以方便我们操作本地文件。对所有的异步操作都提供了promise支持
cross-spawn: 是一个用于跨平台执行命令的 Node.js 模块。它解决了在不同操作系统上执行命令时可能会遇到的一些兼容性问题。
figlet: 可以将 text 文本转化成生成基于 ASCII 的艺术字
execa: 执行终端命令
handlebars: 可以方便执行模版替换，用用户的输入替换掉内置模版
download-git-repo:git下载

让终端能执行node命令

初始化package.json

{
  "name": "test-cli", // 项目名称
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "test-cli": "./bin/bin.js" // 【重点】配置bin让电脑知道，执行test-cli去找哪个文件执行
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建bin/bin.js

#!/usr/bin/env node   
// 第一行告诉代码执行环境
require("../lib/index")
// 第二行 执行哪个代码
console.log('你好 我是bin')

3.创建执行文件 bin.js要执行lib下的index 创建即可（这里是可以任意地方的js文件，一般为lib下的index）

console.log('你好 my-cli')

4.建立npm软连接

npm link

到这一步其实基础的cli已经搭建完毕，在任意地方输入test-cli都会输出两个console

实现自定义功能

到这一步根据实际需要，来自定义需要实现的功能。【核心分为获取参数，根据参数做对应的事情】，vue-cli实现了下面的功能

参数获取

选择是否使用默认模板`vue`

选择自定义后，选择自己需要安装的内容

选择`vue`版本

实现参数获取

参数获取核心通过inquirer、commander预设一些选项或输入,只讲大概具体使用看👀
inquirer使用

const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
prompt([
    {
      type: 'list',
      message: "Please pick a preset",
      name: "(use)",
      default: 0,
      choices: [
        {
          value: 1,
          name: 'Default ([Vue 3] babel, eslint)',
        },
        {
          value: 2,
          name: 'Default ([Vue 2] babel, eslint)',
        },
        {
          value: 3,
          name: 'Manually select features',
        },
      ],
    },
  ])
  .then((answers) => {
    console.log(answers)
  })
  .catch((error) => {});

看起来选项都一样，现在把相关的颜色修改一下就一模一样了

const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
const chalk = require('chalk')

prompt([
    {
      type: 'list',
      message: "Please pick a preset",
      name: "preset",
      default: 0,
      choices: [
        {
          value: 1,
          name: `Default (${chalk.yellow('[Vue 2] babel, eslint')})`,
        },
        {
          value: 2,
          name: `Default (${chalk.yellow('[Vue 2] babel, eslint')})`,
        },
        {
          value: 3,
          name: `Manually select features`,
        },
      ],
    },
  ])
  .then((answers) => {
    console.log(answers)
  })
  .catch((error) => {});

任务执行

例如选择vu3模板直接通过git下载。这块也比较简单，稍微实现一下

const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
const chalk = require('chalk')
const util = require('util')
const path = require('path')
const downloadGitRepo = require('download-git-repo') 
prompt([
    {
      type: 'list',
      message: "Please pick a preset",
      name: "preset",
      default: 0,
      choices: [
        {
          value: 1,
          name: `Default (${chalk.yellow('[Vue 2] babel, eslint')})`,
        },
        {
          value: 2,
          name: `Default (${chalk.yellow('[Vue 3] babel, eslint')})`,
        },
        {
          value: 3,
          name: `Manually select features`,
        },
      ],
    },
  ])
  .then((answers) => {
    if(answers.preset === 2 ){
        // 下载内容
      const downloadGit = util.promisify(downloadGitRepo)
      console.log('download file')
      downloadGit('https://github.com/fanglexin/my-resume.git')
    }
  })
  .catch((error) => {});

脚手架跟项目结合

脚手架一般小公司不是很推荐，有多余精力时间来维护。用起来还是很方便。可以快速生成一个供开发者开发的基础工程框架。
能满足这些功能也可使用vscode插件实现，可以实现多个模板一键下载

前端cli你知道多少