Yeoman

1. 功能：

• 基于特定生成器（Generator）来创建项目基础代码
• 提供足够的开放性和自由度
• 缺乏某一技术栈的深度集成和技术生态
• 更多用于一些开发流程里特定片段代码的生成

---

2. 使用

1. 安装yo

   npm i yo -D # or yarn add yo -D
   

2. yo必须搭配特定的generator使用，需要找到对应的generator

   • 以generator-node为例

   npm i generator-node -D # or yarn add generator-node -D
   

下载完后会出现卡死状态 按下回车就ok

3. 通过yo运行generator

   cd path/
   mkdir yo-demo
   yo node
   

---

3. 自定义generator

• Generator本质就是一个npm的模块

• Generator的基本结构

  • 文件命名必须是generator-<name>的形式命名 比如 generator-sample
  • 必须有一个generators的文件夹
  • 文件夹下有个叫app的文件夹 存放生成器对应的代码
  • app文件夹里有个index.js的文件

  generator-[name]/
    |_ generators/ .................  生成器目录
    |  |_ app/ .....................    默认生成器目录
    |     |_ index.js ..............  默认生成器实现
    |_ package.json ................  模块包配置文件
  

  含有多个sub generator

  generator-[name]/
    |_ generators/ ............   生成器目录
    |  |_ app/ ................   默认生成器目录
    |  |  |_index.js ..........   默认生成器实现
    |  |_ componenet/ .........   其他生成器目录
    |     |_index.js    .........   其他生成器实现
    |_ package.json ...........   模块包配置文件
  

---

4. 过程操作

1. 创建package.json

   yarn init
   

2. 创建目录结构

Yeoman基本目录结构

/*
  index.js
  此文件作为 Generator 的核心入口
  需要导出一个继承自 Yeoman Generator 的类型
  Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
  我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
*/
const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // 获取当前项目状态，获取基本配置参数等
  initianlizing() {}
  /*
    向用户展示交互式问题收集关键参数
    Yeoman 在询问用户环节会自动调用此方法
    在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
  */
  prompting() {
    return this.prompt([{
      type: 'input',
      name: 'name',
      message: 'Your project name',
      default: this.appname // appname 为项目生成目录名称
    }]).then(answers => {
      // answers => { name: 'user input value' }
      this.answers = answers
    })
  }
  // 保存配置相关信息且生成配置文件（名称多为'.'开头的配置文件,例如.editorconfig）
  configuring() {}
  // 未匹配任何生命周期方法的非私有方法均在此环节*自动*执行
  default () {}
  /* 
    依据模板进行新项目结构的写操作
    Yeoman 自动在生成文件阶段调用此方法
    我们这里尝试通过模板方式写入文件到目标目录
  */
  writing() {
    // 模板文件路径
    const tmpl = this.templatePath('bar.html');
    // 输出目标路径
    const output = this.destinationPath('bar.html');
    // 模板数据上下文
    const context = this.answers;
    this.fs.copyTpl(tmpl, output, context);
  }
  // 处理冲突(内部调用，一般不用处理）
  conflicts() {}
  // 使用指定的包管理工具进行依赖安装(支持npm,bower,yarn)
  install() {}
  // 结束动作，例如清屏，输出结束信息，say GoodBye等等
  end() {}
}

bar.html

1. 创建好之后，链接全局环境
yarn link # or npm link
2. 执行
yo <name>

---

5. 三种代表性的前端脚手架工具

名称	模板框架	多选项生成	支持自定义模板	特点
Yeoman	-	是	是	庞大的生成器仓库
Create-React-App	React	否	是	React官方维护
Vue CLI	Vue	是	是	Vue官方维护