从0搭建前端脚手架详解（小白也可以搭建）

本篇文章用来为大家提供一个搭建简易前端脚手架的思路。

先来看一眼实现的效果。

从图上来看这个脚手架的功能非常的简单只有一个创建的命令，其他都是帮助和显示版本号的。

也就是上图这句，创建一个新项目，只需要输入create 项目名便可使用，在创建时执行了一系列的操作，这一块的思路很简单，就是将git仓库中的项目模板拷贝下来再依据使用者的不同操作对复制下来的模板的部分文件进行修改就可以了，大致思路便介绍到这里，接下来我们便来详细的讲讲如何实现，以及会用到的依赖。

脚手架目录结构

了解搭建的脚手架

脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件，我们接下来的流程亦是如此

脚手架的初始化

由于它是一个npm的包，因此我们需要使用npm的初始化命令，随意新建一个文件夹打开命令行，输入npm init，会出现以下情况。

名称	意思	默认值
package name	包的名称	创建文件夹时的名称
version	版本号	1.0.0
description	包的描述	创建文件时的名称
entry point	入口文件	index.js
test command	测试命令	—
git repository	git仓库地址	—
keywords	关键词，上传到npm官网时在页面中展示的关键词	—
author	作者信息，对象的形式，里面存储一些邮箱、作者名、url	—
license	执照	MIT

这就是输入初始化命令时会询问的东西，回答完这些后就会生成一个 package.json 的文件，这个文件就是记录包的信息。

如果想要了解更多，可查看如下地址：
package.json详解

脚手架依赖安装

用到如下依赖请安装。

npm i path
npm i chalk@4.1.0
npm i fs-extra
npm i inquirer@8.2.4
npm i commander
npm i axios
npm i download-git-repo

询问用户问题

创建入口文件

在询问问题前我们需要先创建一个入口文件，创建完成后在package.json中添加bin项，并且将入口文件路径写进去

填写完入口文件路径后在入口文件内随便输出一句， 但必须在入口文件顶层声明文件执行方式为node。
声明代码：#! /usr/bin/env node

写完后我们需要测试一下我们是否可以正常的访问的我们的脚手架，在本文件夹打开命令行，输入 npm link ，该命令会创建一个全局访问的包的快捷方式，这个是临时的就是本地测试的时候用的，这个在命令行输入你的脚手架的名称可以看到入口文件输出的内容。

最基本的交互命令

在完成上一步后我们就要开始与用户进行交互了，这个时候我们就需要用到一个用于自定义命令行指令的依赖 commander。

引入依赖:

const program = require('commander')

简单介绍一下commander依赖常用的方法

command

命令。.command()的第一个参数为命令名称。命令参数可以跟在名称后面，也可以用.argument()单独指定。

参数可为必选的（尖括号表示）、可选的（方括号表示）或变长参数（点号表示，如果使用，只能是最后一个参数）。

例如:

// 创建一个create命令
.command('create <app-name>')

parse

解析。.parse()的第一个参数是要解析的字符串数组，也可以省略参数而使用process.argv，这里我们也是用process.argv用来解析node的参数。

例如:

// 解析用户执行命令传入参数
program.parse(process.argv);

option

选项。option()可以附加选项的简介。第一个参数可以定义一个短选项名称（-后面接单个字符）和一个长选项名称（–后面接一个或多个单词），使用逗号、空格或|分隔。第二个参数为该选项的简介。

例如:

.option('-f, --force', '如果存在的话强行覆盖')

action

处理函数。用command创建的自定义命令的处理函数,action携带的实参顺序就是命令上的参数的顺序。

例如:

program
.command('create <app-name>')
// 这个name 就代表第一个必填参数 options就代表其余， 如果有第二个就在写一个，最后一个永远是剩余参数
.action((name, options) => {
   
    console.log(name)
    // 打印执行结果
    // require("../lib/create")(name, options)
})

编写交互命令 create

入口文件

#! /usr/bin/env node
const program = require('commander');
const chalk = require('chalk');

// 定义命令和参数
// create命令
program
.command('create <app-name>')
.description('create a new project')
// -f or --force 为强制创建，如果创建的目录存在则直接覆盖
.option('-f, --force', 'overwrite target directory if it exist')
.action((name, options) => {
   
    // 打印执行结果
    console.log('项目名称', name)
})

// 解析用户执行命令传入参数
program.