With the deepening of the concept of front-end engineering, we will choose to use scaffolding to build our own projects from zero to one. The familiar create-React-app and VUE-CLI help us initialize the configuration to generate the project structure, automatically install dependencies, and finally we can run the project to start development, or build the project. These scaffolds provide best practices in a general sense, but as the business evolves, it is inevitable that it will need to be adapted to the actual situation of the business development. Such as:

  • Optimize performance after packaging by adjusting related plug-ins and configurations
  • Project structure adjustment, coding style
  • User permission control
  • Integrate the company’s infrastructure
  • .

In short, as the business evolves, we often need to settle down and create a more “personalized” business plan. The most straightforward thing to do at this point is to develop a scaffolding for the solution so that we can reuse the best practices and solutions in the future

1. Overall scaffolding architecture design and basic flow

As shown above, is a complete scaffold NPM package structure diagram that we want to pass globally by publishing the NPM packagenpm install -g llzscc_cliAfter the package is installed, thellzscc init tenplateNameInitialization directly pulls and generates the project engineering template we need, trying to do direct hands-on development, and avoids the cost of architecture design and initial module development at the beginning of the project. In this way we only need to focus on optimizing the same template that can be applied to each project.

As shown in the figure above, pull the desired template by opening the terminal and executing our own terminal commandtemplates. There are certain third-party libraries we need to introduce during scaffolding development:

The library Description and Function
commander Processing console command
chalk Console effect display
inquirer Console query
download-git-repo Git remote repository pull
ora Loading effect of the command line environment

2. Implementation of front-end template scaffolding LLzSCc_CLI

Above is my current new write a front-end scaffolding NPM distribution package source code, has been released www.npmjs.com/package/llz… NPM install -g llzscc_cli. The following commander commands have different functions:

Commander ordered Functional description
LLZSCC init XXX Initialization into a relatively complete front-end project project, the project encapsulated the basic compiler package, login permissions, routing permissions and so on
LLZSCC create XXX (template name) Generate an optional front-end template (including various components VUE, VUE-Router, VUex, and so on)
llzscc –version View the current package version
llzscc –help Help instructions

The entire source code implementation for the scaffolding is available through my article: juejin.cn/post/698321… To understand the specific, I will not expand here, we now through a series of operation commands to see what can be achieved:

2.1 LLZSCC init XXX (Template name)

1. After the llzscc_cli dependency package is installed globally, run the LLZSCC –version command to check whether the installation is successful:

2. After the installation is successful, run the LLZSCC init templateA command to initialize the specified template.

3. The template is downloaded successfully. As well as the corresponding generated template project, the project template is a project template with perfect front-end basic functions, which can be used out of the box for enterprise-level project development, greatly improving the development efficiency.

2.1 LLZSCC create XXX (template name)

1. Run the LLZSCC create templateB command to display the optional installation template.

2. Select the template and the version.

3. The template is downloaded and installed successfully.

3. Relevant source code

  • NPM address: www.npmjs.com/package/llz…
  • Github address: github.com/llz1990/llz…