脚手架工具

!/usr/bin/env node

本质是创建项目基础文件，提供项目规范和约定
- 相同的组织规范
- 相同的开发范式
- 相同的模块依赖
- 相同的工具配置
- 相同的基础代码
前端常用脚手架工具
- Vue-cli
- create-react-app
- angular-cli
通用型：
- Yeoman
- Plop:项目开发过程中创建一些特定类型的组件
  - 例如创建一个组件/模块所需文件。
  - 不需要手动重复工作
Yeoman简介
- 老牌，强大，通用的脚手架工具
- 优点：通用，通过搭配不同的generator实现不同的脚手架
- 缺点：过于通用，不够专注
Yeoman基础使用
1. 全局安装 yo
2. 安装generator generator-node
3. 通过yo运行generator
  1. yo node
Sub Generator
- 自动生成某些文件
- 比如cli需要的文件
  - 存在的话 generatorName:cli
使用yeoman步骤
- 明确需求
- 找到合适的generator
  - https://yeoman.io/generators/ 查找
- 全局范围安装generator
- yo 运行 generator
- 填写选项
- 生成项目结构
自定义generator
- 实现搭建自己的脚手架
创建generator
- generator本质是npm模块
- 特定的文件结构
- generator-的名称
- 借用yeoman-generator帮助
根据模板创建文件
接收用户输入
- prompts
原理
- 创建一个cli应用 ```javascript
  !/usr/bin/env node
  //特定的文件头 //脚手架的工作过程 //1.通过命令行交互询问 // 2。根据用户回答结果生产文件 const inquirer = require(“inquirer”) //调用命令行工具 const path = require(“path”) const fs = require(“fs”) const ejs = require(“ejs”) inquirer .prompt([ {
```
   type: "input",
   name: "name",
   message: "project name",
```
  }, ]) .then((answers) => { // 模板目录 const tmlDir = path.join(__dirname, “templates”) const desDir = process.cwd() //将模板文件生成到目标目录 // 读取模板文件 fs.readdir(tmlDir, (err, files) => {
```
   if (err) throw err
   files.forEach((file) => {
       // 通过模板引擎渲染
       ejs.renderFile(path.join(tmlDir, file), answers, (err, result) => {
           if (err) throw err
           fs.writeFileSync(path.join(desDir, file), result)
       })
   })
```
  }) })

```

!/usr/bin/env node