Interactive front-end code generation device and use method thereof

Abstract

The invention provides an interactive front-end code generation device and a use method thereof, and solves the problems of low code development efficiency and poor code readability and maintainability in the prior art. Comprising a command line control module used for defining a scaffold instruction set, analyzing command line parameters input by a user and executing corresponding actions according to analyzed contents; the interactive question and answer module is used for generating an interactive command line interface and providing business customization options; the terminal display optimization module is used for optimizing a terminal display interface; the template downloading module is used for downloading a preset template; and the compiling and publishing module is used for compiling the scaffold source code into a binary file which can be executed by Node.js, and publishing the binary file to an NPM warehouse, so that the user experience is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer technology, and in particular to an interactive front-end code generation device and a method thereof. BACKGROUND

[0002] The interactive scaffolding tool is a development tool introduced to reduce the repetitive work of developers. In the traditional front-end engineering development process, whenever a new project is created, the developer needs to initialize a standard project (only containing the basic configuration of the project) through the scaffolding tool (vite, vue-cli, create-react-app, etc.) provided by the front-end framework (Vue, React, etc.), and then introduce various third-party libraries or plugins, configure the development environment, and introduce related configurations according to the needs of the business. These repetitive work will cause waste of time and human cost, and the appearance of the scaffolding tool will greatly simplify the above operation, reduce the cost of creating a new project, and speed up the development speed of new business. Compared with the self-defined interactive scaffolding tool which can customize the code template and configuration items according to the actual situation, the prior art has the shortcomings of not being flexible enough and not being close to the actual business scenario. SUMMARY

[0003] The present application provides an interactive front-end code generation device and a method thereof to solve the problems of low code development efficiency, poor readability and maintainability of the code in the prior art.

[0004] In a first aspect, the present application provides an interactive front-end code generation device, which specifically comprises the following modules:

[0005] A command line control module for defining a scaffolding instruction set and parsing the command line parameters input by the user, and performing corresponding actions according to the parsed content;

[0006] An interactive question and answer module for generating an interactive command line interface and providing business customization options;

[0007] A terminal display optimization module for optimizing the terminal display interface;

[0008] A template download module for downloading the preset template;

[0009] A compilation and release module for compiling the scaffolding source code into a binary file executable by Node.js and releasing it to the NPM (Node Package Manager) repository.

[0010] In a preferred embodiment, the command line control module defines the scaffolding instruction set by configuring the command() method.

[0011] In a preferred embodiment, the scaffold instruction set includes create instructions, init instructions, and the like; wherein the create instructions are used to create new projects or components, and the init instructions are used to set up existing projects or adjust existing project configurations.

[0012] In a preferred embodiment, in the command line control module, the command line parameters include template parameters and version parameters.

[0013] In a preferred embodiment, in the interactive question and answer module, the interactive command line interface is dynamically generated through the prompt() method.

[0014] In a preferred embodiment, in the interactive question and answer module, the business customization options include project type selection and project metadata configuration.

[0015] In a preferred embodiment, the project type includes React PC-side applications and React H5 mobile-side applications.

[0016] In a preferred embodiment, the React PC-side application built-in functions include page routing guards, RBAC permission controls, and Excel table exports, and the React H5 mobile-side application internal functions include mobile-side adaptation, JSBridge bridging, and data formatting tools.

[0017] In a preferred embodiment, the React PC-side application realizes route authentication through umi access plugin, and the React H5 mobile-side application realizes responsive layout through postcss-px-to-vie wport.

[0018] In a preferred embodiment, the project metadata configuration includes project name, project description, project version number, project package manager type, and the like.

[0019] In a preferred embodiment, the terminal display optimization module includes chalk units, ora units, and figlet units; wherein the chalk units are used to colorize console output text, the ora units are used to generate loading progress animations, and the figlet units are used to display ASCII art word display scaffold identifiers.

[0020] In a preferred embodiment, in the template download module, the download() method is used to pull preset templates from a Git private repository.

[0021] In a preferred embodiment, when pulling the preset template from the Git private warehouse, an authentication protocol is also supported to ensure the safe transmission of the code.

[0022] In a preferred embodiment, the authentication protocol includes SSH Key and / or Token authentication.

[0023] In a preferred embodiment, in the compilation and release module, the release is made to the enterprise private NPM warehouse through npm publish–registry=<private source address>; wherein the private source address (Private Registry URL) refers to the private NPM warehouse address used for storing and managing private npm packages.

[0024] In a second aspect, based on the interactive front-end code generation device of the first aspect of the application, an interactive front-end code generation method is proposed, which specifically includes the following steps:

[0025] Step S1, defining a scaffold instruction set through a command line control module;

[0026] Step S2, obtaining the command line parameters input by the user, analyzing the command line parameters of the user through the command line control module, forming the analyzed command line parameters, and executing the corresponding actions according to the analyzed command line parameters;

[0027] Step S3, obtaining the project type and project metadata configuration selected by the user through an interactive question and answer module, forming a package.json configuration file, wherein the package.json configuration file includes dependency declaration;

[0028] Step S4, matching the preset template warehouse address according to the package.json configuration file, downloading the template source code to the local through a template download module, and dynamically replacing the placeholders in the template source code through a template engine (EJS, Embedded JavaScript templates);

[0029] Step S5, when the dynamic replacement processing of the template source code is completed, automatically installing the dependencies of the template source code.

[0030] In a preferred embodiment, in step S3, the dependency declaration includes production dependency declaration and development dependency declaration.

[0031] In a preferred embodiment, the production dependency includes React and state management library, and the development dependency includes Webpack and ESLint.

[0032] In a preferred embodiment, the terminal display interface is optimized through a terminal display module.

[0033] In a third aspect, the present application also provides a computer readable storage medium, having stored thereon a computer program, which, when executed by a processor, implements the interactive front-end code generation method of any one of the second aspect.

[0034] In a fourth aspect, the present application also provides an electronic device, comprising a memory storing a computer program, and a processor communicatively connected to the memory, which invokes the interactive front-end code generation method of any one of the second aspect when executing the computer program.

[0035] Compared with the prior art, the present application has the following obvious and substantial characteristics and advantages:

[0036] The present application provides an interactive front-end code generation device and its use method, which solves the problem of low code development efficiency, poor readability and maintainability of code in the prior art. It has the following advantages: (1) improving the overall code efficiency, the developer does not need to pay attention to the general configuration or plug-in in the project, and can focus on the development of the business level of the project; (2) ensuring code quality, the scaffolding provides standardized code style and method best practices, through eslint, prettier and other plug-ins, which can avoid some code specification problems, and improve the readability and maintainability of the code; (3) fast packaging and deployment, the scaffolding provides the corresponding command to automatically package and hot update the function, and improves the user experience. BRIEF DESCRIPTION OF DRAWINGS

[0037] The accompanying drawings, which form a part of this application, are intended to provide further understanding of the application and are incorporated herein in their entirety. The schematic embodiments of the present application and their descriptions are used to explain the present application, and do not constitute an improper limitation on the present application. In the drawings:

[0038] Figure 1 is a structural schematic diagram of an interactive front-end code generation device of a preferred embodiment of the present application.

[0039] Figure 2 is a flowchart of an interactive front-end code generation method of a preferred embodiment of the present application. DETAILED DESCRIPTION

[0040] The present application provides an interactive front-end code generation device and its use method. In order to make the purpose, technical scheme and effects of the present application more clear and explicit, the present application will be further described in detail below with reference to the drawings and examples. It should be understood that the specific embodiments described herein are only used to explain the present application, and do not limit the present application.

[0041] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be used interchangeably where appropriate. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or apparatuses.

[0042] Example 1:

[0043] like Figure 1 As shown in the figure, the interactive front-end code generation device described in this embodiment specifically includes a command-line control module, an interactive question-and-answer module, a terminal display optimization module, a template download module, and a compilation and publishing module.

[0044] The command-line control module is used to define the scaffolding instruction set, parse the command-line parameters entered by the user, and execute the corresponding actions based on the parsed content.

[0045] Optionally, a scaffolding instruction set can be defined by configuring the command() method. Specifically, the scaffolding instruction set includes instructions such as create and init; wherein, the create instruction is used to create new projects or components, and the init instruction is used to set up existing projects or adjust the configuration of existing projects.

[0046] The command-line parameters include the template parameter and the version parameter.

[0047] The interactive question-and-answer module is used to generate an interactive command-line interface and provide business customization options.

[0048] Specifically, the prompt() method is used to dynamically generate an interactive command-line interface.

[0049] Specifically, the business customization options include project type selection and project metadata configuration.

[0050] The project type includes a React PC end application and a React H5 mobile end application. The built-in functions of the React PC end application include page route guard, RBAC permission control and Excel table export. The internal functions of the React H5 mobile end application include mobile end adaptation, JSBridge bridging and data formatting tools. The React PC end application realizes route authentication through umi access plugin, and the React H5 mobile end application realizes responsive layout through postcss-px-to-viewport.

[0051] The project metadata configuration includes project name, project description, project version number, project package manager type and other data configurations.

[0052] The terminal display optimization module is used for optimizing the terminal display interface. Specifically, the terminal display optimization module includes a chalk unit, an ora unit and a figlet unit. The chalk unit is used for text coloring of console output, the ora unit is used for generating a loading progress animation, and the figlet unit is used for displaying ASCII art word display scaffolding identification.

[0053] The template download module is used for downloading the preset template. Specifically, the preset template is pulled from the Git private warehouse through the download() method. When the preset template is pulled from the Git private warehouse, an authentication protocol is supported to ensure the safe transmission of the code. The authentication protocol includes SSH Key and / or Token authentication.

[0054] The compilation and release module is used for compiling the scaffold source code into a binary file executable by Node.js and releasing it to the NPM warehouse. Specifically, it is released to the enterprise private NPM warehouse through npm publish–registry=<private source address>. The private source address (Private Registry URL) refers to the private NPM warehouse address used to store and manage private npm packages.

[0055] Example 2:

[0056] As shown in Figure 2 Based on the interactive front-end code generation device described in Embodiment 1, the present embodiment provides an interactive front-end code generation method, which specifically includes steps S1-S5.

[0057] Step S1, define the scaffold instruction set through the command line control module.

[0058] Step S2, a command line parameter input by a user is acquired, the command line parameter of the user is parsed through the command line control module, parsed command line parameters are formed, and corresponding actions are performed according to the parsed command line parameters.

[0059] Step S3, a project type and project metadata configuration selected by a user are acquired through an interactive question and answer module, a package.json configuration file is formed, wherein the package.json configuration file includes a dependency declaration (wherein the dependency declaration refers to a process of explicitly indicating an external library, framework or other module depended by a software project. These declarations are usually recorded in a specific configuration file, which describes all external dependencies and version information required for project running. For a JavaScript project managed by npm, the dependency declaration is located in the package file). The dependency declaration includes a production dependency declaration and a development dependency declaration. Specifically, the production dependency includes React and state management library, and the development dependency includes Webpack and ESLint.

[0060] Step S4, a preset template repository address is matched according to the package.json configuration file, template source code is downloaded to a local through a template download module, and placeholders in the template source code are dynamically replaced through a template engine (EJS, Embedded JavaScript templates).

[0061] Step S5, when the template source code after dynamic replacement processing is completed, dependencies of the template source code are automatically installed.

[0062] In the process of interactive front-end code generation, a terminal display interface is optimized through a terminal display module.

[0063] The specific embodiments of the present application are described in detail above, but it is only as an example, the present application is not limited to the specific embodiments described above. For those skilled in the art, any equivalent modification and alternative of the present application are also within the scope of the present application. Therefore, any equivalent transformation and modification without departing from the spirit and scope of the present application should be covered within the scope of the present application.

Claims

1. An interactive front-end code generation apparatus, characterized by, Specifically comprising the following modules: A command line control module for defining a scaffold instruction set and parsing command line parameters input by a user, and performing corresponding actions according to the parsed content; An interactive question and answer module for generating an interactive command line interface and providing business customization options; A terminal display optimization module for optimizing a terminal display interface; A template download module for downloading a preset template; A compilation and release module for compiling scaffold source code into a binary file executable by Node.js and releasing it to an NPM repository.

2. An interactive front-end code generation apparatus according to claim 1, wherein, In the command line control module, the scaffold instruction set is defined by configuring a command() method; the scaffold instruction set includes a create instruction and an init instruction; the create instruction is used to create a new project or component, and the init instruction is used to set an existing project or adjust an existing project configuration.

3. The interactive front-end code generation apparatus of claim 1, wherein, In the interactive question and answer module, the business customization options include project type selection and project metadata configuration; the project types include a React PC-side application and a React H5 mobile-side application.

4. An interactive front-end code generation apparatus according to claim 3, wherein, The built-in functions of the React PC-side application include page routing guards, RBAC permission control, and Excel table export, and the internal functions of the React H5 mobile-side application include mobile-side adaptation, JSBridge bridging, and data formatting tools.

5. The interactive front-end code generation apparatus of claim 3, wherein, The React PC-side application realizes routing authentication through umi access plugin, and the React H5 mobile-side application realizes responsive layout through postcss-px-to-viewport.

6. The interactive front-end code generation apparatus of claim 3, wherein, The project metadata configuration includes project name, project description, project version number, and project package manager type.

7. The interactive front-end code generation apparatus of claim 1, wherein The terminal display optimization module includes a chalk unit, an ora unit, and a figlet unit; the chalk unit is used to color console output text, the ora unit is used to generate a loading progress animation, and the figlet unit is used to display a scaffold logo in ASCII art.

8. An interactive front-end code generation method, characterized by, Specifically comprising the following steps: Step S1, defining a scaffold instruction set through a command line control module; Step S2, obtaining command line parameters input by a user, parsing the command line parameters input by the user through the command line control module, forming parsed command line parameters, and performing corresponding actions according to the parsed command line parameters; Step S3, obtaining a project type and project metadata configuration selected by a user through an interactive question and answer module, forming a package.json configuration file, wherein the package.json configuration file includes dependency declarations; Step S4, matching a preset template repository address according to the package.json configuration file, downloading template source code to a local terminal through a template download module, and dynamically replacing placeholders in the template source code through a template engine; Step S5, when the dynamically replaced template source code is completed, automatically installing dependencies of the template source code.

9. The method of claim 8, wherein, In step S3, the dependency declaration includes a production dependency declaration and a development dependency declaration.

10. The method of claim 9, wherein, The production dependency includes React and a state management library, and the development dependency includes Webpack and ESLint.

Images