Front-end architecture construction method and device suitable for cross-end development, equipment and medium

Abstract

The invention relates to a front-end architecture construction method and device suitable for cross-end development, equipment and a medium, and is applied to the technical field of front-end development. The method comprises the steps that a project root directory is created to serve as a container of a target project, and the project root directory is arranged by adopting a Monorepo architecture; using pnpm to initialize a project root directory; an APPS folder and a Package folder are created under the project root directory, the APPS folder is used for storing front-end projects of various terminals, the Package folder is used for storing public modules of all the terminals, and the terminals comprise a web end and a mobile end; the APPS file folder is initialized; performing code management on the APPS folder and the Package folder; and packaging and deploying the target project under the project root directory based on the CI / CD. The method has the effect of improving the cross-end development efficiency.

Description

Technical Field

[0001] The present application relates to the technical field of front-end development, and in particular to a front-end architecture construction method, apparatus, equipment and medium suitable for cross-end development. Background Art

[0002] As digitalization drives business penetration into multi-terminal scenarios and mobile devices continue to evolve, cross-device development capabilities have become a core indicator of the maturity of front-end technology systems. Under traditional development models, companies often need to build and maintain independent code repositories for different terminals, such as web and mobile, resulting in low cross-device development efficiency.

[0003] Although developers try to improve development efficiency through cross-end code reuse, code migration methods that rely on manual copying and pasting not only consume a lot of manpower, but are also prone to omissions leading to inconsistent functional implementation. In other words, the current cross-end code reuse method has many defects and is less effective in improving cross-end development efficiency. Summary of the Invention

[0004] In order to improve the efficiency of cross-end development, the present application provides a front-end architecture construction method, device, equipment and medium suitable for cross-end development.

[0005] In the first aspect, the present application provides a front-end architecture construction method suitable for cross-end development, which adopts the following technical solutions: A front-end architecture construction method suitable for cross-end development, including: Create a project root directory as a container for the target project, where the project root directory is laid out using a Monorepo architecture; Use pnpm to initialize the project root directory; Create an APPS folder and a Package folder in the project root directory. The APPS folder is used to store front-end projects of various terminals, and the Package folder is used to store common modules of all terminals, including web terminals and mobile terminals. Initialize the APPS folder; Perform code management on the APPS folder and the Package folder; Package and deploy the target project in the project root directory based on CI / CD.

[0006] By adopting the above technical solutions, the Monorepo architecture and the efficient pnpm tool have solved the problems of fragmented project structure and inefficient dependency management in traditional cross-end development. By rationally dividing the APPS folder and the Package folder, code reuse and sharing are achieved, reducing code duplication. Combined with vite and uni-app for front-end engineering initialization, and automated packaging and deployment based on CI / CD, the efficiency of cross-end development is greatly improved.

[0007] Optionally, the common modules include apis, types, business, const, locales, store and utils.

[0008] Optionally, initializing the APPS folder includes: Initialize the front-end project of the web end based on Vite; Initialize the front-end project of the mobile end based on uni-app.

[0009] By adopting the above technical solution, the front-end project of the web side is initialized through Vite, and the front-end project of the mobile side is initialized through Uni-App, which can efficiently complete the initialization work of the front-end projects of different terminals.

[0010] Optionally, the performing code management on the APPS folder and the Package folder includes: Construct a calling relationship between each of the front-end projects and the common module.

[0011] By adopting the above technical solution and establishing a calling relationship between the front-end project and the common module, each front-end project can conveniently use the common module, thereby improving code reusability and development efficiency.

[0012] Optionally, the web end and the mobile end use Pinia as the global state management library; the web end and the mobile end use Flyio as the client library for network requests, and combine PromiseAPI to process network asynchronous requests.

[0013] By adopting the above technical solutions, Pinia's responsive state management can synchronize multi-terminal data and reduce state conflict problems. Flyio's multi-terminal adaptability can reduce the differences in request libraries on different platforms, increase the probability of request success, and reduce response time. By processing network asynchronous requests through the Promise API, the occurrence of callback hell can be effectively reduced.

[0014] Optionally, packaging and deploying the target project based on CI / CD includes: Access the inner layer instructions of the project under the root directory of the project through the outermost layer instructions; Execute the project's internal instructions to build web and mobile projects; Execute the move-build command to move the web project and the mobile project to the preset dist folder; Execute the deploy script to deploy the web-side project and the mobile-side project in the preset dist folder to the server.

[0015] By adopting the above technical solution, the outermost instructions can be used to access the inner instructions of the project (multi-level instructions) as well as automated project movement instructions and project deployment scripts, which can achieve one-click multi-terminal builds, reduce manual operation steps and manual deployment, and improve packaging and deployment efficiency.

[0016] Optionally, the method further includes: Encapsulate and optimize the postMessage communication protocol on the WebView side through the Comlink tool; The communication data of the native application side is parsed through the Comlink protocol specification, and an RPC-like mode is built through the native controller.

[0017] By adopting the above technical solution, the postMessage protocol encapsulated by Comlink reduces the interaction delay between the WebView end and the native application end, and improves data transmission efficiency; by unifying the cross-end function call format through the RPC-like mode, it reduces the interface document maintenance cost and improves the joint debugging efficiency.

[0018] In a second aspect, the present application provides a front-end architecture construction device suitable for cross-end development, which adopts the following technical solutions: A front-end architecture construction device suitable for cross-end development, comprising: A root directory creation module is used to create a project root directory as a container for the target project. The project root directory is laid out using the Monorepo architecture. A root directory initialization module is used to initialize the project root directory using pnpm; A project building module is used to create an APPS folder and a Package folder in the project root directory. The APPS folder is used to store front-end projects for various terminals, and the Package folder is used to store common modules for all terminals, including web terminals and mobile terminals. The front-end engineering initialization module is used to initialize the APPS folder; A code management module, used to perform code management on the APPS folder and the Package folder; The project packaging and deployment module is used to package and deploy the target project under the project root directory based on CI / CD.

[0019] By adopting the above technical solutions, the Monorepo architecture and the efficient pnpm tool have solved the problems of fragmented project structure and inefficient dependency management in traditional cross-end development. By rationally dividing the APPS folder and the Package folder, code reuse and sharing are achieved, reducing code duplication. Combined with vite and uni-app for front-end engineering initialization, and automated packaging and deployment based on CI / CD, the efficiency of cross-end development is greatly improved.

[0020] In a third aspect, the present application provides an electronic device, which adopts the following technical solution: An electronic device comprising a processor coupled to a memory; The memory stores a computer program that can be loaded by the processor and executes the front-end architecture construction method suitable for cross-end development as described in any one of the first aspects.

[0021] In a fourth aspect, the present application provides a computer-readable storage medium, which adopts the following technical solution: A computer-readable storage medium storing a computer program capable of being loaded by a processor and executing the front-end architecture construction method suitable for cross-end development as described in any one of the first aspects. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 This is a flow chart of a front-end architecture construction method suitable for cross-end development provided in an embodiment of the present application.

[0023] Figure 2 This is a structural block diagram of a front-end architecture construction device suitable for cross-end development provided in an embodiment of the present application.

[0024] Figure 3 This is a structural block diagram of a front-end architecture construction device suitable for cross-end development provided in an embodiment of the present application. DETAILED DESCRIPTION

[0025] The present application is further described in detail below with reference to the accompanying drawings.

[0026] The present application provides a method for constructing a front-end architecture suitable for cross-end development. The method can be executed by an electronic device, which can be a server or a terminal device. The server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing cloud computing services. The terminal device can be a smartphone, a tablet computer, a desktop computer, etc., but is not limited thereto.

[0027] To make the purpose, technical solutions, and advantages of the embodiments of this application more clear, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0028] In this document, the term "and / or" simply describes a relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can represent: A exists alone, A and B exist simultaneously, or B exists alone. Furthermore, the character " / " in this document, unless otherwise specified, generally indicates an "or" relationship between the related objects.

[0029] like Figure 1 As shown, a front-end architecture construction method suitable for cross-end development is described as follows (steps S101 to S106): Step S101: Create a project root directory as a container for the target project.

[0030] The project root directory, as a container for the target project, can accommodate subsequently created subfolders and various files. By laying out the project root directory through the Monorepo architecture, the traditional multi-warehouse architecture for cross-terminal development can be converted into a single warehouse to manage multi-terminal codes, reducing code management costs.

[0031] Step S102: Use pnpm to initialize the project root directory.

[0032] After the root directory is created, use pnpm to initialize the project to better manage project dependencies.

[0033] pnpm is an efficient package management tool that uses hard links and symbolic links when handling dependencies. Compared with traditional tools such as npm, it can greatly save disk space and increase the speed of dependency installation and updates.

[0034] Step S103: Create an APPS folder and a Package folder in the project root directory.

[0035] The APPS folder is used to store front-end projects for various terminals. Front-end projects are the front-end codes developed and optimized for each terminal according to the corresponding platform requirements. The Package folder is used to store common modules for all terminals. Terminals include web and mobile terminals, and mobile terminals include app and mini-program terminals.

[0036] Common modules across all terminals include the APIs backend request layer, types type definitions, business reused business logic, const constants, locales internationalization resources, store global state management, and utils general utility functions. APIs centrally manages interactions between each terminal and the backend interface; types defines the data types used in the project, ensuring consistency across terminal code; business encapsulates business logic for easy reuse across terminals; const stores constant information to reduce duplication of constant definitions in code; locales handles content corresponding to internationalized languages; store manages global state; and utils contains some general utility functions. This division allows different terminals to share these common modules, reducing code duplication.

[0037] Step S104: Initialize the APPS folder.

[0038] Specifically, the APPS folder is initialized, including: initializing the front-end project of the web side based on vite; initializing the front-end project of the mobile side based on uni-app.

[0039] In this embodiment, the front-end project on the web side is initialized through Vite, which is a fast front-end construction tool. It uses the browser's native ES module import feature to achieve fast cold start and hot update, which can significantly improve the efficiency of web development. For the front-end project on the mobile side, it is initialized through Uni-App, which is a cross-platform development framework that can be published to multiple mobile platforms using one set of code, thereby improving the efficiency of mobile development.

[0040] Step S105: perform code management on the APPS folder and the Package folder.

[0041] After the project is successfully built, perform code management on the APPS folder and the Package folder, specifically building a calling relationship between each front-end project in the APPS folder and the public modules in the Package folder. That is, the front-end projects on the web and mobile sides will introduce the public modules in the Package folder, improving the reusability and consistency of the code.

[0042] For example, when processing backend requests, both the web and mobile sides will call the request function in the apis module; when processing business logic, the common logic in the business module will be called.

[0043] In the project's state management and network request process, both the web and mobile sides can use Pinia as the global state management library to manage the global state and realize centralized storage and synchronization of multi-terminal states; both the web and mobile sides can use Flyio, which naturally supports the web, app, and mini-program sides, as the client library for network requests to realize centralized storage and efficient management of application states, improve the consistency of states between different modules, and combine with PromiseAPI to process asynchronous network requests and reduce the occurrence of callback regions.

[0044] Step S106: Package and deploy the target project in the project root directory based on CI / CD.

[0045] Among them, CI / CD is the continuous integration / continuous deployment process.

[0046] Specifically, the target project is packaged and deployed based on CI / CD, including: accessing the inner instructions of the project under the project root directory through the outermost instructions; executing the inner instructions of the project to build the web project and the mobile project; executing the move-build instruction to move the web project and the mobile project to the preset dist folder; executing the deploy script to deploy the web project and the mobile project in the preset dist folder to the server.

[0047] In this embodiment, the project inner instructions under the project root directory are accessed by executing the outermost instructions under the project root directory. In this way, the project build process can be managed in a unified manner; by executing the project inner instructions, the project composed of vue and ts files under the root directory is compiled into js files, thereby building a web project and a mobile project; then the move-build instruction is executed to move the web project and the mobile project to the preset dist folder, so that the build products (web project and mobile project) can be centrally managed to facilitate subsequent deployment operations; the deploy script is executed to deploy the web project and the mobile project in the preset dist folder to the server, so that users can access the corresponding environment through the URL or App.

[0048] Specifically, the method also includes: encapsulating and optimizing the postMessage communication protocol on the WebView side through the Comlink tool; parsing the communication data on the native application side through the Comlink protocol specification, and building an RPC-like mode through the native controller.

[0049] In this embodiment, the WebView end encapsulates and optimizes the postMessage communication protocol through the Comlink tool, converting the native API into a Promise-style interface; the native application end parses the communication data through the Comlink protocol specification and builds an RPC-like mode through the native controller, which can realize efficient cross-end function calls, thereby optimizing cross-end communication.

[0050] Figure 2 This is a structural block diagram of a front-end architecture construction device 200 suitable for cross-end development provided in an embodiment of the present application.

[0051] like Figure 2 As shown, the front-end architecture construction device 200 suitable for cross-end development mainly includes: A root directory creation module 201 is used to create a project root directory as a container for the target project. The project root directory is laid out using a Monorepo architecture. A root directory initialization module 202 is used to initialize the project root directory using pnpm; The project building module 203 is used to create an APPS folder and a Package folder in the project root directory. The APPS folder is used to store front-end projects of various terminals, and the Package folder is used to store common modules of all terminals, including web terminals and mobile terminals. The front-end engineering initialization module 204 is used to initialize the APPS folder; The code management module 205 is used to manage the code of the APPS folder and the Package folder; The project packaging and deployment module 206 is used to package and deploy the target project in the project root directory based on CI / CD.

[0052] As an optional implementation of this embodiment, the common module includes apis, types, business, const, locales, store, and utils.

[0053] As an optional implementation of this embodiment, the front-end project initialization module 204 is specifically used to initialize the APPS folder, including: initializing the front-end project of the web side based on vite; initializing the front-end project of the mobile side based on uni-app.

[0054] As an optional implementation of this embodiment, the code management module 205 is specifically used to perform code management on the APPS folder and the Package folder, including: building a calling relationship between each front-end project and the public module.

[0055] As an optional implementation of this embodiment, the web and mobile ends use Pinia as the global state management library; the web and mobile ends use Flyio as the client library for network requests, and combine PromiseAPI to process network asynchronous requests.

[0056] As an optional implementation of this embodiment, the project packaging and deployment module 206 is specifically used to package and deploy the target project based on CI / CD, including: accessing the project inner instructions under the project root directory through the outermost instructions; executing the project inner instructions to build the web project and the mobile project; executing the move-build instruction to move the web project and the mobile project to the preset dist folder; executing the deploy script to deploy the web project and the mobile project in the preset dist folder to the server.

[0057] As an optional implementation of this embodiment, the front-end architecture construction device 200 suitable for cross-end development is also specifically used to: encapsulate and optimize the postMessage communication protocol of the WebView end through the Comlink tool; parse the communication data of the native application end through the Comlink protocol specification, and build an RPC-like mode through the native controller.

[0058] In one example, the module in any of the above devices can be one or more integrated circuits configured to implement the above method, such as: one or more application-specific integrated circuits (ASICs), or one or more digital signal processors (DSPs), or one or more field programmable gate arrays (FPGAs), or a combination of at least two of these integrated circuit forms.

[0059] For another example, when the modules in the device can be implemented in the form of a processing element scheduling program, the processing element can be a general-purpose processor, such as a central processing unit (CPU) or other processor that can call programs. For another example, these modules can be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0060] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0061] Figure 3 This is a structural block diagram of an electronic device 300 provided in an embodiment of the present application.

[0062] like Figure 3 As shown, the electronic device 300 includes a processor 301 and a memory 302 , and may further include an information input / information output (I / O) interface 303 , one or more communication components 304 , and a communication bus 305 .

[0063] The processor 301 is used to control the overall operation of the electronic device 300 to complete all or part of the steps of the front-end architecture construction method suitable for cross-end development; the memory 302 is used to store various types of data to support the operation of the electronic device 300. These data may include, for example, instructions for any application or method operating on the electronic device 300, as well as application-related data. The memory 302 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk, or optical disk.

[0064] The I / O interface 303 provides an interface between the processor 301 and other interface modules, which may be a keyboard, a mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 304 is used for wired or wireless communication between the electronic device 300 and other devices. Wireless communication, such as Wi-Fi, Bluetooth, Near Field Communication (NFC), 2G, 3G or 4G, or a combination of one or more thereof, may include: a Wi-Fi component, a Bluetooth component, and an NFC component.

[0065] The electronic device 300 can be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors or other electronic components to execute the front-end architecture construction method suitable for cross-end development given in the above embodiment.

[0066] Communication bus 305 may include a path for transmitting information between the aforementioned components. Communication bus 305 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. Communication bus 305 may be divided into an address bus, a data bus, a control bus, and the like.

[0067] The electronic device 300 may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., as well as fixed terminals such as digital TVs, desktop computers, etc., and may also be servers, etc.

[0068] The present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the above-mentioned front-end architecture construction method suitable for cross-end development are implemented.

[0069] The computer-readable storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0070] The terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed or inherent to such process, method, article, or apparatus.

[0071] The above description is merely a preferred embodiment of the present application and an illustration of the technical principles employed. Those skilled in the art should understand that the scope of application involved in this application is not limited to the technical solutions formed by a specific combination of the above-mentioned technical features, but should also cover other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the aforementioned application concept. For example, a technical solution formed by replacing the above-mentioned features with (but not limited to) technical features with similar functions applied for in this application.

Claims

1. A front-end architecture construction method suitable for cross-end development, characterized in that: include: Create a project root directory as a container for the target project, where the project root directory is laid out using a Monorepo architecture; Use pnpm to initialize the project root directory; Create an APPS folder and a Package folder in the project root directory. The APPS folder is used to store front-end projects of various terminals, and the Package folder is used to store common modules of all terminals, including web terminals and mobile terminals. Initialize the APPS folder; Perform code management on the APPS folder and the Package folder; Package and deploy the target project in the project root directory based on CI / CD.

2. The method according to claim 1, characterized in that The common modules include apis, types, business, const, locales, store and utils.

3. The method according to claim 1, characterized in that Initializing the APPS folder includes: Initialize the front-end project of the web end based on Vite; Initialize the front-end project of the mobile end based on uni-app.

4. The method according to claim 1, wherein The code management of the APPS folder and the Package folder includes: Construct a calling relationship between each of the front-end projects and the common module.

5. The method according to claim 1, wherein The web end and the mobile end use Pinia as the global state management library; the web end and the mobile end use Flyio as the client library for network requests, and combine PromiseAPI to process network asynchronous requests.

6. The method according to claim 1, wherein The packaging and deployment of the target project based on CI / CD includes: Access the inner layer instructions of the project under the root directory of the project through the outermost layer instructions; Execute the project's internal instructions to build web and mobile projects; Execute the move-build command to move the web project and the mobile project to the preset dist folder; Execute the deploy script to deploy the web-side project and the mobile-side project in the preset dist folder to the server.

7. The method according to claim 1, characterized in that The method further comprises: Encapsulate and optimize the postMessage communication protocol on the WebView side through the Comlink tool; The communication data of the native application side is parsed through the Comlink protocol specification, and an RPC-like mode is built through the native controller.

8. A front-end architecture construction device suitable for cross-end development, characterized in that: include: A root directory creation module is used to create a project root directory as a container for the target project. The project root directory is laid out using the Monorepo architecture. A root directory initialization module is used to initialize the project root directory using pnpm; A project building module is used to create an APPS folder and a Package folder in the project root directory. The APPS folder is used to store front-end projects for various terminals, and the Package folder is used to store common modules for all terminals, including web terminals and mobile terminals. The front-end engineering initialization module is used to initialize the APPS folder; A code management module, used to perform code management on the APPS folder and the Package folder; The project packaging and deployment module is used to package and deploy the target project under the project root directory based on CI / CD.

9. An electronic device, characterized in that: comprising a processor coupled to a memory; The processor is configured to execute the computer program stored in the memory, so that the electronic device performs the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that The method comprises a computer program or an instruction, which, when executed on a computer, causes the computer to execute the method according to any one of claims 1 to 7.

Images