The results show

CMD executes the command line

MCF add // MCF add // MCF add // MCF list // MCF init < template name > [project address] MCF delete < template name > // MCF delete template MCF create-vue test // Create vue projectCopy the code

The above command lines give you an idea of what the McF-cli can do, and how

The starting point

Since I learned VUE by myself, I was always amazed by the front-end engineering development steps. I built a VUE project from 0 with VUE-CLI, and configured it step by step. Then NPM I, NPM run Dev, opened the link localhost:8080, and a web page was written like this. ‘NB.

With more learning and use, why can’t we build our own scaffolding tools! Just do it!

The essence of scaffolding

As shown in figure:

  1. Command parsing. This can be done with commander.
  2. File operation, copy, paste, add, delete, new file content, replace; This can be done with fs-extra; 3. Template file, write a most awesome (CU) force (Lou) template project with their own superficial understanding of front-end engineering;

Apply for an NPM account, this is not the function of implementation, it is ancillary work;

meaning

As the concept of front-end engineering becomes more popular, scaffolding is a command line tool introduced to reduce repetitive work. Get rid of CTRL + C, CTRL + V.

Now a new front-end project is no longer a simple matter of introducing CSS in the HTML header and JS in the tail. CSS is written in Sass or Less, introduced in JS, and then dynamically built into HTML.

In addition to learning basic JS, CSS syntax and popular framework, we also need to learn how to configure webpack, Babel and other building tools, how to start front-end services, how to hot update; In order for the editor to check errors during writing and be more formal, we also need to introduce ESlint; Some projects even need to introduce unit testing (Jest).

For a beginner, this can be daunting.

The appearance of front-end scaffolding makes things simple, one key command, a new project, and then execute two NPM commands, run a project.

When you get started, you don’t have to worry about configuration, you just have fun writing code. In addition, for many systems, their page similarity is very high, so it can be based on a set of templates to build, although different people develop, but with scaffolding to build, the same project structure and code writing norms, is very conducive to the later maintenance of the project

Prepare knowledge

Old, like to talk, talk far, back to the topic, start to do, first of all, we need to carry out some preparatory work:

1, commander

Commander.js is a package (library) that helps you quickly develop node.js command-line tools.

Script interpreter:

#! /usr/bin/env node
Copy the code

In the first line of the code, we must specify the interpreter that our script will need to execute, in order to use Env to find Node and use Node as the interpreter for our program.

2. Chalk plugin

Chalk is a color plugin. You can change the color with chalk. Blue (‘ Hello world ‘)

const chalk = require('chalk') ... console.log(chalk.blue('Hello') + 'World' + chalk.red('! ')); console.log(chalk.blue.bgRed.bold('Hello world! ')); console.log(chalk.blue('Hello', 'World! ', 'Foo', 'bar', 'biz', 'baz'));Copy the code

Download git-repo plugin

Download-git-repo is a plug-in for downloading projects from Git. The basic usage is as follows

var download = require('download-git-repo'); Download (' This parameter? ', 'destination address ', function (err) {console.log(err? 'Error' : 'Success') })Copy the code

Ora plugin

Used to implement the loading effect of the Node.js command line environment, and display various state ICONS, etc

Usage:

const ora = require('ora') ... Const spinner = ora(' downloading project template ') spinner. Start ()... spinner.fail() ... spinner.succeed()Copy the code

5. Inquirer plugin

Inquirer. Js can be used to handle command line interaction functions. The usage is actually quite simple:

const inquirer = require('inquirer') inquirer.prompt([ { name: 'projectName', message: 'please input projectName'}]). Then (answers => {console.log(' you input projectName: ${answers.projectname} ')}).Copy the code

Prompt () takes data from a question object, stores the user’s input in an answer object during the user’s interaction with the terminal, and returns a Promise to retrieve the answer object through then(). So easy!

Metalsmith plugin

It’s a static website generator that can be used for batching template scenarios, like Wintersmith, Assemble, Hexo. One of its biggest features IS the EVERYTHING IS PLUGIN, so metalsmith IS essentially a glue framework that works by gluing together various plugins.

Handlebars template

For the template engine I chose Handlebars. Of course, there are other options available, such as EJS, JADE, swiG.

Use handlebars syntax to make some changes to the template, such as modifying package.json in the template

8. Registration of NPM account

www.npmjs.com/signup the website registration, registration needs to pay attention to the pit,

Username, password, email 3 remember clearly, when you need a username, when you need a password, when you need an email, fill in the need to see clearly, don’t ask me how to know, more than a few pit you know what!

9. Creation, development and release of NPM packages

NPM init Initializes the project. NPM login Enter username, password, and email in sequence. NPM pubic Publishes the projectCopy the code

And other command lines

npm adduser
npm link
npm unlink
Copy the code

I can think of so much for the time being, there is a need to add later!

benefits

Make projects go from “build-development-deploy” faster and more standardized. Don’t let yourself be a coder. Be able to write and understand principles