Front-end workflow implementation method and system

Abstract

The invention provides a front-end workflow implementation method and system. The method comprises the following steps: globally installing a BalmJS core development tool for compiling project codes; a balm configuration file is created under a project root directory, parameters are configured according to project requirements, and the parameters are used for controlling compiling behaviors of a BalmJS core development tool so as to adapt to different front-end frames and project structures; and calling a BalmJS core development tool to perform development, construction and debugging operation by using a uniform balm script command so as to realize uniform management of different technology stack projects. The system comprises a script analysis module used for analyzing a balm script command and a configuration file and transmitting the command and a configuration parameter; the task execution module is used for calling a BalmJS core development tool to perform development, construction and debugging operation according to the received command and configuration parameters; and the plug-in management module is used for managing and loading a BalmJS plug-in and expanding system functions. According to the invention, the problems of numerous tools, complex configuration and difficult project maintenance in the existing software front-end development can be solved.

Description

Technical Field

[0001] The present invention belongs to the field of computer software technology, and more specifically, relates to a front-end workflow implementation method and system. Background Art

[0002] With the rapid development of software front-end technology, various construction tools and frameworks emerge in an endless stream. Developers need to spend a lot of time learning and configuring different tools, which leads to a series of problems. For example, old projects have always adopted a mixed development model of front-end and back-end, which greatly increases the complexity of project maintenance; for example, when developing for schools or certain special institutions, the product needs to be extremely backward compatible, which often discourages new developers, resulting in an increase in developer costs; for example, in most small and medium-sized enterprises, the tools and configurations between projects maintained by different developers are often inconsistent, resulting in difficulty in project maintenance once the core developer is not around. Summary of the invention

[0003] The purpose of the present invention is to solve the problems of numerous tools, complex configuration and difficult project maintenance in existing software front-end development.

[0004] In order to achieve the above-mentioned purpose, the present invention provides a front-end workflow implementation method and system.

[0005] According to a first aspect of the present invention, a front-end workflow implementation method is provided, the front-end workflow implementation method comprising the following steps:

[0006] Globally install the BalmJS core development tool for compiling project code;

[0007] Create a balm configuration file in the project root directory and configure parameters according to project requirements. The parameters are used to control the compilation behavior of the BalmJS core development tool to adapt to different front-end frameworks and project structures.

[0008] The BalmJS core development tool is called using a unified balm script command to perform development, building, and debugging operations to achieve unified management of projects with different technology stacks.

[0009] Optionally, the balm configuration file supports any one, any two, or any three of the following configuration items:

[0010] Specify the front-end framework type, including React, Vue, and jQuery;

[0011] Configure the project entry file, output directory and static resource path;

[0012] Define custom tasks to extend BalmJS functionality.

[0013] According to a second aspect of the present invention, a front-end workflow implementation system is provided, wherein the front-end workflow implementation system is used to implement any of the above-mentioned front-end workflow implementation methods, and comprises the following functional modules:

[0014] The script parsing module is used to parse the balm script commands and configuration files and pass the commands and configuration parameters;

[0015] The task execution module is used to call the BalmJS core development tool to perform development, building and debugging operations according to the received commands and configuration parameters;

[0016] The plugin management module is used to manage and load BalmJS plugins to expand system functions.

[0017] Optionally, the BalmJS core development tool supports any one or both of the following packaging methods:

[0018] Independent packaging, packaging the front-end code into independent static resource files;

[0019] Customized packaging: package the front-end code into a specified directory according to the back-end framework structure.

[0020] The beneficial effects of the present invention are:

[0021] The front-end workflow implementation method of the present invention comprises the following steps: first, globally installing the BalmJS core development tool for compiling project codes; second, creating a balm configuration file in the project root directory, configuring parameters according to project requirements, and the parameters are used to control the compilation behavior of the BalmJS core development tool to adapt to different front-end frameworks and project structures; finally, using a unified balm script command to call the BalmJS core development tool for development, construction and debugging operations to achieve unified management of projects with different technology stacks.

[0022] The front-end workflow implementation method of the present invention solves the problems of numerous tools, complex configuration and difficult project maintenance in existing software front-end development by providing a unified configuration method, command line tools and plug-in mechanism. In addition, new projects can be directly created using the BalmCLI supporting scaffolding, and old projects can be seamlessly connected after only some simple installation and configuration.

[0023] The front-end workflow implementation system of the present invention and the front-end workflow implementation method described above belong to a general inventive concept, and have at least the same beneficial effects as the front-end workflow implementation method described above, and the beneficial effects are not repeated here.

[0024] Other features and advantages of the present invention will be described in detail in the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The present invention may be better understood by referring to the following description taken in conjunction with the accompanying drawings, in which the same or similar reference numerals are used throughout the drawings to represent the same or similar components.

[0026] Figure 1 A flow chart of the implementation of the front-end workflow implementation method according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to more fully understand the technical solution of the present invention, the exemplary embodiments of the present invention will be described in more comprehensive and detailed in conjunction with the accompanying drawings below. Obviously, the one or more embodiments of the present invention described below are only one or more of the specific ways in which the technical solution of the present invention can be implemented, and are not exhaustive. It should be understood that other ways belonging to a general inventive concept can be used to implement the technical solution of the present invention, and should not be limited by the exemplary embodiments described. Based on one or more embodiments of the present invention, all other embodiments obtained by ordinary technicians in the field without making creative work should fall within the scope of protection of the present invention.

[0028] Example: Figure 1 The following is a flowchart showing the implementation method of the front-end workflow in an embodiment of the present invention. Figure 1 The front-end workflow implementation method of the embodiment of the present invention includes the following steps:

[0029] Step S100: globally install the BalmJS core development tool for compiling project code;

[0030] Step S200: Create a balm configuration file in the project root directory and configure parameters according to project requirements. The parameters are used to control the compilation behavior of the BalmJS core development tool to adapt to different front-end frameworks and project structures.

[0031] Step S300: Use a unified balm script command to call the BalmJS core development tool to perform development, construction, and debugging operations to achieve unified management of projects with different technology stacks.

[0032] Furthermore, in step S200 of the embodiment of the present invention, the balm configuration file supports any one, any two or three of the following configuration items:

[0033] Specify the front-end framework type, including React, Vue, and jQuery;

[0034] Configure the project entry file, output directory and static resource path;

[0035] Define custom tasks to extend BalmJS functionality.

[0036] Specifically, the embodiment of the present invention implements the front-end workflow based on BalmJS. BalmJS is a front-end workflow tool based on Node.js. It simplifies the development process of Web applications with different technology stacks through unified configuration and command line tools, reduces learning costs, and improves development efficiency.

[0037] Specifically, in the front-end workflow implementation method of the embodiment of the present invention, the user first installs BalmJS on the computer; then configures the project, that is, tells BalmJS which technologies and tools to use in the project configuration file; and then uses the command line tool provided by BalmJS to perform development, construction, debugging and other operations.

[0038] Specifically, in the embodiment of the present invention, BalmJS configuration items can be configured according to the needs to realize a set of development codes to run various technology stacks, such as mainstream frameworks React / Vue, relatively new frameworks Svelte / Solid, relatively old frameworks jQuery, and even support desktop applications / WeChat applets / obsolete IE8, etc. According to the configuration, it can be packaged independently (front-end and back-end separation), or customized packaging can be achieved according to the back-end framework structure (front-end and back-end mixed development). In addition, BalmJS also provides a series of APIs that can be used for customized compilation requirements in some special project requirements, such as style / script compilation, image optimization, file operations, local servers, etc.

[0039] The front-end workflow implementation method of the embodiment of the present invention is particularly suitable for small and medium-sized software companies. The following is an exemplary typical problem:

[0040] Developer A is good at React / Vue and uses the official React scaffolding to develop and maintain Project 1. Regarding Vue, Developer A is only familiar with the latest Vite scaffolding.

[0041] Developer B is good at Vue and uses the official old version of VueCLI scaffolding to develop and maintain project 2;

[0042] Developer C, maintains the company's old PHP project 3 (front-end and back-end mixed development code).

[0043] When tasks are queued or developers take leave, it may involve scheduling or postponement of project progress. When tasks are queued or developers take leave, it may involve scheduling or postponement of project progress, because different developers are mostly only accustomed to their own commonly used technology stacks, and it takes a certain amount of learning and preparation time to develop and maintain other people's code; if the developer leaves and the project cannot run or no one can take over normally, the company can only solve the problem by re-recruiting or refactoring the project.

[0044] But if the BalmJS solution is adopted, each developer has installed the BalmJS core development tool on their computers. If it is a technology stack that they are familiar with, they can directly run it for normal development. If it is not a technology stack that they are familiar with, they can use the BalmJS core development tool to run it for normal development. Originally, the relationship between developers A, B, C and projects 1, 2, and 3 was one-to-one binding and maintenance. Now, the BalmJS core development tool has realized a many-to-many sustainable maintenance relationship. BalmJS can save labor costs for enterprises (especially small and medium-sized enterprises) to a certain extent, and save learning costs for developers, thereby making enterprise projects run more healthily and stably.

[0045] Accordingly, based on the front-end workflow implementation method of the embodiment of the present invention, the embodiment of the present invention further proposes a front-end workflow implementation system, and the front-end workflow implementation system is used to implement the above-mentioned front-end workflow implementation method.

[0046] The front-end workflow implementation system of the embodiment of the present invention includes the following functional modules:

[0047] The script parsing module is used to parse the balm script commands and configuration files and pass the commands and configuration parameters;

[0048] The task execution module is used to call the BalmJS core development tool to perform development, building and debugging operations according to the received commands and configuration parameters;

[0049] The plugin management module is used to manage and load BalmJS plugins to expand system functions.

[0050] Furthermore, in the embodiment of the present invention, the BalmJS core development tool supports any one or both of the following packaging methods:

[0051] Independent packaging: Pack the front-end code into an independent static resource file, so that the front-end code and back-end code of the website can be stored separately for easy maintenance;

[0052] Customized packaging: pack the front-end code into the specified directory according to the back-end framework structure to achieve front-end and back-end hybrid deployment.

[0053] Although one or more embodiments of the present invention are described above, it should be known to those skilled in the art that the present invention can be implemented in any other form without departing from its subject matter and scope. Therefore, the embodiments described above are illustrative rather than restrictive, and many modifications and substitutions are obvious to those skilled in the art without departing from the spirit and scope of the present invention as defined in the appended claims.

Claims

1. A front-end workflow implementation method, characterized in that: include: Globally install the BalmJS core development tool for compiling project code; Create a balm configuration file in the project root directory and configure parameters according to project requirements. The parameters are used to control the compilation behavior of the BalmJS core development tool to adapt to different front-end frameworks and project structures. The BalmJS core development tool is called using a unified balm script command to perform development, building, and debugging operations to achieve unified management of projects with different technology stacks.

2. The front-end workflow implementation method according to claim 1, characterized in that: The balm configuration file supports any one, two, or three of the following configuration items: Specify the front-end framework type, including React, Vue, and jQuery; Configure the project entry file, output directory and static resource path; Define custom tasks to extend BalmJS functionality.

3. A front-end workflow implementation system for implementing the front-end workflow implementation method according to claim 1 or 2, characterized in that: include: The script parsing module is used to parse the balm script commands and configuration files and pass the commands and configuration parameters; The task execution module is used to call the BalmJS core development tool to perform development, building and debugging operations according to the received commands and configuration parameters; The plugin management module is used to manage and load BalmJS plugins to expand system functions.

4. The front-end workflow implementation system according to claim 3, characterized in that: The BalmJS core development tool supports any one or both of the following packaging methods: Independent packaging, packaging the front-end code into independent static resource files; Customized packaging: package the front-end code into a specified directory according to the back-end framework structure.

Images