preface

Scaffolding means Scaffolding. In the field of front-end engineering, this can be thought of as a basic template for a project. Scaffolding allows us to create projects with the same organizational structure, development paradigm, module dependencies, tool configuration, and base code

Scaffolding classification

Scaffolding falls into two main categories, one for a specific front-end frame. One is a general purpose scaffold.

Front frame scaffolding

  • React: create-react-app
  • Vue: Vue-Cli
  • Angular: Angular-Cli

Universal scaffold

  • Yeoman
  • Plop

Yeoman

The Web’s scaffolding tool for modern Webapps is a general-purpose scaffolding for creating Web applications. With the Generator provided by Yeoman we can create different types of projects.

Based on using

Here are the steps to create a project with the Generator.

  1. For global installation, use YARN or NPM.
yarn add yo -g | npm install yo -g
Copy the code
  1. Install the generator for the project type.
yarn add generator-node -g | npm install generator-node
Copy the code

If you use YARN, an error cannot be found using the yo command. In this case, replace the yo command with NPM global installation. The same is true for a generator-node module.

  1. Run the generator.
yo node
Copy the code

Sub Generator

Usage scenario: Create a file in an existing project based on the specified template. This is useful when you do not need to create a project with the full generator and only need some functionality. The steps are as follows:

  1. Create CLI commands and command rules
yo node:cli
Copy the code
  1. Add the module to the global scope using YARN Link so that cli commands can be used on terminals.
yarn link
Copy the code
  1. Install sub Generator dependencies
yarn
Copy the code
  1. View the module addition result
My-module --help // my-module is the Sub generator nameCopy the code

Not all generators support the creation of Sub generators. You need to check the corresponding generator documents.

A custom Generator

Generator name: generator-\

. The steps are as follows:

  1. Create a custom generator under the current project. The generator created in step 4 will use the generator provided by Yeoman as the base template.
mkdir generator-sample cd generator-sample yarn init | npm init yarn add yeoman-generator | npm install yeoman-generator  code .Copy the code
  1. Create the following directory in vscode:
generators/app/index.js
Copy the code

Index. Js as follows:

/** * index. js is a Generator entry file that needs to export a type inherited from the Yeoman Generator module * when the Yeoman Generator runs, it calls the corresponding workflow method. In these methods, we can use the utility * methods provided by the parent class, such as file writing, etc. * /

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  writing() {
    /** * Yeoman automatically calls this method when it generates a file * we can try to write the method in the current project directory * fs is the fs module that Yeoman encapsulates, which is more powerful * The write function takes the first argument to the path of the file to be written and the second argument to the content of the file to be written. * /
    this.fs.write(this.destinationPath("temp.txt"), Math.random().toString()); }};Copy the code
  1. Use YARN Link to register the generator module on the file path in step 1
yarn link
Copy the code
  1. Use the registered generator module
yo sample
Copy the code

Create files based on templates

Template files support EJS syntax.

The contents of the EJS template file sample. TXT are as follows:

I am a title: <%= title %>Copy the code

Add the following logic to the writing callback of the previous code:

const tmpl = this.templatePath("foo.txt");
// Outputs the destination path
const output = this.destinationPath("foo.txt");
// Template data context
const context = { title: "Hello fujihai".success: false };
this.fs.copyTpl(tmpl, output, context);
Copy the code

Processing user input

Only the last insurgent function is handled by the user input

prompting() {
    /** * The user input is an array in which each item is a question */
    return this.prompt([
      {
        type: "input".name: "name".message: "Your project name".default: this.appname // Project file name
      }
    ]).then(answer= > {
      // Input results are stored in the answer object in the form of key:value
      // This is available in the writing function
      this.answer = answer;
    });
  }
Copy the code

Vue program Generator

  • Prepare basic project structure files (e.g. SRC, package.json)
  • To create ageneratorNew project, writtengenerator/app/index.jsfile
  • prompting– User input processing
  • templateThe directory is preparedgenerator/app/template. In the template file, use EJS syntax where you need to replace user input.
  • writing– Don’t copy files
  • yarn linkAdd generator to the local global module. Create a new project directory to use in the new project directoryyo generatorInitializes the creation of a new project in the form of name.

How to Publish a Generator

  • yeoman.io/authoring/
  • medium.com/@vallejos/y…