Yeoman工作流模式

最近在做项目重构,于是尝试使用Yeoman完成项目的基础结构和代码的重构。Yeoman的出现确实解决了不少开发流程中的问题,让人更加专注于逻辑代码的部分。

Yeoman是一种工作流模式,它本身不是一种工具。它的目标是通过yo(脚手架工具)、bower(包管理工具)和grunt(自动化构建工具)的合作提高我们的的工作效率。

这里我只对yo进行简单的介绍。

安装

1
2
npm install -g yo
npm install -g generator-name

到此,指定工具安装完成,通过yo name就可以生成相应的代码结构。

yo的运行离不开各种generator,generator定义了脚手架该如何生成,官网上有很多生成器,当然也可以自己写一个生成器。由于是对项目重构,按照实际需求,我自己写了一个生成器。

下面逐步介绍一下自定义generator的过程:

新建

一个generator就是是nodejs模块。新建文件夹,按照Yeoman的要求,新建的文件夹名称必须为generator-*,我的命名为generator-mygen

进入generator-mygen,执行npm init生成package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"name": "generator-mygen",
"version": "0.1.0",
"description": "",
"files": [
"app",
"part"
],
"keywords": ["yeoman-generator"],
"dependencies": {
"yeoman-generator": "^0.24.1"
}
}

name必须以generator-开头,keywords必须包含"yeoman-generator",还要求添加最新版的yeoman-generator依赖,可通过执行npm instakk yeoman-generator --save安装。都是Yeoman的要求,我们照做就行了。

1
2
3
4
5
├───package.json
├───app/
│ └───index.js
└───part/
└───index.js

执行yo mygen命令,调用的就是app\index,所以一个生成器必须包含app文件夹。如果执行子命令,如yo mygen:part,那么调用的就是part\index

生命周期

自定义生成器的关键就是理解generator执行的生命周期。Yeoman提供了基础生成器供我们扩展使用,在这里我们可以对构造函数和各个生命周期进行扩展。

1
2
var generators = require('yeoman-generator');
module.exports = generators.Base.extend();

下面是生命周期执行的顺序:

  1. initializing - 处理用户指定的options或者arguments阶段。
  2. prompting - 和用户交互阶段,内部实现使用了Inquirer.js
  3. configuring - 保存配置文件阶段。
  4. default - 非其他生命周期内的自定义方法执行阶段。
  5. writing - 模板文件处理阶段。
  6. conflicts - 处理文件冲突阶段。
  7. install - 安装bower和npm依赖阶段。
  8. end - 执行结束

*注意,这里给出的只是generator内部的执行顺序,每个周期里执行什么方法是由我们决定的,但最好按照这个顺序执行,避免出现奇怪的错误。

组合

生成器另外一个特别的地方就是各生成器之间的组合调用,一方面可以直接调用别人写好的代码,也可以将我们的处理逻辑拆分,更加方便管理。

default: function () {  

  this.composeWith('mygen:part', {
    options: {}
  }, {
    local: require.resolve('../part')
  })

  this.composeWith('backbone:route', {
  }, {
    local: require.resolve('generator-bootstrap')
  });
}

*注意,按照生命周期执行顺序,组合进来的生成器会按添加顺序依次执行各个生命周期的方法。

调用

在项目中执行npm link,这样就可以通过yo mygen调用生成器了。这样我们的开发流程就变为先通过Yeoman生成基础结构和代码,再上传到gitLab上管理,供大家使用。但是我更希望的是通过Yeoman,大家之后的app创建,组件的生成这类基础代码都可以直接通过命令实现,由于Yeoman基于nodeJs,通过npm管理,内部项目代码不允许公开,于是搭建了npm私服,这样问题就解决了,至此整个过程就完成了。