The necessity of front end scaffolding

The core goal of scaffolding development is to improve front-end r&d efficiency.

Scaffolding core values:

The development process

  • Automation: duplicate project code copy/Git operation/publish online operation
  • Standardization: project creation/Git flow release process/rollback process
  • Datalization: the research and development process is systematized and datalized, making the research and development process quantifiable

Differences from automated build tools:

Q: Why do you need to build your own scaffolding when automated build tools like Jenkins and Travis are mature?

  • Not meeting requirements: Jenkins and Travis are usually triggered in git hooks that need to be implemented on the server side and cannot override functionality native to the developer, such as project creation automation, local Git operation automation, etc.
  • Complex customization: Jenkins and Travis need to develop plug-ins in their customization process, which is complicated and requires the use of Java language, which is not friendly to front-end students.

Introduction to Scaffolding

The essence is an operating system client. This is because it executes by command, but executes a command in a terminal where the command itself is a client.

Such as:

vue create vue-test-app --force
Copy the code

These three commands consist of three parts:

  • Main command: vue

  • Command: the subcommand create

  • Command param: vue-test-app

  • Option: –force, command configuration item

The execution principles of the preceding commands are as follows:

  • The inputvue: equivalent to executionwhich vueWill be in the Node installation directorybinFound in foldervue@Folder,xxx@Represents a hyperlink tovueThe real installation directoryNode/Node version folder /lib/node_modules/@vue/cli/bin/vue.jsFile.
  • End usenodeperformvue.js
  • vue.jsparsingcommand / options
  • vue.jsExecute the command
  • Exit after the command is executed

Note:

  • Node /node version /lib/node_modules: is the NPM package installed globally in node

Ideas for developing scaffolding

  • To develop anpmProject, which contains onebin/vue.jsFile and send the project to NPM
  • Install the NPM project tonodethelib/node_modules
  • innodethebinDirectory to configure the vUE soft connection pointinglib/node_modules/@vue/cli/bin/vue.js

Scaffolding implementation Principle

Understand how scaffolding works by answering the following three questions:

  1. Why is command vue added after global installation @vue/cli?

    In the package.json file in your project, you have the following properties to set the scaffold command name and the corresponding execution file:

    . "Bin" : {"vue": "bin/vue.js"}...Copy the code

  2. What happens when you install @vue/ CLI globally?

    NPM downloads the global installation package to node/node version /lib/node_modules, then resolves the bin property in the package.json file in the project, and creates a soft link in the node/node version /bin folder. This soft link points to the file corresponding to the bin configuration command in package.json in the lib/node_modules/ project.

  3. Why does vue point to a JS file when we can execute it directly using vue commands?

    Input the vue: The vue@ folder will be found in the bin folder under the node installation directory. XXX @ represents a hyperlink. Link to the node/node version folder /lib/node_modules/@vue/cli/bin/vue.js file in the actual installation directory of vue.

    The.js file cannot be executed by itself, and the command can be executed by calling node to execute the.js file. This is due to the line at the top of the.js file:

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

    /usr/bin/env indicates the configuration of environment variables in the current operating system, and /usr/bin/env is the node to look up in environment variables. Add this line to the first line of the.js file to use Node to execute the current file.

Simply create anodeCommand:

  • Create a test.js file anywhere and type it in the first line of the file#! /usr/bin/env node;
  • In node’s soft connection directorybinNext, the implementation ofLn -s Actual directory test of the test.js fileCreating a Soft connectiontest@, the soft connection points totest.jsThe file is now createdtestThe executable command of

Scaffolding development process

Development process:

  • Create an NPM project

  • Create scaffold entry file, top add:

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

  • Configure package.json and add the bin property

  • Writing scaffolding code

  • Publish scaffolding to NPM under project directory:

    npm login
npm publish
Copy the code

Use process:

  • Erection of scaffolding 
    npm install -g your-own-cli
Copy the code
  • Use scaffolding 
    your-own-cli
Copy the code

Scaffolding development difficulties analysis

  • Subcontracting: The division of a complex system into modules
  • The command register
  • Argument parsing
  • The options for
  • The options shorthand
  • The options with params
  • Help document
    • global help
      • Usage
      • Options
      • Commands