Initialize the project

npm init
Copy the code

Create index.js and write:

#! /usr/bin/env node

console.log('JM - CLI Scaffolding tool')
Copy the code

Configure the bin field in package.json

{
  "name": "jm-cli"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""."license": "ISC"."bin": {
    "jm": "index.js"}}Copy the code

Execute NPM link command to global (NPM unlink removes global command)

Run the command test configured in bin

Here, for example:

jm
Copy the code

The output is as follows:

Jm - CLI scaffolding toolCopy the code

Command line tool parameter design

Jm -- help to see use help jm - V | -- the version number of the jm version checking tool list lists all the available templates jm init < template - name ><project-name>Initializes the project based on the specified templateCopy the code

Use the COMMANDER module to process the command line

Install the commander:

npm install commander
Copy the code

Introducing the commander

#! /usr/bin/env node
const program = require('commander')

program.version('1.0.0'.'-v, --version')
 
Copy the code
  • Calling version(‘1.0.0’, ‘-v, –version’) adds -v and -version to the command line, and you can print the version number with these options
  • Call command(init) to define the init command, and name is the required parameter, which is the project name
  • Action () is what happens when you execute the init command, and this is where the process of building the project takes place, just printing the name for the moment

Type the following command to test:

jm --help
jm -V
Copy the code

Download the template

Installation:

npm install download-git-repo
Copy the code

Modify the index.js code

const program = require('commander')
const download = require('download-git-repo')

program
  .command('init <template> <project>')
  .description('Initialize the project template')
  .action(function(templateNane, projectNane) {// Download the corresponding template to the local directory and name it projectName download('httop://xxxxxx:9999:html5/h5template#master', name, {clone: true}, (err) => {
      console.log(err ? 'Error' : 'Success')})});Copy the code

  • The first argument to download() is the repository address

    ○ The following slash (/) must be written as:

    ○ #master indicates the branch name

    Different templates can be placed in different branches. Changing branches enables different template files to be downloaded

  • The second parameter is the path

    ${name} = test/${name}

Command line interaction

Install the inquirer:

npm install inquirer
Copy the code

After the user runs the init command, the cli interaction function asks the user a question, receives the user’s input, and processes the problem accordingly. This is done using inquirer. Js

const inquirer = require('inquirer')

inquirer.prompt([{
	type: 'input',
	name: 'author',
	message: 'Please enter author name'
}]).then((answers)=>{
	console.log(answers.author)
})
Copy the code
  • The problem is in prompt()
  • The type of the question is input which is the input type
  • Name is the key in the answer object
  • Message is the problem

Apply colours to a drawing template

Prepare the package.json file in the template:

{
  "name": "{{ name }}"."version": "1.0.0"."description": "{{ description }}"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "{{ author }}"."license": "ISC"
}
Copy the code

After downloading the template, render the user’s input into package.json

const program = require('commander')
const download = require('download-git-repo')
const handlebars = require('handlebars'// The template engine handles strings const inquirer = require('inquirer')
const fs = require('fs')
Copy the code

The node.js file module FS is used here, and the renderings of handlebars are written back into the file.

Visual beautification

After the user enters an answer, the template is downloaded, and ora is used to indicate that the user is downloading.

Ora installation:

npm install ora
Copy the code
const ora = require('ora'Const spinner = ora()'Downloading templates... 'Spinner. Start () // Call spinner. Fail () // Call spinner.Copy the code

Then, the chalk will add styles for the printed information, such as green for the success information and red for the failure information, which will make it easier for users to distinguish and make the display of the terminal more beautiful.

Contracted out NPM

npm install --global jm-cli
Copy the code

  1. Go to nPMjs.com

  2. Register an NPM account

  3. Check NPM for identical package names

  4. Change the name in Chiang package.json to the package name published to NPM

    Tip: Independent of the local project name

  5. Open the console and run NPM login to login to NPM on the console

  6. After successful login, perform NPM publish publish under the project

The directory structure

. ├ ─ ─ doc project related documents ├ ─ ─ public static resource will be copied to the output directory in public (dist) │ ├ ─ ─ the config global configuration file can be modified after (packaging) │ │ ├ ─ ─ config. Js global baseURL │ ├ ─ ─ ├─ SRC source directory │ ├─ API │ ├─ Assets API │ ├─ SRC Source directory │ ├─ API │ ├─ Assets CSS, JS, images, etc. │ ├─ Common Components │ ├─ Config Basic Path Configuration │ ├─ Libs Tool Functions │ ├─ Router Route Configuration │ ├─ Store Vuex State Management │ ├── Themes, themes, vUX, etc. │ ├─ All the views, │ ├─ app.vue, ├─ main.js Loading various common components ├─ UI Design ├─.babel.config.js ES6 syntax Compilation Configuration ├─.EditorConfig Definition code format ├─.eslintrc.js code specification configuration file ├─.gitignore ├─ Readme. md Project Description ├─ Package. json Project Basic Information ├─ vue.config.js project build configuration file.Copy the code

A link to the

NPM address

The source address