前言

yeoman作为一款最老牌最通用的一款脚手架工具，他有更多值得我们借鉴和学习的地方，它是一款用于创造现代化web应用的脚手架工具，yeoman更像是一个脚手架运行平台，我们可以通过yeoman搭配不同的genrator去创建任何类型的项目，我们还可以创建自己的generator来定制自己的脚手架，yeoman的优点也正式它的缺点，在很多基于框架开发的眼中，它过于通用，不够专注，我们前端开发更愿意使用像vue-cli这样的比较专注的脚手架工具。

yeoman基本使用

  1. 在全局范围安装yo

    1. npm install yo --global 或者 yarn global add yo

  2. 安装对应的generator

    1. npm install generator-node --global 或者 yarn global add generator-node

  3. 在自己的项目根目录下面通过yo运行generator，运行generator时是运行的 generator- 后面的名字

    1. yo node

    安装过程中会出现下面几个选项：
    image.png

  • Module Name —- 代表项目的名字
  • The name above already exists on npm, choose another? —- 代表此模块在npm上已经存在是否要选择另外一个，选择yes会出现让你重新输入项目的名字-第三行，选择no直接进入下一步
  • Description —- 项目描述
  • Project homepage url —- 项目主页
  • Author’s Name —-项目作者的名字
  • Author’s Email —- 项目作者的邮箱
  • Author’s Homepage —- 项目作者的主页
  • Package keywords (comma to split) —- 模块的关键词
  • Send coverage reports to coveralls —- 是否发送代码覆盖率报告在平台上
  • Enter Node versions (comma separated) —- 输入这个模块的支持版本 如果不输入默认最新版本
  • GitHub username or organization —- github用户名
  • Which license do you want to use —- 项目使用许可证

    yeoman使用步骤总结

  1. 明确你的需求
  2. 找到合适的generator
  3. 全局范围安装这个generator
  4. 通过yo运行对应的generator
  5. 通过命令行交互填写选项

  6. 生成所需要的项目结构

    自定义generator

    generator本质上就是一个npm模块，yeoman的generator必须是以generator-name的格式，如果不采用这种格式，yeoman后续就无法找到所定义的generator

    步骤

  7. 首先创建一个项目根目录，并切换到这个目录

image.png

  1. 执行yarn init命令创建package.json文件

image.png

  1. 执行yarn add yeoman-generator安装这个模块，它提供了生成器的一个基类，这个基类中提供了一些工具函数，让我们创建生成器的时候更加便捷

image.png

  1. 在我们的项目根目录下面创建generator/app/index.js，在index.js中写入以下代码：

image.png
这样以来，我们的简单的generator就完成了，

  1. 通过yarn link方式把这个模块链接到全局范围，使之成为全局包，使得yeoman在工作的时候可以找到这个包
  2. 然后我们就可以执行yo sample 来生成我们的generator了

image.png
执行完命令会生成一个temp.txt文件，这个里面就是刚才我们写入的内容
image.png

  1. 根据模板创建文件，我们创建一个templates文件夹，文件夹下创建一个文件，文件里写点内容

image.png

  1. 我们在生成文件中就可以不用使用fs.writer方法向文件中写入内容了

image.png

  1. 再次运行 yo sample，生成了我们创建的foo.txt文件和里面的内容

image.png
image.png

  1. 用户输入输出，创建prompting

image.png
将我们定义好的answers赋值给模板数据上下文改写：
image.png

Vue generator 案例

  1. 按照上面的前四步操作生成一个generators/app/index.js入口文件

image.png
writing 方法中用于批量生成我们所需要的项目结构

  1. 我们创建一个templates文件夹，把我们所需要的项目结构copy到里面

image.png
将模板中一些需要变化的地方，改写成动态写入的形式（ejs模板标记）
image.png
image.png
image.png

  1. 在writing中对我们需要的项目结构进行遍历，我们先把项目的相对路径用数组的方式展示出来

image.png
遍历的方式写入：
image.png

  1. 通过命令行yarn link 将此模块作为一个全局模块 link到全局

image.png

  1. 之后在新建一个文件夹，执行yo zce-vue，刚才generotor-后面的那个名字，就可以生成我们项目所需要的脚手架拉

image.png