node如何编写前端工具链

矫情吗；* 2023-10-02 13:02 6阅读 0赞

通过模拟，了解node是怎么编写前端的工具。

## 前言 ##

::: note

在前端开发的日子里，使用前端的工具基本流程都是：

1.  敲下工具的名字
2.  回答一系列的问题
3.  工具帮我们做了某些事情，比如说`使用脚手架创建一个Vue工程`

:::

今天我们就来模拟一下下吧。

## 使用到的工具 ##

[SBoudrias/Inquirer.js: A collection of common interactive command line user interfaces. (github.com)][SBoudrias_Inquirer.js_ A collection of common interactive command line user interfaces. _github.com]

## 实现逻辑 ##

1.  利用工具获取与用户交互所拿到的答案
2.  去做某些事情

## 实现代码 ##

'use strict'
    const inpuirer = require('inquirer')
    const fs = require('fs')
    /**
     * 命令行交互，根据用户的操作选择后续的操作
     * 
     */
    inpuirer.prompt([
        {
        
            type:'input',
            name:'name',
            message:'Project name::'
        },
        {
        
            type:'confirm',
            name:'flag',
            message:'确定创建文件夹吗？'
        }
    ]).then(ans=>{
        
        const {
         name, flag } = ans
        if(!flag){
        
            return console.log(`用户主动取消创建${
          name}文件夹`)
        }
        !fs.existsSync(`./${
          name}`) && fs.mkdirSync(name)
    })

> 效果
> 
> 确认之前  
> ![在这里插入图片描述][9b4f6098bbd7465ca6a2a3c007cf5632.png]

> 确认之后  
> ![在这里插入图片描述][028c32b58a3547b395382940aea8096b.png]
> 
>  *  可以看到多了一个文件夹，  
>     如果输入n的话会怎么样呢  
>     就不会创建新的文件夹。  
>     ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA6IWU6K-X5oSP6YaJ5LqG6YWS_size_17_color_FFFFFF_t_70_g_se_x_16]

::: tip

模拟结束，感谢耐心阅读！！！

:::

[SBoudrias_Inquirer.js_ A collection of common interactive command line user interfaces. _github.com]: https://github.com/SBoudrias/Inquirer.js
[9b4f6098bbd7465ca6a2a3c007cf5632.png]: https://img-blog.csdnimg.cn/9b4f6098bbd7465ca6a2a3c007cf5632.png
[028c32b58a3547b395382940aea8096b.png]: https://img-blog.csdnimg.cn/028c32b58a3547b395382940aea8096b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA6IWU6K-X5oSP6YaJ5LqG6YWS_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b1e8e38c24d64b8985c00b2e7fddebcc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiA6IWU6K-X5oSP6YaJ5LqG6YWS,size_17,color_FFFFFF,t_70,g_se,x_16