脚手架工具
脚手架的本质工作：创建项目基础结构、提供项目规范和约定
- 相同的组织结构
- 相同的开发范式
- 相同的模块依赖
- 相同的工具配置
- 相同的基础代码
常用的脚手架工具
常用的前端脚手架工具：vue-cli、create-react-app（都是根据信息创建对应的项目基础结构）
基础通用型工具
- Yeoman
- Plop：用来创建特定类型的文件
Yeoman
目前Yeoman包已经被废弃，官方改为Yo包。官网
基本使用
step1:全局范围安装yo
npm install yo --global # or yarn global add yo 复制代码
step2:安装对应的generator，这里使用generator-node
npm install generator-node --global # or yarn global add generator-node 复制代码
step3: 通过yo运行generator
mkdir generator-simple-use cd generator-simple-use yo node 复制代码
Generator Node的Sub Generator
有时候我们不需要创建完整的项目结构，而是需要在已有项目基础上创建一些特定类型的文件。 比如在已有项目中添加README.md文件或一些eslint配置文件，这些文件一般都有一些基础代码，自己手写很容易出错，这里就可以通过Sub Generator自动生成。
step1:在上节的generator-simple-use文件夹中执行：
yo node:cli 复制代码
step2:step1执行之后就可以将模块作为全局的命令行模块去使用，在本地，可以执行“yarn link”link到全局范围，执行之后就可以输入模块名去运行这个模块
yarn link yarn generator-simple-use --help // 执行成功能看到模块运行结果 复制代码
总结：yeoman的使用步骤如下：
- 明确需求
- 找到合适的generator
- 全局范围安装找到的generator
- 通过yo运行对应的generator
- 通过命令行交互填写选项
- 生成你所需要的项目结构
基于Yeoman搭建自己的脚手架（自定义Generator）
创建Generator模块，本质上就是创建一个NPM模块。 不过Generator有特定的结构，并且Yeoman的结构模块名称必须是generator-<name>的格式。具体可以看npm:generator-generator
Generator基本结构
root ├── generators //生成器目录 │ └── app //默认生成器目录 │ └── index.js //默认生成器实现 └── package.json //模块包配置文件 复制代码
如果需要提供多个Sub Generator，可以在generators文件夹下添加其它生成器文件：
root ├── generators │ └── app │ │ └── index.js │ └── component //其它生成器目录 │ └── index.js //其它生成器实现 └── package.json 复制代码
创建Generator模块
step1:基于yeoman的generator-generator生成基本结构
mkdir generator-sample cd generator-sample yarn init 复制代码
执行命令之后就会生成：
generator-custom ├── package.json 复制代码
step2:新增generators/app/index.js文件
generator-custom ├── generators │ └── app │ └── index.js └── package.json 复制代码
var Generator = require('yeoman-generator'); module.exports = class extends Generator { writing() { this.fs.write( this.destinationPath('temp.txt'), Math.random().toString() ) } }; 复制代码
step3:执行yarn link，使之成为全局模块包
yarn add yeoman-generator // 安装生成器基类 yarn link //使generator-custom成为全局模块包 cd .. //进入其它目录 yo custom // 执行yo命令就能运行这个模块包，运行之后就会生成一个temp.txt文件 复制代码
根据模板创建文件
很多时候，需要我们手动创建的文件有很多，而且文件里内容比较复杂，这种情况下我们就可以使用模板创建文件。相对于手动创建每一个文件，模板的方式大大提高了效率。
step1:在generator/app文件夹下新建templates/foo.txt模板文件
新建templates/foo.txt模板文件之后，目录结构就是：
generator-custom ├── generators │ └── app │ └── templates │ └── foo.txt │ └── index.js └── package.json 复制代码
templates/foo.txt模板文件内部可以使用EJS模板标记输出数据。
step2: 更改文件写入内容的方式
有了模板文件，生成文件时就不用再借助fs.write()方法去写入文件，而是借助于fs的模板方式写入文件的方法。这个方法有三个参数，分别是：
- 模板文件的路径（通过tempaltePath方法自动获取template文件夹下的模板文件路径）
- 输出文件的路径（输出路径使用destinationPath）
- 模板数据的上下文
接收用户输入数据
对于项目名称，项目描述等动态数据，一般是通过命令行交互方式去询问使用者而得到的。
在Generator中发起“命令行交互形式询问使用者”的功能，可以通过Generator中的prompting方法，在这个方法中可以调用父类的prompt方法发出对用户的命令行询问。这个方法返回一个promise方法，它接收一个数组，表示要询问的方法。
step1:在templates文件夹中新建拥有基础结构的html文件
step2:调用父类的prompt方法
step3:执行yo custom
终端执行yo custom命令（custom是最初取的generator模块名字）之后，就可以看到生成的目标文件啦：
