This is the 25th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Scaffolding Tips for front-end Architects (Part 1)

The core target

Improve front-end r&d efficiency

The core value of

Will develop the process:

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

And automated build tools

Why build your own scaffolding when automated build tools like Jenkins and Travis are more mature

  • Not meeting requirements: Jenkins and Travis are usually triggered in git hooks, which need to be implemented on the server side and cannot override local functionality for developers, 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

Scaffolding implementation Principle

1. Why global installation@vue/cliThe command to be added isvue?

$ npm install -g @vue/cli
Copy the code

Bin /vue.js is configured in package.json

$ which vue
$ cd /usr/local/bin/vue $ ls -l lrwxr-xr-x 1 dmw admin 59 11 8 13:49 vue -> .. /.. /.. /Users/dmw/.config/yarn/global/node_modules/.bin/vue# / bin/vue soft links
$ cd/Users/dmw/.config/yarn/global/node_modules/.bin $ ls -l lrwxr-xr-x 1 dmw staff 22 11 8 13:49 vue -> .. /@vue/cli/bin/vue.js# vue points to @vue/cli/bin/vue.js
$ cd ../@vue/cli
$ cat package.json
"bin": {
	"vue": "bin/vue.js" # bin is configured
},
Copy the code

2. Global installation@vue/cliWhat happened when?

  • Download the @ vue/cli package to /. Config/yarn/global/node_modules
  • Parse the bin configuration in package.json
  • Go to bin and create a soft link in the bin directory to /usr/local/bin/

3. PerformvueWhat happened when you ordered it? whyvuePoints to ajsDocuments, we can just go throughvueCommand to execute it?

  • Look in the environment variable to see if the VUE is registered

  • cat vue.js

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

  • #! The /usr/bin/env node tells our operating system to look for node in the environment variable when calling vue. Js directly, and then execute it using the node command, equivalent to /usr/bin/env node vue

  • How do I create soft links?

    ln -s vue /Users/dmw/.config/yarn/global/node_modules/.bin/vue.js
Copy the code

Extension: The difference between the following two ways of writing

#! /usr/bin/env node
#! /usr/bin/node
Copy the code
  • The first is to look in environment variablesnode
  • The second is direct execution/usr/binNodes in the directory are not recommended

Scaffolding implementation principle advanced

1. Why is scaffolding essentially a client of an operating system? How does it differ from the apps/software we install on PCS?

Node itself is a client ~ Windows Node. exe/Linux executable

Scaffold files are run through Node

2. How tonodeScaffolding command create alias?

# soft links
ln -s vue /Users/dmw/.config/yarn/global/node_modules/.bin/vue.js
# names
ln -s ./vue vue2 
Copy the code

3. Describe the whole process of scaffold command execution

Understand scaffolding from a use point of view

Scaffolding is essentially an operating system client that executes from the command line, such as:

vue create vue-test-app
Copy the code

The command above consists of three parts:

  • The command:vue
  • command: create
  • command param: vue-test-app

This represents the creation of a vue project named VUe-test-app. This is a relatively simple scaffolding command, but the actual scenario is often more complex, such as:

There are already files in the current directory. We need to overwrite the files in the current directory to force the installation of the vue project.

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

The –force here is called option and is used to assist scaffolding in confirming the user’s choice (read configuration) in a particular scenario. Here’s another scenario:

When creating a project through vue create, NPM install will be automatically executed to help users install dependencies. If we want to use Taobao source to install dependencies, we can enter the command:

vue create vue-test-app --force -r https://registry.npm.taobao.org
Copy the code

Here -r is also called option, which is short for –registry

The execution process of scaffolding is as follows:

  • Input at terminalvue create vue-test-app
  • Terminal resolutionvueThe command
  • The terminal is found in the environment variablevueCommand:which vue
  • According to the terminalvueThe command links to the actual filevue.js
  • End usenodeperformvue.js
  • vue.jsparsingcommand / options
  • vue.jsperformcommand
  • After execution, exit the program

How to develop a scaffold from an application perspective

Take for example vue – cli

  • Develop the NPM project, which should include onebin/vue.jsFile and publish the project tonpm
  • willnpmProject installation tonodethelib/node_modules
  • innodethebinDirectory ConfigurationvueSoft link pointinglib/node_modules/@vue/cli/bin/vue.js

In this way, we can find vue. Js to execute when executing vue command