The scaffold

Is a command line tool, install the corresponding command, through these commands to perform some operations, get some results, help us quickly complete some things.

Commonly used scaffolding tools

  • vue-cli
  • create-react-app
  • webpack
  • gulp
  • grunt

Why use it

  1. Reduce repetitive work by eliminating the need to copy other projects and remove irrelevant code, or create a project from scratch
  2. Dynamically generate project structure and configuration files based on interactive plots
  3. It’s easier to collaborate with multiple people and no files need to be passed around

Vue-cli scaffolding is used as an example

npm install -g @vue/cli-init
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue -V|--version  
vue list
vue init <template-name> <project-name>
Copy the code

How to develop custom one of your own scaffolding?

Train of thought

  1. The project template is uploaded to a Git remote repository and the scaffolding command is published to the NPM website
  2. The user uses the NPM global installation scaffolding command to pull the corresponding project template from the remote Git repository, following the command-line prompt wizard

start

  1. Command line command design and parameter acquisition
    • Js aa, fetch the array through process.argv, and process it
    • Use a third-party library: Commander
  2. Command mapping
    • General: node index.js executes the script
    • Using NPM link mapping, add the following command to the package.json file bin field to use lv command
      • #! /usr/bin/env node This line of code must be added at the top of the JS script used to develop the command line tool using node
      {... ."bin": {
        "lv": "./index.js"}}Copy the code
  3. Try developing a simple scaffold yourself (LV-CLI)
    • Create two new template projects in the Git repository
      • tpl-a
      • tpl-b
      • Note: The package.json file has several values that are variables
    • Command line parameter design
      • lv –help
      • lv -V|version
      • lv list
      • lv init
    • Command line interaction
      • The inquirer prompts the user for input, similar to window.prompt()
    • Visual beautification
      • Ora command panel interactive effect, equivalent to loading effect
      • Target =”_blank”>chalk changes the input text style
      • Log-symbols Colorful symbols used for various log levels
    • Download the user template to the local PC
      • Download-git-repo is a package used to clone remote repository code locally
    • Update package.json information (such as project name, author, project description) based on user input
      • Handlebars template processing
      • Node.js fs module, for reading and writing operations
    • NPM release (Key steps)
      • The NPM website will check if the package name in your package.json file has the same name
      • Log in to the NPM account 
        npm login
Copy the code
      • Publish (project root) 
        npm publish
Copy the code
    • How to use 
          npm i -g lv-cli
    lv list
    lv init tpl-a abc
Copy the code