Why would I build a scaffold

Because I love sass, I love generating template files from the command line (angular provides that). Of course, this is not the whole reason. The most fundamental reason is that if I want to start a project, I want to get into the development state quickly, rather than spend time on scaffolding of various libraries to generate the basic project and then add SASS, move template files, and move some basic configuration. Moreover, such tool-based projects can evolve by reinventing themselves and following their own technological advances. The most suitable for their own, or have to adjust ah.

How to build scaffolding

1. Customize the scaffolding name

First, we see the scaffolding input like this:

vue init hello-world
Copy the code

So we developed the scaffold, if we called it my-cli, then we should also type:

my-cli init hello-cli
Copy the code

Instead of typing:

node main.js init hello-cli
Copy the code

That’s not to say you can’t type it that way, but you still have to type it that way if it’s published. It’s too cheap. We should be elegant.

Node naturally supports commands, so we do this in a few steps:

  1. Package. json Adds the bin field

    {..."bin" : {
        "my-cli": "bin/main.js"},... }Copy the code

    Bin /main.js is the path to the execution file, which you can customize.

  2. Edit the main js

    #! /usr/bin/env node
require(".. /src/main.js");
Copy the code

    . / SRC /main.js This is the path to the scaffold’s main logic file, and can be customized.

  3. npm link

    So that links to the global environment, and then you can

    my-cli init xxx
Copy the code

2. Accept the input parameters

On closer inspection, he actually looks like this:

vue init hello-world
Copy the code

Received an action init with a parameter value of hello-world. Then make a scaffold, must be based on the input parameters to do some processing, and then generate a project. Otherwise, it would be better to copy it directly.

If you think of receiving parameters, do you think of process.args? Of course, this is a possible solution, but compared to COMMANDER, it is like the primitive slash-and-burn and modern aircraft cannon. Of course the difference may not be that great, but commander is clearly a better choice.

var commander = require('commander');
commander
    .version('0.0.1'.'-v, --version')
    .usage('Build custom scaffolding')
    .description('To make myself cli');

commander
    .command('init [name]')
    .action((name, value) = > {
        init(name)
    });

commander.parse(process.argv);

function init(name) {
    console.log(name);
}
Copy the code

Here is a website about learning the COMMANDER API: commander. Js Chinese document

At this point, you can type:

my-cli init hello
// hello
Copy the code

The problem of input parameters here should be solved. The specific scaffolding code will be put into Git after I complete it. Only some basic records are made here.

3. Enter a friendly prompt

If you type my-cli init hello-world, you should generate some templates, such as the author, such as which framework to use (if it is input), which components to use (sass, ANTD), etc. Do you need some good hints? Convenient to complete the construction of the project. Another idea that can be offered here, admittedly primitive, but one of the easiest to think of, is to listen for input after console.log. I was just laughing, of course we can’t do that, we want to focus as much as possible on the main logic. So we could use the Inquirer, of course, not the only option, but I happen to know this, so I use it.

var inquirer = require('inquirer');
inquirer.prompt([{
    name: 'projectName'.message: 'Please enter the project name'
}, {
    name: 'projectType'.message: 'Please enter the project type'
}]).then(answers= > {
    console.log(answers);
});
Copy the code

Type my-cli and Please enter the project name and press Enter to go to the next question. When all the questions are answered, you will get answers

my-cli
// ? Please enter the project name hello
// ? Please enter the project type vue
// answers: { projectName: 'hello', projectType: 'vue' }
Copy the code

The code here does not follow on from above (unrelated to the COMMANDER section), but simply shows that there is a component that does what we want.

4. Select up or down components

When you have some optional components, such as SCSS, LESS or CSS directly, do you need an up and down option for your scaffolding? Unstudied, to be solved.

5. The template download progress is displayed

Once the information is filled in and the components are selected, is it time to download the corresponding template file to form a project? At this point, the template downloaded should be remote, so there should be a progress display indicating that the application is downloading the template file, not stuck or lying still. Therefore, it is recommended to use ORA for this function.

var ora = require('ora');
let loading = ora('downloading template ... ');
    loading.start();
    setTimeout((a)= > {
        loading.succeed();
    }, 2000);
Copy the code

6. Download dependencies

When the template file is downloaded, the corresponding dependency should be automatic download, of course, can also prompt him:

cd xxx and npm install and npm start
Copy the code

Friendly words, should be their own download dependencies (your scaffolding grew up, should learn to automatically download dependencies, do not learn my flower chant, now will not own). We haven’t done any research on that yet.

7. Configure related items

Unresolved.

Plug-ins that you need to use

npm i --save inquirer ora commander
Copy the code