通过Node.js开发一个小型的脚手架工具以及脚手架工具的工作过程-一一网

脚手架基础应用搭建

在文件目录运行cmd命令行工具，执行命令行mkdir sample-scaffolding创建一个文件夹
执行命令行 cd sample-scaffolding 进入创建的文件夹目录，运行yarn init初始化生成一个package.json配置文件
执行命令行code .运行Vscode 打开当前文件夹

在package.json文件中，添加 “bin” 字段，用于指定我们 cli 应用的入口文件，我们命名为 cli.js，并在当前目录下创建 cli.js 文件

Node CLI 应用入口文件必须要有这样的文件头

#!/usr/bin/env node
复制代码

如果是 Linux 或 macOS 系统下还需要修改此文件的读写权限为 755
具体就是通过 chmod 755 cli.js 实现修改

通过 yarn link 命令行，把这个模块 link 到全局，这时我们就可以在命令行中，使用sample-scaffolding 命令行执行，看到终端 console.log 正常执行，就意味着这个 cli 的基础应用就已经可以了。

使用cli脚手架创建基本业务

脚手架的工作过程：

通过命令行交互询问用户问题
根据用户回答的结果动态生成文件

通过命令行交互询问用户问题

在node中，发起命令行交互询问，我们使用 inquirer 这个模块，执行命令行yarn add inquirer 安装。有了这个模块，我们就可以在代码中载入它

inquirer 具体使用如下图所示，配置完成后运行文件，可见，能正常打印我们输入的项目名称“Hello”。

根据用户回答的结果动态生成文件

在项目根目录下，新建一个 templates 的目录存放我们的文件模板，在templates 目录里新建一个index.html作为示例来介绍脚手架工作过程的一个模板文件
在模板中，可以通过<%= name %>的方式去输出我们cli.js 配置询问环节得到的答案，如name的值

我们还可以根据需要添加其他的模板文件…

有了模板文件之后，回到 cli.js 文件，可以根据用户回答的结果生成文件，生成之前，我们先把模板的目录和生成的文件目录确定下来：

const path = require('path')
// 模板目录
const tmplDir = path.join(__dirname, 'templates')
复制代码

而输出的目标目录，一般就是我们命令行在哪个目录下执行，就是哪个目录的路径，也就是我们的cwd目录，在node中，我们可以借助于process.cwd方法，得到这样一个目录的路径

// 目标目录
const destDir = process.cwd()
复制代码

明确了模板目录和目标目录之后，我们就可以通过 fs 模块，去读取模板目录下，有哪些模板文件，将这些文件全部转换到目标目录，fs.readdir 会自动扫描模板目录下所有文件
整体配置流程如下：

#!/usr/bin/env node

// console.log('Lily\'s cli working');

const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')  // 模板引擎

// prompt 发起询问，接收一个数组的参数
inquirer.prompt([
    {
        type: 'input',  // 指定问题的输入方式
        name: 'name',   // 指定问题返回值对应的键
        message: 'Project name?'   // 指定屏幕上给用户的提示
    }
]).then(answers => {  // then方法里可以拿到这个问题接收到的用户的答案
    // console.log(answers);
    // 模板目录
    const tmplDir = path.join(__dirname, 'templates')
    // 目标目录
    const destDir = process.cwd()
    // 将模板下的文件全部转换到目标目录，在readdir回调函数中，可以通过files拿到所有的文件列表
    fs.readdir(tmplDir, (err, files) => {
        // 读取过程中发生问题，可以把错误信息抛出
        if (err) throw err
        // 遍历每个文件
        files.forEach(file => {
            console.log(file); // 打印出来可以得知模板文件的路径是相对templates下的相对路径
            // 通过 ejs 模板引擎中 renderFile 方法渲染这个路径对应的文件  yarn add ejs 安装后需要引入
            // 参数一：文件的绝对路径,  参数二： 模板引擎工作中的数据上下文， 参数三：是一个渲染后的回调函数(成功或失败)
            ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
                if (err) throw err
                console.log(result);
                // 通过文件写入的方式把结果写入到目标目录
                // 参数一：是目标目录的拼接， 参数二：输出的结果
                fs.writeFileSync(path.join(destDir, file), result)
            })

        })
    })
})
复制代码