This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

what

Generator is an NPM package whose name starts with generator-, such as generator-webapp. After a global installation, the yo webapp command actually executes this generator.

directory

Package. Json reference:

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

Directory structure:

├ ─ ─ ─ package. Json └ ─ ─ ─ generators / ├ ─ ─ ─ app / │ └ ─ ─ ─ index. The js └ ─ ─ ─ the router / └ ─ ─ ─ the index, jsCopy the code

The index.js file is the main code for the generator. To execute yo name is to execute app/index.js, and if there are other subcommands, create a sibling directory under app. For this example, To execute yo name:router is to execute router/index.js

Run context

A generator might look something like this:

app/index.js

The runtime object is an instance of this class, and the methods on its prototype (either custom or provided by it) are executed in the order in which they are run.

Execution order

  1. initializing– Initialization is performed first. You can perform operations such as checking the environment and obtaining configurations
  2. prompting– callthis.prompt()To provide interactive access to user options
  3. configuring– Save the configuration or create the project configuration file (e.g.editorconfigOr other meta-files)
  4. default– Custom methods are executed here.
  5. writing– Generate file
  6. conflicts– Resolve conflicts here
  7. install– Execute install here
  8. end– The last call, which can handle operations such as resource release

The code is clearer: app/index.js

const Generator = require('yeoman-generator'); module.exports = class extends Generator { constructor(args, opts) { super(args, opts); } initializing() { this.log('initializing'); } prompting() { this.log('prompting') } configuring() {this.log('configuring') } default() { this.log('default') } writing() { this.log('writing') } conflicts() {this.log('conflicts') } install() { this.log('install') } end() { this.log('end') } _private_method() { this.log('private hey'); } method1() { this.log('method 1 just ran'); } method2() { this.log('method 2 just ran'); }};Copy the code

Do NPM link, and then find a place to do Yo name,

As shown, custom method1 and method2 are executed after default and before writing, whereas if we don’t want a method to be executed in context, we can prefix the method name with _, such as _private_method

Commonly used API

log

Yeoman provides this.log, so you don’t need to write console.log

promot

Yeoman integrates Inquirer. Js, which is the primary means of interaction with users. The results obtained from promots can be saved on this for use in subsequent methods.

fs

Yeoman also integrates with the MEM-fs Editor, using this.fs directly. And supports template with ejS Template syntax:

template/index.html

<html>
  <head>
    <title><%= title %></title>
  </head>
</html>
Copy the code

app/index.js

this.fs.copyTpl(
      this.templatePath('index.html'),
      this.destinationPath('public/index.html'),
      { title: this.answers.title } // user answer `title` used
    );
Copy the code

path

Yemoman provides some simple apis for getting and concatenating paths:

This.destinationroot (): the absolute path to the directory in which the command is currently running, passing ina concatenation of arguments: This.destinationpath (‘sub/path’), of course you can change it this.destinationRoot(‘new/path’)

This.sourceroot (): The absolute path to the generator template directory. Alternatively, a parameter concatenate can be passed through this.templatepath (‘app/index.js’)

dependencies & install

Yeoman provides the this.packageJson object, whose merge method makes it easy to manipulate JSON objects; And after the write phase, the object will generate package.json and write it to the appropriate location.

You can also organize the JSON and write it to the appropriate location.

After 5.0.0, the Generator automatically installs dependencies during install and sniffers for changes to package.json in the this.env. CWD directory.

If this.destinationroot () changes, package.json may not be detected, which can be fixed by this.enp.cwd = this.destinationroot ().

The command

Yeoman provides the spawnCommandapi, which can perform other commands such as manually installing dependencies, performing Git-related operations, and more.

In actual combat

With these instructions you are ready to go into the field. The next article will cover the writing and publishing of the Generator.