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

2018-08-29 Node.js 编写自己的Yeoman生成器阅读量85

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

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

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

组织你的生成器

设置为Node Module

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

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

进入生成器文件夹后，创建一个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"
  }
}

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

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

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

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

目录结构

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

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

在示例项目中，目录结构可能如下所示：

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

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

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

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

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

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

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

扩展生成器

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

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

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

1
2
3

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

module.exports = class extends Generator {};

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

覆盖构造函数

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

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

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
  }
};

添加自己的函数

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

让我们添加一些方法：

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

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

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

运行生成器

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

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

在命令行上，从生成器项目的根目录（在generator-name/文件夹中）中键入：

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。