编写自己的Yeoman生成器-1.入门

Generators(生成器)是Yeoman生态系统的基石。它们是yo为最终用户生成文件所运行的插件。

阅读本节,您将学习如何创建和分发自己的内容。

注意:我们构建了一个生成器 - Generator,以帮助用户开始使用自己的生成器。一旦理解了以下概念,请随意使用它来引导您自己的生成器。

组织你的生成器

设置为Node Module

生成器的核心是Node.js模块

首先,创建一个文件夹,在其中编写您的生成器。文件夹必须命名generator-name(name您的生成器的名称)。这很重要,因为Yeoman依赖文件系统来查找可用的生成器。

进入生成器文件夹后,创建一个package.json文件。此文件是Node.js模块清单。您可以从通过命令行npm init运行来生成此文件或手动输入以下内容:

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

该name必须以generator-为前缀。该keywords属性必须包含"yeoman-generator",并且repo必须具有由我们的生成器页面索引的描述。

您应该确保将依赖项yeoman-generator设置为最新版本。你可以通过运行:npm install --save yeoman-generator

files属性必须是生成器使用的文件和目录数组。

根据需要添加其他package.json属性

目录结构

Yeoman的功能取决于您如何构建目录结构。每个子生成器都包含在自己的文件夹中。

调用时使用的默认生成器yo nameapp生成器。这必须包含在app/目录中。

在示例项目中,目录结构可能如下所示:

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

这个生成器将公开yo nameyo name:router命令。

Yeoman允许两种不同的目录结构。它会查看./generators/注册可用的生成器。

前面的例子也可以写成如下:

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

如果使用这里的第二个目录结构,请确保将package.jsonfiles属性指向所有生成器文件夹。

1
2
3
4
5
6
{
"files": [
"app",
"router"
]
}

扩展生成器

一旦你有了这个结构,就可以编写实际的生成器了。

Yeoman提供了一个基本生成器,您可以扩展它以实现自己的行为。这个基础生成器添加了您希望减轻任务的大部分功能。

在生成器的index.js文件中,以下是扩展基本生成器的方法:

1
2
3
var Generator = require('yeoman-generator');

module.exports = class extends Generator {};

我们以module.exports分配扩展生成器使其可用于生态系统。这是我们在Node.js中导出模块的方式

覆盖构造函数

某些生成器方法只能在constructor函数内部调用。这些特殊方法可能会执行诸如设置重要状态控件之类的操作,并且可能无法在构造函数之外运行。

要覆盖生成器构造函数,请添加如下构造函数方法:

1
2
3
4
5
6
7
8
9
10
module.exports = class extends Generator {
// The name `constructor` is important here
constructor(args, opts) {
// Calling the super constructor is important so our generator is correctly set up
super(args, opts);

// Next, add your custom code
this.option('babel'); // This method adds support for a `--babel` flag
}
};

添加自己的函数

添加到原型的每个方法都会在调用生成器后运行 - 通常按顺序运行。但是,正如我们将在下一节中看到的,一些特殊的方法名称将触发特定的运行顺序。

让我们添加一些方法:

1
2
3
4
5
6
7
8
9
module.exports = class extends Generator {
method1() {
this.log('method 1 just ran');
}

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

当我们稍后运行生成器时,您将看到这些到控制台的行记录。

运行生成器

此时,你有一个可以工作的生成器。下一个合乎逻辑的步骤是运行它并查看它是否有效。

由于您在本地开发生成器,因此它尚未作为全局npm模块提供。可以使用npm创建全局模块并将其符号链接到本地​​模块。这是你想要做的:

在命令行上,从生成器项目的根目录(在generator-name/文件夹中)中键入:

1
npm link

这将安装您的项目依赖项和符号链接全局模块到您的本地文件。完成npm后,您将能够调用yo name,您应该看到在终端中呈现前面this.log定义的的内容。恭喜你,你刚刚建造了你的第一台生成器!

找到项目根目录

在运行生成器时,Yeoman将尝试根据其运行的文件夹的上下文来计算出一些内容。

最重要的是,Yeoman在目录树中搜索.yo-rc.json文件。如果找到,它会将文件的位置视为项目的根。在幕后,Yeoman会将当前目录更改为.yo-rc.json文件位置并在那里运行请求的生成器。

存储模块创建.yo-rc.json文件。this.config.save()首次从生成器调用将创建该文件。

因此,如果您的生成器未在当前工作目录中运行,请确保您目录树中的某个位置没有.yo-rc.json

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2021 朝着牛逼的道路一路狂奔 All Rights Reserved.

访客数 : | 访问量 :