1、脚手架的作用

通常我们在开发相同类型的项目时，会有：

  • 相同的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的基础代码

我们可以通过脚手架一键式创建项目基础结构、提供项目规范和约定。

2、常用的脚手架工具

image.png
他们共同的特点就是根据信息创建对应的项目基础结构。

3、通用型脚手架

  • Yeoman

根据一套模板，生成一套对应的项目结构，优点是灵活，容易扩展。

  • Plop

用于创建一个特定类型的文件。

4、脚手架原理

脚手架一般都是根据用户输入脚手架预设的问题，结合模板文件生成项目的结构。脚手架工具其实就是node的cli应用。

5、如何创建一个脚手架（node cli应用）

  • 创建一个目录mycli，用yarn init -y生成一个package.json文件，创建一个cli.js文件； ```javascript

    !/user/bin/env node

// Node CLI应用入口文件必须要有这样的文件头 // 如果是Linux或者macOS系统下还需要修改此文件的读写权限为755 // 具体就是chmod 755 cli.js

  2. - 给package.json文件添加bin字段，用于指定cli应用的入口文件；
  4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21777453/1624940548650-c7395e83-a1a0-473f-907e-a99eac550f48.png#clientId=u6447c88c-67b6-4&from=paste&height=192&id=u789a69cc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=384&originWidth=802&originalType=binary&ratio=2&size=32439&status=done&style=none&taskId=uead38427-b049-4add-bc39-b933890a5cc&width=401)
  6. - 通过yarn link将该模块link到全局
  8. ```javascript
  9. yarn link
  • 脚手架的工作工程：
    • 通过命名行询问用户问题
    • 根据用户回答的结果生成文件

通过inquirer.js实现用户和命令行的交互 

  1. yarn add inquirer 
  3. //cli.js
  5. #!/usr/bin/env node
  7. const inquirer = require('inquirer');
  8. const fs = require('fs');
  9. const path = require('path');
  10. const ejs = require('ejs');
  11. inquirer.prompt([
  12.   {
  13.     type:'input',
  14.     name:'name',
  15.     message:'Project name?'
  16.   },
  17.   {
  18.     type:'input',
  19.     name:'content',
  20.     message:'Project content?'
  21.   }
  22. ]).then(answer=>{
  23.     console.log(answer,'======')
  24. })
  1. templates/index.html
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title><%= name %></title>
  10. </head>
  11. <body>
  13. </body>
  14. </html>

安装模板引擎ejs，根据用户输入的内容，渲染模板文件

  1. yarn add ejs
  3. //cli.js
  5. #!/usr/bin/env node
  7. const inquirer = require('inquirer');
  8. const fs = require('fs');
  9. const path = require('path');
  10. const ejs = require('ejs');
  11. inquirer.prompt([
  12.   {
  13.     type:'input',
  14.     name:'name',
  15.     message:'Project name?'
  16.   },
  17.   {
  18.     type:'input',
  19.     name:'content',
  20.     message:'Project content?'
  21.   }
  22. ]).then(answer=>{
  23.     // 模板目录
  24.   const tmpDir = path.join(__dirname,'templates')
  25.   // 目标目录
  26.   const destDir = process.cwd()
  27.   fs.readdir(tmpDir,(err,files)=>{
  28.       if(err) throw err
  29.       files.forEach(file=>{
  30.             // 通过模板引擎渲染文件
  31.           ejs.renderFile(path.join(tmpDir,file),answer,(err,result)=>{
  32.               if(err) throw err
  33.                             // 将结果写入目标文件路径
  34.               fs.writeFileSync(path.join(destDir,file),result)
  36.           })
  37.       })
  38.   })
  39. })

文章内容输出来源：拉勾教育前端高薪训练营。