preface

In order to find the most suitable for their own scaffolding, free hands, do the real fool one-key build foundation development framework.

I metYeoman

What is Yeoman? What for? What pain points can we solve in daily development?

Here’s the official description:

Yeoman is a generic scaffolding system allowing the creation of any kind of app. It allows for rapidly getting started on new projects and streamlines the maintenance of existing projects.

According to Yeoman. IO /, Yeoman is a general-purpose scaffolding tool that offers something more basic than vue-CLI and create-react-app scaffolding. We can better expand and build our own scaffolding according to the actual business.

Basic configuration and setup

1. InstallYeoman

First we need to install Yeoman globally

npm install -g yo
Copy the code

2. Create a scaffold folder

Then we need to create a new folder and initialize the NPM. However, it is important to note that Yeoman’s scaffold must start with generator-, for example, if our scaffold is called name, then the scaffold project name must be generator-name.

// Create a folder with the scaffold name (basic-template) mkdir generator-basic-template CD generator-basic-template // initialize NPM NPM initCopy the code

3. Default directory structure

Yeoman has to follow the official directory structure for development. The official description is as follows:

Yeoman’s functionality is dependent on how you structure your directory tree. Each sub-generator is contained within its own folder.

The default generator used when you call yo name is the app generator. This must be contained within the app/ directory.

Sub-generators, used when you call yo name:subcommand, are stored in folders named exactly like the sub command.

Generators/app/index.js/index.js/index.js/index.js/index.js/index.js/index.js/index.js/index.js/index.js/index.js Templates (where you can put whatever directory structure and generic files you want) is the templates folder. The directory structure is as follows:

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

The router directory is a sub-generator named Yo basic-template and Yo basic-template:router.

Of course you can use the following directory structure:

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

The main difference between these two directory structures is the introduction of the files field in package.json:

1) Default package.json

{..."files": ["generators"]... }Copy the code

2) Non-default package.json

."files": [
    "app"."router"]...Copy the code

4. Package. The json file

We need to make appropriate changes to the package.json file

// package.json
{
  "name": "generator-basic-template"."version": "1.0.0"."description": "This is a scaffold template"."main": "index.js"."files": [
    "generators"]."keywords": [
    "yeoman-generator"]."scripts": {},
  "author": ""."license": "ISC"."dependencies": {
    "yeoman-generator": "^ 4.0.0"}}Copy the code

Where files and keywords are default.

Get into the business

Destination file: Generator -> app -> index.js

Install the yeoman – the generator

npm install --save yeoman-generator
Copy the code

The preparation of the index, js

Yeoman / / in the generator
const Generator = require('yeoman-generator')

// Inherit Generator and export
module.exports = class extends Generator {
  constructor (args, opts) {
    super(args, opts)
  }

  / / initialization
  // Your initialization methods (checking current project state, getting configs, etc)
  initializing () {
    this.log('initializing')}// Receive user input (issue a query on the command line)
  // Where you prompt users for options (where you’d call this.prompt())
  prompting () {
    // Yeoman automatically calls this method during the query
    // In this method, the parent class prompt method can be called to issue a query to the user
    // Prompt returns a Promise method
    // Prompt receives an array in which each element is a problem
    this.log('prompting')
    return this.prompt([
      {
        type: 'input'.name: 'name'.message: 'Your project? '.default: this.appname
      }
    ]).then(answers= > {
      // Get the context of the user's input
      this.answers = answers
      this.log(answers)
    })
  }

  / / configuration
  // Saving configurations and configure the project
  // (creating .editorconfig files and other metadata files)
  configuring () {
    // Create configuration related files
    this.log('configuring')}// It is executed by default
  If the method name doesn't match a priority, it will be pushed to this group.
  default () {
    // If the method name is not matched, the method will be entered
    this.log('default')}// Write function (template generation method)
  // Where you write the generator specific files (routes, controllers, etc)
  writing () {
    // This method is called when Yeoman automatically generates files
    // The template directory generates writes in this method
    this.log('writing')

    const ctx = this.answers
    const tmpl = this.templatePath('foo.txt')
    const output = this.destinationPath('foo.txt')
    this.fs.copyTpl(tmpl, output, ctx)
  }

  // Handle conflicts
  // Where conflicts are handled (used internally)
  conflicts () {
    this.log('conflicts')}// Where to install dependencies
  // Where installations are run (npm, bower)
  install () {
    this.log('install')
    // Install dependencies
    // this.npmInstall()
  }

  // At the end
  // Called last, cleanup, say good bye, etc
  end () {
    this.log('⚡ finish')}// // handles the asynchronous case
  // asyncTask () {
  // const done = this.async()
  // setTimeout(() => {
  // done()
  / /}, 1000)
  // }
}
Copy the code

Execution lifecycle:

  1. initializingInitialization, you can obtain project status and configuration.
  2. promptingReceive user input (issue a query on the command line).
  3. configuringSave the configuration and configure the project (create.EditorConfig files and other metadata files)
  4. defaultIf the method name does not match the priority, it will enter the method.
  5. writingThe template directory generates writes in this method
  6. conflictsHandling conflicting locations (internal use)
  7. installInstall dependencies
  8. endThe end of the

Install scaffold to global

Written scaffolding needs to be installed globally using NPM link so that we can use it globally.

For example, we create directory A, go to directory A, and then use Yo basic-template on the command line to quickly set up our directory structure.

Of course, you can post your scaffolding to NPM or Yeoman’s warehouse. This way you can use NPM to install and then use it directly.

conclusion

  1. Global installationYeoman
  2. Create and initialize the directory
  3. writeindex.js
  4. Install to globalnpm link
  5. useyo basic-template

Final directory structure:

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