preface

Recently, I mainly wrote the front-end template class project. Due to the webpack configuration and the introduction of data injection EJS template method are almost the same, so I extracted the template framework as a common scaffold, which is convenient for colleagues to reuse in the future.

Yeoman was mentioned in “Front-end Engineering: System Design and Practice” to build scaffolding, so I used Yeoman to build scaffolding

To prepare

1. Node environment

Run the node -v command on the terminal. If the node version number is displayed, the Node environment is available

2. Install the Yeoman toolset

npm install --global yo
Copy the code

Verify that it has been installed

yo --version
Copy the code

Create a base frame for scaffolding

1. Create a folder and name it generator-name, where name is the name of the generator.

NPM init initializes the project, adding to package.json:

// files name should be the same as the project directory name, such as app, the contents of app will be found when the project is initialized"files": [
    "app"]."keywords": [
    "yeoman-generator"].Copy the code

And dependencies

"dependencies": {
    "chalk": "^" 2.4.2."glob": "^ 7.1.3." "."lodash": "^ 4.17.11"."yeoman-generator": "^ 3.2.0"
  }
Copy the code

2. Create the app folder and create the index.js file

/ / introduce yeoman - the generatorlet Generator  = require('yeoman-generator'); Module.exports = class extends Generator {// Queries when scaffolding is installedprompting(){
    var questions = [
      {
        type: 'input',
        name: 'projectName',
        message: 'Enter project name',
        default: this.appname
      },
      {
        type: 'input',
        name: 'projectAuthor',
        message: 'Project Developer',
        store: true,
        default: ' '}, {type: 'input',
        name: 'projectVersion',
        message: 'Project Version Number',
        default: '0.0.1'}]return this.prompt(questions).then(
      function(answers){
        for(var item in answers){
          answers.hasOwnProperty(item) && (this[item] = answers[item]);
        }
      }.bind(this));
  }
  writingCopy (this.templatepath (){this.fs.copy(this.templatepath ()){this.fs.copy(this.templatepath ());'module/'),
      this.destinationPath(' ')); }}Copy the code

3. Create a templates file and scaffolding your own content under the directory where index.js mentioned copying the content block

The directory is as follows :(module is your entire scaffold content)

Connection project

npm link
Copy the code

validation

Create a new project, workpalce, and execute yo

Publish to NPM

1. NPM registration

Register on NPM

2, the login

Execute NPM login on the console and you can see:

3, release

Publish NPM public to NPM in the root directory of the generator-name project

Note: Every time you upload after a change, you need to change the version on package.json

Generally, versions are divided into three divisions: A.B.C

  • A indicates the major version number, which is usually modified when the project is undergoing major changes. If a is 0, the project is in the development stage.
  • B represents the function update, or when the project module changes.
  • C stands for minor changes, such as bug fixes.

Download scaffolding on NPM

1. Make sure you have Yo installed locally

yo --version
Copy the code

2, download

To put scaffolding on your own YO, run NPM install -g generator-CMS -module

3, the reference

When you run Yo on your project, you will see a personal generator for the Cms Module. Select and enter the message prompted to add the scaffolding code create to your project

github