实现一个简单的前端脚手架

核心要点

• 前端脚手架概念
• 实现前端脚手架

什么是前端脚手架？

随着前端工程化的概念越来越深入人心，脚手架应运而生。简单来说，「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具

前端脚手架可帮我们做什么？

• 可以帮助我们快速生成项目的基础代码
• 脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践
• 脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”

我为什么要搭建一个前端脚手架？

主要在开发过程中，要做的项目很多，有涉及到vue2、vue3、react、uniapp、小程序等等，然后又有PC端、移动端；针对这些端的项目，我搭建好了基础的开发模板，但是呢，感觉每次新建一个项目，都需要从仓库中下载，感觉总少了点什么。于是想到了像vue-cli一样，搭建一个脚手架来创建项目行不行呢？
所以，我的目标很明确，我的脚手架的功能就是通过命令的方式，下载不同的项目模板，然后供所有项目组人员快速建立项目模板。

实现前端脚手架

1、安装前端脚手架制作所需要的一些插件

npm install chalk@4.0.0 commander@9.4.1 download-git-repo@3.0.2 fs-extra@11.1.0 inquirer@8.0.0 log-symbols@4.0.0 ora@5.0.0 path@0.12.7 update-notifier@4.0.0

"chalk": "^4.0.0", //用于修改终端（terminal）输出的字符串样式，包括字体色、背景色、字体样式
"commander": "^9.4.1", //是 node.js 命令行解决方案
"download-git-repo": "^3.0.2", //主要用来从一个代码仓库中下载文件的到目标文件夹
"fs-extra": "^11.1.0", //加强版的 fs（node 文件系统模块），主要用于操作文件
"inquirer": "^8.0.0", //inquirer.js 是一个用来实现命令行交互式界面的工具集合,它帮助我们实现与用户的交互式交流
"log-symbols": "^4.0.0", //为各种日志级别提供着色的符号
"ora": "^5.0.0", //主要用于创建和展示终端加载动画
"path": "^0.12.7", //主要用于格式化或拼接完整路径
"update-notifier": "^4.0.0" //检测 npm 包是否更新

2、文件结构如下，创建相应的文件，配置 package.json文件

3、编写 /bin/index.js，主要是编写交互的命令以及对应执行的操作

#!/usr/bin/env node

// 请求 commander 库
const program = require('commander')

// 从 package.json 文件中请求 version 字段的值，-v和--version是参数
program.version(require('../package.json').version, '-v, --version')


// 请求 lib/update.js
const updateChk = require('../lib/update')

// upgrade 检测更新
program
    .command('upgrade')
    .description("Check the mtt-cli version.")
    .action(() => {
   
      updateChk()
    });

// 请求 lib/init.js
const initProject = require('../lib/create')

// init 初始化项目
program
    .name('mtt-cli')
    .usage('<commands> [options]')
    .command('create <project_name>')
    .description('create a new project')
    .action(project => {
   
      initProject(project)
    })

// 解析命令行参数
program.parse(process.argv)

4、编写 /lib/create.js，主要的操作将会在这里完成

// 请求 fs-extra 库，用于文件操作
const fse = require(