1. package your own scaffold 2 Create code module

Use node Script encapsulation

Use yeoman-generator Encapsulate your own scaffolding

1. mkdir generator-ai-cli

2. npm init -y

3. npm install yeoman-generator --save

4. Directory structure
   

5. mkdir generators/app/index.js

// generators/app/index.js
const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    
  prompting () {
    
  //  Command line interaction mode 
    return this.prompt([
      {
    
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname
      }
    ])
    .then(answers => {
    
      this.answers = answers
    })
  }

  writing () {
    
    //  Convert every file to the target path through the template 

    const templates = [
      '.browserslistrc',
      '.editorconfig',
      '.env.development',
      '.env.production',
      '.eslintrc.js',
      '.gitignore',
      'babel.config.js',
      'package.json',
      'postcss.config.js',
      'README.md',
      'public/favicon.ico',
      'public/index.html',
      'src/App.vue',
      'src/main.js',
      'src/router.js',
      'src/assets/logo.png',
      'src/components/HelloWorld.vue',
      'src/store/actions.js',
      'src/store/getters.js',
      'src/store/index.js',
      'src/store/mutations.js',
      'src/store/state.js',
      'src/utils/request.js',
      'src/views/About.vue',
      'src/views/Home.vue'
    ]

    templates.forEach(item => {
    
      // item =>  Each file path 
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.answers
      )
    })
  }
}

package.json

{
    
  "name": "generator-ai-cli",
  "version": "0.1.0",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    
    "yeoman-generator": "^4.0.1"
  }
}

5. Prepare template file , The storage path of the template file ：generators/app/templates

generators/app/templates
 file 

6. yarn link
7. yo ai-cli

plop： Use plop Create code modules

1. scene ： Use plop Create code modules
It must be with yarn, Use npm It seems that the generation was unsuccessful .

1. yarn install plop --save
2. touch plopfile.js
   plop Entry file ：
   // Plop Entrance file , You need to export a function
   // This function receives a plop object , Used to create generator tasks

module.exports = plop => {
    
  /** setGenerator Parameters ： component：  The name of the generator  {}:  Generator configuration  */
  plop.setGenerator('component', {
    
    description: 'create a component',
    prompts: [
      {
    
        type: 'input', // //  Input mode 
        name: 'name', //  Key of the return value of the problem 
        message: 'component name', //  The prompt given on the screen 
        default: 'MyComponent', //  The default answer to the question 
      }
    ],
    actions: [
      {
    
        type: 'add', //  Add representative file 
        path: 'src/components/{
    {name}}/{
    {name}}.js', //  Add the specific path of the file 
        templateFile: 'plop-templates/component.hbs' //  Add the template file path of the file 
      },
      {
    
        type: 'add', //  Add representative file 
        path: 'src/components/{
    {name}}/{
    {name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
    
        type: 'add', //  Add representative file 
        path: 'src/components/{
    {name}}/{
    {name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs'
      }
    ]
  })
}

Template file ：

// plop-templates/component.css.hbs
import React from 'react';

export default () => (
  <div className="{
    {name}}">
    <h1>{
    {
    name}} Component</h1>
  </div>
)

// plop-templates/component.css.hbs
.{
    {
    name}} {
    
  
}

// plop-templates/component.test.hbs
import React from 'react';
import ReactDOM from 'react-dom';
import {
    {
    name}} from './{
    {name}}';

it('renders without crashing', () => {
    
  const div = document.createElement('div');
  ReactDOM.render(<{
    {
    name}} />, div);
  ReactDOM.unmountComponentAtNode(div);
});

yarn plop component ( The name of the generator )
Carry out orders ：yarn plop component
effect ：