introduce

Quickly build a CLI tool based on vite + VUe3 project. The scaffolding infrastructure tools were introduced in detail in the previous article, Business Scaffolding – Basics. In this article, we will introduce the design implementation from the IMPLEMENTATION process of the CLI.

  • The project template supports dynamic interactive configuration based on the CLI and dynamic configuration based on EJS. For details, see the parameter description below
  • Optional modes typescript/javascript (recommended, only typescript templates are added)
  • Eslint, Prettier, tsconfig configurations have been added, and automatic verification is supported.

Json in.vscode, pre-commit and commit-msg in.husky have been configured.

  • The basic project structure API, layouts, Router, and Store configurations are all available in template.

background

December 2021 converges (…) Thrusterx, the thrusterx front-end technology group created by the three front-end business teams, varies widely among the business groups in terms of infrastructure projects for each business scenario (technology stack, toolbase, code specification…). Sui generis, technological system, the business system is not reasonable hierarchical design, does not have reusability, is limited by the obvious technical resources, develop students never volumes at a low level, with the growing of business, to develop a function is more and more complex, involving the link more and more long, cost price is higher and higher.

In 2022, the theme of front-end infrastructure is convergence and unity

The technical implementation

The flow chart of the cli

In front of the building templates, consider what needs to be unified, which need to be separated, so we need to establish A set of processes, the inquirer, believe wrote cli friends all used this module, I understand it is A question and answer model configuration system (more commonly said that is A question and answer process, get A number 1, jump to the three questions, 1 choose to 2 B

Cli model

Structural hierarchy

The @thrusterx/ CLI design is divided into three layers

  • Business component layer: based on components and materials, customized in combination with style
  • Function module layer: based on template, with Block+Core progressive enhancement
  • General logic layer: differentiation is smoothed out to provide public services

modeling

  • The Cli handles command line instructions and provides command line interaction
  • Blocks provide basic component support
  • Core is responsible for general logic processing
  • Template is responsible for Template generation
  • Build takes care of the Build and local development

Support extended

  • Template supports extension in different domains (H5, PC…) And different layouts are used to meet scene requirements
  • Core supports plug-in, providing universal module capability support

The plug-in

The convention is integrated into the project in the form of @thrusterx/config-xxx and @thrusterx/plugin-xxx, and you can develop different plug-ins to support the needs of each business domain

Use scaffolding

Global installation

  • -d Fast generation based on the default configuration
  • -c Scaffolding integrates config configuration
  • -a Scaffolding integrates with plugins configuration
  • -u Does not automatically execute install after it is generated
  • -v Queries the scaffold version
npm i @thrusterx/cli -g --registry=xxxx
t7x init package-name -d
Copy the code

Direct use of

npx @thrusterx/cli init package-name -d
Copy the code