The scaffold

Scaffolding is mainly used to initialize projects, such as vue-CLI and create-react-app. Yeoman is mainly introduced here. Compared with the above two, Yeoman is more flexible and can configure the project you want to initialize

The use of the yeoman

Globally install Yo, the Yeoman command-line utility that is used to create projects with a scaffold template (called a generator).

npm install -g yo

Once installed, install a scaffold template. There are many scaffold templates to choose from (yeoman.io/generators/…

npm install -g generator-webapp

Then use Yo to create the project, which is usually yo + scaffold template Generator – the name behind it

yo webapp

Create your own scaffolding using Yeoman

Easiest to use

Start by creating the following file directories

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

Package. json is as follows (the name attribute should be in the form of generator-xxx in accordance with the Yeoman generator creation rules, which can be executed directly with yo XXX)

{
  "name": "generator-test"."version": "1.0.0"."description": ""."keywords": [
    "yeoman-generator"]."main": "index.js"."author": ""."license": "ISC"."dependencies": {
    "yeoman-generator": "^ 5.2.0." "}}Copy the code

App/index. Js as follows

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    constructor(args, opts) {
        super(args, opts)

        // This method adds support for Babel
        this.option('babel')}// An arbitrarily added method that will be called when executed
    dosome() {
        this.log('dosome~')}// This method is private and will not be called
    _private_method() {
        this.log('not call')}};Copy the code

You can see the result of the execution by using Yo test after the NPM link is linked to the global

Interaction with the user

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    async prompting() {
        const answers = await this.prompt([
            {
                type: "input".name: "name".message: "What is the name of your project?".default: this.appname 
            },
            {
                type: "confirm".name: "sass".message: "Do you agree to use sass?"}])this.log('name', answers.name)
        this.log('sass', answers.sass)
    }
};
Copy the code

Pass the yo test haha –nice parameter during startup

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    constructor(args, opts) {
        super(args, opts);
        // Provide support for passing in the first argument
        this.argument('appname', { type: String.required: true });
        // Provide support for incoming --nice format input results are Boolean
        this.option("nice");
    }

    dosome() {
        this.log(this.options.appname);      
        this.log(this.options.nice)
    }
};
Copy the code

Create a simple template

You need to create templates under app and then create templates under Templates

// <%= title %>
console.log('hello world')
Copy the code

And then we write the logic under app/index

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

module.exports = class extends Generator {
    logSome() {
        // Returns the current execution directory
        console.log(this.destinationRoot());
        // Returns the current execution directory /index.js
        console.log(this.destinationPath('index.js'));
        // Return the templates folder under the current generator-test source code
        console.log(this.sourceRoot());
        // Returns the template folder /index.js under the current generator-test source code
        console.log(this.templatePath('index.js'));
    }

    write() {
        this.fs.copyTpl(
            this.templatePath('index.js'),
            this.destinationPath('index.js'),
            { title: 'Templating with Yeoman'}); }};Copy the code

Yo test executes to see the generated file

// Templating with Yeoman
console.log('hello world')
Copy the code

Yeoman. IO /authoring/ I…

The use of the Plop

Plop is much lighter than Yeoman. Plop can be used to create a uniform template when the same files need to be created every time in a project. You don’t need to manually create the same files every time you need to add them.

The installation

npm i plop -D

Create the configuration file plopfile.js

module.exports = plop= > {
    // To create your own actions
    plop.setActionType('doTheThing'.function (answers, config, plop) {
        // answers for user input in this case {name: 'your input'}
        {type: 'doTheThing', name: 'my name', force: false}
        // plop is another plop built-in method
        console.log(answers, config, plop)
        console.log('dosome')});// Set a generator to execute with this name
    plop.setGenerator('test', {
        description: 'test abourt plop'.// User interaction
        prompts: [{type: 'input'.name: 'name'.message: 'input name'.default: 'hello world'],},/ / operation
        actions: [{// adds the file
                type: 'add'.// {{name}} corresponds to the user input above
                path: 'dist/{{name}}.js'.templateFile: 'templates/index.js'}, {// Use the action you created
                type: 'doTheThing'.name: 'my name'},]}); };Copy the code

Create the template file in templates/index.js

// {{name}}
console.log('hello world')
Copy the code

Perform generated

npx plop test

More usage reference: www.npmjs.com/package/plo…