前言

终于有时间静下心来好好写写文章了，接下来打算每个星期写一篇。 事情是这样的，之前公司有个需求需要搭建自己的前端脚手架，所以组长就安排我来负责脚手架这个项目。这让我头疼了一段时间，因为脚手架这个东西我只用过，让我来写可就犯难了，本着迎nan而上的精神，下面就来讲一下我是如何一步一步去实现它。

什么是脚手架？

蹭个热度，来自chatGPT的回答：

脚手架本质上是一个代码生成工具，其目的是为了降低开发者的工作量，尽可能地减少重复性工作，使得开发者可以更加专注于业务逻辑的实现。脚手架通常包含一些常用的基础配置和工具，例如构建工具、测试工具、代码风格检查工具等等，同时还提供了一些模板代码，例如基础的目录结构、路由配置、状态管理等等，这些都可以根据实际需求进行定制和扩展。

在前端开发中，常见的脚手架包括Vue CLI、Create React App、Angular CLI等等，它们都是为了提高开发效率和降低开发难度而生的工具。

调研工作

我们需要什么技术能力呢？ 脚手架需要一定的node基础，因为会有很多文件相关的和进程相关的操作。

下面是我自己调研得出的结果（如果有不同意见可以在评论区指出）：

调研框架开发cli工具

需要工具：commander，inquirer，fs-extra，ora（进度）;

Commander.js：Commander.js是一个轻量级、简单易用的CLI框架，提供了处理命令行参数和选项的功能，可以 帮助开发人员快速构建CLI应用程序。

Inquirer.js：Inquirer.js是一个交互式命令行工具，提供了多种交互方式，如输入、选择、确认等，可以帮助开发人员快速构建CLI应用程序。

这个是commander.js的中文文档： github.com/tj/commande…

开始

由于公司的代码不方便放出来，所以我自己在本地重新建了一个项目:

首先安装commander.js : npm install commander --save

这是我的项目结构:

bin: 项目入口 libs: 放置已封装好的前端模块 src: 添加各种脚手架命令 utils: 放置公用方法

下面是初始化命令：

bin/index.js

const {program} = require('commander')

program
    .command('init)
    .alias('i')
    .description('Create a new project')
    .action(() => {
        // do something...
    })

上面只是一个简单的初始化命令，如果需要和vue-cli那样有交互地输入项目名称，版本号等等，可以使用inquire.js达到交互的目的。 简单介绍一下inquire.js的基本用法：

const inquirer = require('inquirer')
let question = [
    {
        // type：表示提问的类型，包括：input, confirm, list, rawlist, expand, checkbox, password, editor；
        type: 'input',
        // name: 存储当前问题回答的变量；
        name: 'projectName',
        message: 'Enter your project name: ',
        // validate：对用户的回答进行校验；对输入/选择的回答做自定义验证，如果验证通过返回true，不通过可以返回自定义验证不通过提示消息，
        // 如果返回false那么就会显示默认验证不通过提示消息。方法参数为当前输入/选择的值，第二个参数为当前交互的回答数据。
        validate: function(input){
            const projectName = input.trim()
            if(!projectName){
                return 'The project can not be empty!'
            }
            return true
        }
    }
]
inquirer.prompt(question)
    .then(answer => {
        // do something...
    })

inquire.js参数含义可以参照这里www.wmm20.com/posts/8e3b1…

总结

这篇文章只是粗浅介绍了前端构建脚手架的思路，我会每个星期更新这个系列。下期就写使用通过babel利用AST修改文件的方法。 如有其他想法的友友可以在评论区留下意见，我会尽力改进。