小猿大圣

编写自己的 Yeoman 项目生成器 | Yeoman

小猿大圣 · 2017-01-12翻译 · 781阅读 原文链接

Generators (生成器)是 Yeoman 生态系统的基础。使用 Yeoman 的用户,只要对相应的 generator 运行yo 命令,就可以生成项目文件。

阅读本节,你将学习如何打造自己的 Yeoman 项目生成器。

注: 我们构建了一个 generator-generator帮助用户构建他们自己的 generator 。一旦你理解了下面的概念,就可以自如的构建你自己的 generator。

组织你自己的生成器( generators)

作为一个 node 模块安装

一个 generator 的核心就是一个 Node.js 模块。

首先,为你即将写的 generator 创建一个文件夹。这个文件夹必须以generator-name 的格式命名(这的name是你生成器的名字)。 这一点很重要,因为 Yeoman 依赖文件系统查找可使用的 generator。

现在进入你的 generator 文件夹,创建一个package.json 文件。 这个文件表明它是一个 Node.js 模块。你可以在命令行运行 npm init 命令生成该文件,或者手动输入以下内容:

{
  "name": "generator-name",
  "version": "0.1.0",
  "description": "",
  "files": [
    "generators"
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": "^1.0.0"
  }
}

这个 generator 的name 属性必须带有 generator- 前缀。keywords 属性必须包含"yeoman-generator" 并且为了能被我们的 generator 汇总页面索引到,这个仓库必须有一个描述。

你应该确保你使用的yeoman-generator 依赖是最新版本的。你可以这样做,通过运行命令:npm install --save yeoman-generator

files 属性一定是一个包含文件和目录的数组,那些是你生成器所使用的。

当你需要的时候,可以添加其他的 package.json 属性

文件目录结构

Yeoman 会深度链接到文件系统和你组织的目录树。每个 sub-generator 都被包含在它自己的文件夹内。

当你使用 yo name 命令时,会启用默认的 app generator。这样一定包含在 app/ 目录内。

当你使用 yo name:subcommand 命令时,Sub-generators 将被使用, 被存储在名为 subcommand的文件夹中(比如你的subcommand是 babel,文件夹名称就是 babel)。

比如在这个示例项目中,目录结构如下:

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js

这个 generator 将提供 yo nameyo name:router 命令。

Yeoman 允许在两个不同的目录结构中。它会在 ./generators/中寻找去注册可用的 generators。

前面的例子也可以如下:

├───package.json
├───app/
│   └───index.js
└───router/
    └───index.js

如果您使用此第二个目录结构,确保你已经在你的 generators 文件夹下的 package.jsonfiles 属性中指出。

{
  "files": [
    "app",
    "router"
  ]
}

扩展 generator

一旦你的结构准备就绪,就可以开始写一个实际的 generator 了。

Yeoman 提供了一个基础的 generator,你可以基于它,扩展实现你自己的操作。这个基本的 generator 将添加大部分的功能,希望能减轻你的任务。

在 generator 的 index.js 文件中,你可以这样由这个基本的 generator 去扩展:

var Generator = require('yeoman-generator');

module.exports = class extends Generator {};

我们将扩展的 generator 分配给 module.exports,使其能够提供给生态系统。 Node.js export modules 看这里。

如果你需要支持 ES5 环境, 静态类Generator.extend() 可以扩展基类,并且允许你提供新的原型。 这个功能来自于 Class-extend 模块,如果你使用过 Backbone 你应该很熟悉。

重写构造函数

一些 generator 方法只能在 cconstrutor 函数中调用。这些特殊的方法可以做类似设置重要的状态控件的事情,也可能不在构造函数之外的函数。

重写 generator 构造器,你可以通过一个构造函数去 extend() 像这样:

module.exports = class extends Generator {
  // `constructor` 这个名字在这里很重要
  constructor(args, opts) {
    // 调用超级构造函数很重要,我们的生成器将被正确设置
    super(args, opts);

    // 接下来,添加你的代码
    this.option('babel'); // 此方法对`--babel` 标记添加支持
  }
};

添加你自己的功能

每个被加入到原型的方法,generator 都会运行一次,这叫做常驻序列。但是,正如我们在下一节中看到的,一些特殊的方法名称将触发一个特定的运行顺序。

让我们添加一些方法;

module.exports = class extends Generator {
  method1() {
    console.log('method 1 just ran');
  }

  method2() {
    console.log('method 2 just ran');
  }
};

当我们运行这个 generator 后,你将在控制台看到这些打印出的内容。

运行 generator

在这一点上,你有一个工作的 generator。下一个合乎逻辑的步骤是运行它,看看它是否工作。

因为你是在本地开发的 generator,它还不能够作为一个全局的 npm 模块去获取。一个全局模块可以被创建并能使用 npm 链接到本地。你可能想这样做:

在命令行中,从你的 generator 项目的根目录(在 generator-name/ 文件夹),输入:

npm link

这将安装你的项目依赖项和链接一个全局模块到本地文件。npm 下载完后,你将能够使用 yo name,并且你应该能看到 console.log,预先定义,在终端中渲染。祝贺你,你已经建立了你的第一个 generator!

找到项目根目录

当你运行一个 generator,Yeoman 将以文件夹内容为基础计算出一些事情,然后运行它。

最重要的是,Yeoman 将从目录树中搜索 .yo-rc.json文件。如果发现,它会以该文件的位置作为项目的根。在后台,Yeoman 会该改变 .yo-rc.json 文件在当前文件的定位,并且在那儿运行 generator 请求。

存储模块创建 .yo-rc.json 文件。generator 在第一次运行 this.config.save() 将创建这个文件。

所以,如果您的 generator 没有在您当前的工作目录中运行,确保你是否有 .yo-rc.json 在你的目录树中。

接下来做什么?

读到这里之后,您应该能够创建一个本地 generator 并运行它。

如果这是你第一次写一个 generator,你一定要读下一节 运行上下文和循环运行。这一部分是理解 generator 运行语境至关重要,并确保它将与其它的 generator 和谐的组成 Yeoman 生态系统。文档的其他部分将提供的功能在Yeoman 的核心,它就是用来帮助你实现你的目标。

发现一个错误?一个不清楚的例子?通过派生并发送你的修改和建议来帮助我们改进文档。改善此页面!

注: Yeoman 中文网

相关文章