In daily development, engineering is often done early in the project (via scaffolding), which junior engineers (like me) may not be aware of. For example, my company has webPack configuration written in scaffolding, and the project template does not include configuration files. Therefore, in daily development, you only need to use the commands of scripts in package.json to directly operate webpack and package and build, and the specific configuration items are painless. In order to have a better future (promotion and salary), here is my understanding of front-end engineering.

Start by getting a general idea of “front-end engineering.

As a small white programmers believe that most of the time is too busy to do business, from one project to do a project, if one day you began to participate in a new project found that the same is the background project () management platform, it and before you do project directory structure, eslint rules are not the same as it is a painful thing, the same type projects, Very different styles. At this point, you realize that it’s important to have uniform standard rules. So from a corporate team perspective, front-end engineering is a standardized process, and all projects have a common starting point. By setting up scaffolding (generally differentiating front and back projects), built-in features like Webpack, mock services, development specifications (ESLint), unit testing, etc., each project looks and plays roughly the same way. The conclusion is to standardize, standardize, tool, automate and simplify the front-end development process, and improve the application quality and development efficiency.

What exactly does front-end engineering involve

  1. The scaffold
  2. Build Tools (Webpack)
  3. MOCK services
  4. The development of specification
  5. Unit testing
  6. Project deployment

Instead of laying it out, focus on “scaffolding” and “building tools.”

The scaffold

Before we talk about scaffolding, let’s review what you did when you took over a new project from scratch. First look at the project type, foreground (H5, small programs for C end (user)), middle background (various management background), and then find the corresponding scaffolding, take the open source background scaffolding of our company as an example, open the terminal and execute NPX autos init (NPX command can execute undownloaded packages. After the default installation, you will see the interactive information, according to the need to operate down, the project template is down, the project from 0 to have, it is not too cool. Then you get to the familiar phase of routing and coding.Wait a moment

Project template

It can be seen that a qualified scaffold is very easy to use in the early stage of the project, and a good start is half the battle. So the question is, what functions does a qualified scaffold contain?

  • Generic project directory template
  • Generic Webpack configuration
  • Unified Eslint validation rules
  • Unified unit test framework configuration: unit test coverage, test catalog, and so on
  • Unified Dockerfile and Jenkinsfile (for packaging images and deploying pipeline definitions)
  • Unified configuration of Babel (.babelrc or babel.config.js)
  • Uniform constant configuration (cache fields, etc.)
  • Configuration files for different environments (development, test, production)

(The above is the ideal state, according to the needs of the team)

Here is a preliminary understanding of scaffolding, let’s look at how to implement a simple scaffolding.

How to Develop scaffolding

Create a folder as a starting point for scaffolding and execute NPM init to generate package.json files

To do a good job, you must sharpen your tools. Install the following NPM packages

  • Tools available for console selection: Inquirer (interaction, selection)
  • Tools that can handle console commands: COMMANDER (Define scaffolding command)
  • Download-git-repo: Download remote template tool, responsible for downloading remote repository template projects
  • Variable output log color tool: chalk
  • A tool to execute shell commands: child_process

Inquirer can implement the interactive functions of scaffolding, such as the query shown above when initializing a project with scaffolding, and the query for scenarios such as JS or TS. Inquire records the user’s choice, thus completing some customized requirements according to the user’s needs.

Commander defines scaffolding commands, such as the script method in package.json, such as init, dev, build, etc. Specific practical operation can refer to juejin.cn/post/684490…