这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战
前言
我们发现大部分脚手架的工作原理都比较简单，无外乎就是启动它之后自动询问一些预设的问题，然后将回答的结果结合一些模板文件生成一个项目的结构，接下来我们就通过node.js去开发一个小型的脚手架工具，再去深入体会一下脚手架工具的工作过程。
开始创建
我们都知道 脚手架工具就是 node的cli应用，创建脚手架就是创建cli应用
1 初始化文件
我们先创建一个目录，然后我们去初始化该目录：
npm init 或 yarn init
复制代码2 定义入口
紧接着我们进入 package.json中，去定义bin字段，这里我们定义的时候，这个脚手架的入口文件
{
...
// 新增
"bin": "cli.js",
...
}
复制代码3 入口文件新增
在我们定义好了入口之后，我们就需要开始定义入口文件了，我们在根目录中创建cli.js文件
#!/usr/bin/env node
// Node cli 应用入口文件必须要有注意的文件头
// 如果是Linux 或者 macOS系统 下还需要修改此文件的读取权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
console.log('cli working')
复制代码这里需要注意:
文件头部
#!/usr/bin/env node来告诉系统使用node来执行该文件,如果是Linux 或者 macOS系统 下还需要修改此文件的读取权限为 755,具体就是通过chmod 755 cli.js实现修改
简单测试一下 运行一下
npm link 或者 yarn link
复制代码 运行完毕之后，我们运行提示我们的内容
这里可以正常运行也就是说明我们的cli应用基础已经ok了
4 正式开始
脚手架的工作流程：
- 通过命令行交互询问用户问题
- 根据用户反馈回来的结果生成文件
根据以上两个需求我们就可以进行编写了，
node中需要使用命令行交互询问需要使用 inquirer 模块
yarn add inquirer or npm add inquirer
复制代码然后修改 cli.js文件
#!/usr/bin/env node
// Node cli 应用入口文件必须要有注意的文件头
// 如果是Linux 或者 macOS系统 下还需要修改此文件的读取权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
const inquirer = require('inquirer');
const path = require('path');
const fs = require('fs');
inquirer.prompt([
{
type: 'input',
name: 'name',
message: '项目名称：'
}
]).then(anwsers => {
// console.log(anwsers)
// 根据用户回答的结果生成文件
// 模板目录
const templPath = path.join(__dirname, 'templates')
// 目标目录
const destdIR = process.cwd()
// 将模板下单文件全部转到目标目录
fs.readdir(templPath,(err,files) => {
if(err){
throw err
}
files.forEach(file => {
// 通过模板引擎去渲染目标文件
})
})
})
复制代码到这里我们的需求就已经差不多了，我们使用inquirer.prompt获取到了用户的输入之后，通过fs.readdir+path.join(__dirname, 'templates')获取到了对应文件夹的下的文件，接下来我们就需要通过模板引擎去渲染目标文件
运行：
yarn add ejs
复制代码然后我们进行一些修改
const ejs = require('ejs')
// 通过模板引擎去渲染目标文件
ejs.renderFile(path.join(templPath, file), anwsers, (err, data) => {
if(err){
throw err
}
// 写入
fs.writeFileSync(path.join(destdIR, file), data)
})
复制代码之后我们进行一下测试
总结
脚手架这其实不负责，但是很重要，可以减少我们很多不必要的重复操作