Creating a new project usually requires a variety of configurations, such as webPack configuration, ESLint configuration, installation and configuration of various common libraries, etc. If you have to redo the project every time you create a new project, it is necessary to set up your own common project scaffolding.

Just like vue-CLI, a single vue create my_project command generates the project structure, with webpack and other related infrastructure built in, right out of the box.

Here’s how I used the Yeoman tool to scaffold my own project.

A, install,

npm install -g yo
npm install -g generator-generator
Copy the code

Global install yo, use yo command to execute scaffold yo

, scaffold project name is generator-, execute yo without generator- header. In the case of a generator-Jeyson scaffolding project, the implementation is Yo Jeyson

Global installation creates scaffold generation projects generator-generator, with Yo Generator to generate scaffolding construction projects.

Second, the use of

1, use,yoThe generator scaffolding command executes the generator scaffolding to generate the project to build the scaffolding

yo generator

# popup configuration issue
# Your generator name (generator-my-projects) Scaffold name, e.g. Generator-jeyson-koa
This is jeyson's Koa project
The url of the Project homepage, such as the Project's Github address, can be left blank
# Author's Name is jeyson
Author's Email address: [email protected]
# Author's Homepage, ljclucky.com
# Package keywords (comma to split) Package keywords, separated by commas koa, webpack, mongoose, redis
# Send coverage reports to coveralls whether to Send report Y
# Enter Node versions (Comma Separated) Node version 12.14
# GitHub username or organization
# Which license do you want to use? Agreement, MIT
Copy the code

Generate the project structure in the current directory after configuration:

The generators folder is the most important of these.

  • Generators /app/templates where my project template files will be stored.

  • Generators /app/index.js entry file for scaffolding projects, which will trigger some life cycles:

    1. initializing– Initialization method (check current project status, get configuration, etc.)
    2. prompting– Where the user is prompted to enter options
    3. configuring– Save configuration (create. Editorconfig files and other metadata files)
    4. default– If the method name does not match the priority, it will be pushed to the group
    5. writing– Perform file write operations, that is, write project files to the file system
    6. conflicts– Place to handle conflicts (internal use)
    7. install– Where to run the installation (NPM, BOwer)
    8. end– Run the last command to clear temporary files

2. Copy your project to the template file

Delete the dummyfile.text file in the generators/app/templates directory.

Then copy all project files (except dist and node_modules) to generators/app/templates (for my KOA project) :

3. Configure the Generator entry file

See the full API in the Generator section of the documentation

Modify configuration in file:

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');

module.exports = class extends Generator {
  // Generate your own project with scaffolding
  prompting() {
    this.log(
      yosay(`Welcome to the kryptonian ${chalk.red('generator-jeyson-koa')}generator! `));const prompts = [
      {
        type: 'confirm'.// Confirm type, [Y/n]
        name: 'someAnswer'.// Prompt name
        message: 'Would you like to enable this option? '.// Prompt text
        default: true / / the default value
      },
   / / {
     // type: 'input', // input type
     // name: 'author',
     // message: 'Please enter project author ',
     // default: ''
   // }
    ];

    return this.prompt(prompts).then(props= > {
      this.props = props;
    });
  }

  writing() {
    this.fs.copy(
      // this.templatePath('dummyfile.txt'),
      // this.destinationPath('dummyfile.txt')
      // Change the above to the following, which means when scaffold generation is performed
      // Copy all files under the templates template to the current path
      / / https://yeoman.github.io/generator/actions_fs.html#.copyTemplate to view document
      this.templatePath('* *'),
      this.destinationPath('/'),
      {
        globOptions: {
          dot: true.// Match belt. The file
          nodir: true // Note: this option does not match the empty directory}}); }install() {
    // NPM installs all dependencies
    this.npmInstall(); }};Copy the code

Three, publish,

Once all the above configurations are complete, you can publish.

1. Test locally before release

Verify that our command line is under the current scaffold project directory, and then type the command:

npm link
# If you want to unlink NPM
Copy the code

This will link our current scaffold project to global node_modules. Then we’ll create a new folder, demo, go to that directory and type the following command:

yo jeyson-koa
# yo your-project is the scaffold name set above, without generator-
Copy the code

Execute this command and it will find the previously linked scaffolding project from the global node_modules, and then execute the project in the current demo path to generate your project.

Run the project to test whether it works properly.

2. Publish project scaffolding to NPM warehouse

Once the local testing is complete, you can publish to the NPM online repository.

First you need to register your NPM account, and then log in from the command line:

npm login
Copy the code

Then enter the scaffolding project using the command:

npm publish
Copy the code

Note: Scaffolding items need to be confirmed before Postingpackage.jsonIn theversionTo give a1.0.0The above version.

Once published, the package can be found on the NPM website, so that the scaffold can be downloaded and used anywhere, such as:

# Global scaffolding installation project
npm install -g generator-jeyson-koa
# Run scaffolding with yo command
yo jeyson-koa
Copy the code