CN115629753A

CN115629753A - Front-end project construction method and device, electronic equipment and storage medium

Info

Publication number: CN115629753A
Application number: CN202210981610.9A
Authority: CN
Inventors: 李明彰
Original assignee: CITIC Aibank Corp Ltd
Current assignee: CITIC Aibank Corp Ltd
Priority date: 2022-08-15
Filing date: 2022-08-15
Publication date: 2023-01-20

Abstract

The disclosure provides a front-end project construction method and device, electronic equipment and a storage medium. One embodiment of the method comprises: and responding to the selection operation of the user aiming at the target engineering template identification, and determining the engineering template corresponding to the target engineering template identification, wherein the engineering template comprises at least one configuration item and a corresponding configuration parameter value. And generating a front-end item based on each configuration item and the corresponding configuration parameter value. The implementation mode can improve the development efficiency of the front-end project.

Description

Front-end project construction method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for constructing a front-end project, an electronic device, and a storage medium.

Background

When front-end personnel develop a front-end project, different front-end personnel have own development specifications, architectural design, technical stacks and service components, so that technical modules are difficult to reuse, technical achievements are difficult to precipitate, and the development efficiency of the front-end project is low.

Disclosure of Invention

The disclosure provides a front-end project construction method and device, electronic equipment and a storage medium.

In a first aspect, the present disclosure provides a method for constructing a front-end project, which is applied to a scaffold system, and the method includes:

responding to the selection operation of a user aiming at a target engineering template identification, and determining an engineering template corresponding to the target engineering template identification, wherein the engineering template comprises at least one configuration item and a corresponding configuration parameter value;

and generating a front-end item based on each configuration item and the corresponding configuration parameter value.

In some optional embodiments, before generating the front-end item based on the at least one configuration item and the corresponding configuration parameter value, the method further comprises:

acquiring corresponding user configuration parameters input by a user aiming at least one user configuration item;

and modifying the engineering template based on each user configuration item and the corresponding user configuration parameter value.

In some optional embodiments, the modifying the engineering template based on each of the user configuration items and the corresponding user configuration parameter value includes:

and replacing the configuration parameter value corresponding to the target configuration item in the engineering template with the user configuration parameter, wherein the target configuration item is the configuration item corresponding to the user configuration item in the engineering template.

In some optional embodiments, the user configuration item comprises at least one of: item name, item version number, item description information, and user name.

In a second aspect, the present disclosure provides a construction apparatus for a front-end project, which is applied to a scaffold system, the apparatus including:

the system comprises a determining unit, a processing unit and a processing unit, wherein the determining unit is configured to respond to a selection operation of a user aiming at a target engineering template identification, and determine an engineering template corresponding to the target engineering template identification, and the engineering template comprises at least one configuration item and a corresponding configuration parameter value;

and the generating unit is configured to generate a front-end item based on each configuration item and the corresponding configuration parameter value.

In some optional embodiments, before the generating a front-end item based on the at least one configuration item and the corresponding configuration parameter value, the apparatus further includes:

the acquisition unit is configured to acquire a corresponding user configuration parameter input by a user aiming at least one user configuration item;

and the modification unit is configured to modify the engineering template based on each user configuration item and the corresponding user configuration parameter value.

In some optional embodiments, the modifying unit is further configured to:

In a third aspect, the present disclosure provides an electronic device, comprising: one or more processors; a storage device, on which one or more programs are stored, which, when executed by the one or more processors, cause the one or more processors to implement the method as described in any implementation manner of the first aspect.

In a fourth aspect, the present disclosure provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by one or more processors, implements the method as described in any of the implementations of the first aspect.

Drawings

Other features, objects and advantages of the disclosure will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings in which:

FIG. 1 is an exemplary system architecture diagram in which one embodiment of the present disclosure may be applied;

FIG. 2 is a flow diagram of one embodiment of a method of building a front-end project according to the present disclosure;

FIG. 3 is a flow diagram of yet another embodiment of a method of building a front-end project according to the present disclosure;

FIG. 4 is a schematic block diagram of one embodiment of a building apparatus for a front end project according to the present disclosure;

FIG. 5 is a schematic block diagram of a computer system suitable for use in implementing the electronic device of the present disclosure.

Detailed Description

The present disclosure is described in further detail below with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the relevant invention and not restrictive of the invention. It should be noted that, for convenience of description, only the portions related to the related invention are shown in the drawings.

It should be noted that, in the present disclosure, the embodiments and features of the embodiments may be combined with each other without conflict. The present disclosure will be described in detail below with reference to the accompanying drawings in conjunction with embodiments.

Fig. 1 illustrates an exemplary system architecture 100 to which embodiments of the front-end project construction method or front-end project construction apparatus of the present disclosure may be applied.

As shown in fig. 1, system architecture 100 may include terminal device 101, network 102, and server 103. Network 102 is the medium used to provide communication links between terminal devices 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

A user may use terminal device 101 to interact with server 103 over network 102 to receive or send messages and the like. Various communication client applications, such as a front-end project building application, a web browser application, and the like, may be installed on the terminal device 101.

The terminal apparatus 101 may be hardware or software. When the terminal device 101 is hardware, it may be various electronic devices having a display screen and supporting text input, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like. When the terminal apparatus 101 is software, it can be installed in the electronic apparatuses listed above. It may be implemented as multiple software or software modules (e.g., to provide front-end project building services) or as a single software or software module. And is not particularly limited herein.

The server 103 may be a server that provides various services, such as a background server that provides a front-end project building service to the terminal device 101.

In some cases, the construction method of the front-end project provided by the present disclosure may be performed by the terminal device 101 and the server 103 together, for example, a step of "determining an engineering template corresponding to a target engineering template identification in response to a selection operation of a user with respect to the target engineering template identification" may be performed by the terminal device 101, and the remaining steps may be performed by the server 103. The present disclosure is not limited thereto. Accordingly, the building device of the front-end item may be provided in the terminal apparatus 101 and the server 103, respectively.

In some cases, the construction method of the front-end project provided by the present disclosure may be executed by the terminal device 101, and accordingly, the construction apparatus of the front-end project may also be disposed in the terminal device 101, in which case, the system architecture 100 may also not include the server 103.

The server 103 may be hardware or software. When the server 103 is hardware, it may be implemented as a distributed server cluster composed of a plurality of servers, or may be implemented as a single server. When the server 103 is software, it may be implemented as a plurality of software or software modules (for example, to provide a front-end project building service), or as a single software or software module. And is not particularly limited herein.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

With continued reference to FIG. 2, a flow 200 of one embodiment of a method of building a front-end item according to the present disclosure is shown. The construction method of the front-end project is applied to a scaffold system. The scaffolding system may be constructed based on node. The scaffolding system can support a variety of frame type engineering forms. The construction method of the front-end project comprises the following steps:

step 201, responding to the selection operation of the user aiming at the target engineering template identification, and determining the engineering template corresponding to the target engineering template identification.

Here, the engineering template may include at least one configuration item and a corresponding configuration parameter value. The configuration item may include address, name, code, etc. information.

The target engineering template identification may be used to characterize the engineering template. The engineering template identification may include, without limitation, at least one of a frame type, address, name, code, etc. of the engineering template.

In this embodiment, an execution main body (for example, a terminal device 101 shown in fig. 1) of the method for constructing a front-end project may determine a corresponding project template according to a target project template identifier after responding to an operation that a user selects the target project template identifier from a preset project template identifier list.

Prior to step 202, the method may further include steps 2011 and step 2012.

In step 2011, the corresponding user configuration parameters entered by the user for the at least one user configuration item are obtained.

Here, the user configuration parameters are generally obtained in a query manner. In one scenario, after determining the project template corresponding to the target project template identifier, the executing entity may prompt the user to input user configuration parameters corresponding to the user configuration item. The user configuration items may include at least one of: item name, item version number, item description information, and user name.

For example, the user configuration parameters and/or the target project template identification may also be obtained as follows. And after all the user configuration parameters are collected, starting to initialize the project.

And realizing user interaction through an inquirer library, and acquiring the name of the project input by the user.

And realizing user interaction through an inquirer library, and acquiring the name of the user input by the user.

And realizing user interaction through an inquirer library, and acquiring the version number created by the input project.

And realizing user interaction through an inquirer library and acquiring the description of the input item.

User interaction is realized through an inquirer library, and the template type (target engineering template identification) used by the input initialization project is obtained.

Step 2012, modify the engineering template based on the user configuration items and the corresponding user configuration parameter values.

Specifically, after the user configuration parameters and the target engineering template identifier are collected in step 2011, the executing entity may pull the corresponding engineering template from the git warehouse according to the target engineering template identifier selected by the user. Here, shelljs synchronous execution git commands can be used to implement. And modifying the relevant information in the package in the pulled engineering template according to the collected user configuration parameters. Here, json's read and write can be implemented using fs-extra library.

As an example, a code implementing the above steps is given below:

const packagePath＝./packagejson'

const fsemrequire('fs-extra')

v/read json File, return json object

const packageJson＝fsereadJsonSync(packagePath)

// modify json

packageJson.name＝'lmz

// regenerating is File

fse.outputJsonSync(packagePath，packageJsonspaces2}

Further, the engineering template is already set up after being modified. Next, dependency dependencies can be installed. Automatic installation of dependencies can be achieved, for example, by executing the yarn command according to the cross-spawn library.

As an example, a code implementing the above steps is given below:

const spawn＝require(cross-spawn’)

const args＝['install”--save','--save-exact']

const child＝spawn('yarn'args,{cwd,

stdio:['pipe'process.stdout，process.stderr]})

after the dependency installation is finished, according to the collected project names in the user configuration items, the scripts packaged by us replace the corresponding file names with the collected project names.

Step 202, generating a front-end item based on each configuration item and the corresponding configuration parameter value.

In some alternative embodiments, step 202 may include: and replacing the configuration parameter value corresponding to the target configuration item in the engineering template with the user configuration parameter, wherein the target configuration item is the configuration item corresponding to the user configuration item in the engineering template.

Referring to fig. 3, fig. 3 is a flow chart illustrating a method of constructing a front-end project according to another embodiment of the present disclosure.

Firstly, a scaffold system is utilized to obtain user configuration parameters and target engineering template identification.

And secondly, pulling the corresponding engineering template based on the target engineering template identification. And modifying the relevant information in the engineering template according to the user configuration parameters.

Third, the common component library is referenced according to the modified engineering template.

Fourthly, generating a front-end project and submitting a code base.

The engineering template may be a standardized front-end template engineering, with the following built-in:

1. a unified development specification is built in, the development specification is that eslinet is used for constraint, corresponding formatting is carried out by matching with prettier, and mandatory code verification is carried out in gitHooks by combining pre-commit.

2. The architecture design, more company business, makes the corresponding project structure adjustment.

3. The technical system mainly depends on the technical stacks used in companies, such as vue + es6+ webpack

4. The optimal practice schemes under multiple scenes comprise optimal adaptation schemes of a mobile terminal, optimal picture compression processing schemes, optimal schemes of webpack packing speed optimization, optimal schemes of webpack packing volume optimization and the like.

4. The component library can comprise a UI component library and a service component library, the UI style is unified, the reusability is improved, and people can use the components after opening boxes.

5. The tool method library can integrate tool methods of all business lines, comprises a basic tool method and a business tool method, improves the reusability of tools, and people consistently participate in the construction of the method library without developing the tool method library of each business line.

The component library can be a technical sediment for converging all service directions, and is upgraded into a unified UI component library, a technical component library, a functional component library and a service component library through code optimization. In order to facilitate management, maintenance and sharing of the component library, the component library is distributed into different npm warehouses according to classification.

The material platform can be used for establishing a visual material platform to display and manage our component library (UI and tools), so that the reuse rate of components is improved, and the communication cost is reduced. This can be accomplished with a generic vue-press or an open source markdown document.

In the above, with reference to fig. 2 to fig. 3, the present disclosure provides a method for constructing a front-end project, and the beneficial effects obtained include but are not limited to:

1. development specification unification: after the unified esint is added into the template, the code format is unified, the time and labor cost of code Review is reduced,

2. technology stack unification: after the templates are unified, the technology stacks are unified, people have more vigor to study the framework, and know the essence of the language and the principle of the framework

3. UI style unification: and uniformly installing a self-developed UI library in the template to realize the unification and multiplexing of UI components and unify the UI styles.

4. Unifying the network request message structure: unified network request message structures are realized by installing npm packets which depend on uniformly packaged http in a template.

5. And (3) unifying the pipeline deployment: a unified pipeline constructs scripts, and different projects are realized by only modifying project names in the projects, so that the pipeline deployment is unified.

6. Optimizing performance and unifying packaging schemes: after the optimization schemes of all service lines are solicited, the optimization schemes are integrated together in the template, so that the optimization schemes of everybody are unified, the wide interest is gathered, the thought barriers of everybody are broken through, and more technical communication is facilitated for everybody.

7. The method can enable a user to directly select the corresponding engineering template to realize automatic front-end engineering creation, and the front-end project creation does not need to be started from basic function building, so that the development efficiency of the front-end project can be improved.

8. The engineering template can be modified according to the collected user configuration parameters, and the flexibility of constructing a front-end project is improved.

In addition, the scaffold system can realize a complete set of project initialization workflows by integrating the following functions.

1. Creating a global command xxx under the bin file directory by node, and providing many instructions

xxx-version view scaffold versions

xxx-help viewing help documents

xxx create a project

2. A commander library is used for realizing the acquisition instruction, and if the instruction is xxx create, a project creation workflow is started

As an example, a code implementing the above steps is given below:

users chewing > aifer create

Please input an efficiency cloud user name guzhaoming Version of 0.1.0

Please input the item description, demo project please select template type H5

Check inter 'aifer-template'.. Check-in project was successful

C:Users guzhaoming>cd demo

Json, detecting whether the scaffold is the latest version or not, and prompting a user to upgrade if the scaffold is not the latest version.

With further reference to fig. 4, as an implementation of the methods shown in the above-mentioned figures, the present disclosure provides an embodiment of a front-end item construction apparatus, which corresponds to the method embodiment shown in fig. 2, and which is specifically applicable to various electronic devices.

As shown in fig. 4, the front-end-item building apparatus 400 of the present embodiment includes: a determination unit 401 and a generation unit 402. The determining unit 401 is configured to determine, in response to a selection operation of a user for a target engineering template identifier, an engineering template corresponding to the target engineering template identifier, where the engineering template includes at least one configuration item and a corresponding configuration parameter value. A generating unit 402 configured to generate a front-end item based on each configuration item and the corresponding configuration parameter value.

In this embodiment, the specific processes of the determining unit 401 and the generating unit 402 of the front-end project building apparatus 400 and the technical effects thereof can refer to the related descriptions of step 201 and step 202 in the corresponding embodiment of fig. 2, which are not described herein again.

In some optional embodiments, before generating the front-end item based on the at least one configuration item and the corresponding configuration parameter value, the apparatus may further include: an obtaining unit (not shown in the figure) configured to obtain a corresponding user configuration parameter input by a user for at least one user configuration item; and a modification unit (not shown in the figure) configured to modify the engineering template based on each user configuration item and the corresponding user configuration parameter value.

In some optional embodiments, the modifying unit (not shown in the figures) may be further configured to: and replacing the configuration parameter value corresponding to the target configuration item in the engineering template with the user configuration parameter, wherein the target configuration item is the configuration item corresponding to the user configuration item in the engineering template.

In some optional embodiments, the user configuration item may include at least one of: item name, item version number, item description information, and user name.

It should be noted that, for details of implementation and technical effects of each unit in the front-end project construction apparatus provided by the present disclosure, reference may be made to descriptions of other embodiments in the present disclosure, and details are not described herein again.

Referring now to FIG. 5, a block diagram of a computer system 500 suitable for use in implementing the electronic device of the present disclosure is shown. The electronic device shown in fig. 5 is only an example, and should not bring any limitation to the functions and the scope of use of the present disclosure.

As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU) 501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An Input/Output (I/O) interface 506 is also connected to bus 504.

The following components are connected to the I/O interface 506: an input section 506 including a touch screen, a tablet, a keyboard, a mouse, or the like; an output section 507 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage portion 508 including a hard disk and the like; and a communication section 509 including a Network interface card such as a LAN (Local Area Network) card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet.

In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509. The above-described functions defined in the method of the present disclosure are performed when the computer program is executed by a Central Processing Unit (CPU) 501. It should be noted that the computer readable medium described in the present disclosure may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer-readable signal medium may include a propagated data signal with computer-readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations for aspects of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, smalltalk, C + +, python, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems that perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units described in this disclosure may be implemented by software or hardware. The described units may also be provided in a processor, and may be described as: a processor includes a determination unit and a generation unit. Where the names of these elements do not in some cases constitute a limitation on the elements themselves, for example, a determination element may also be described as an "element that determines an engineering template corresponding to a target engineering template identification".

As another aspect, the present disclosure also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be present separately and not assembled into the device. The computer readable medium carries one or more programs which, when executed by the apparatus, cause the apparatus to: responding to the selection operation of a user aiming at the target engineering template identification, and determining an engineering template corresponding to the target engineering template identification, wherein the engineering template comprises at least one configuration item and a corresponding configuration parameter value; and generating a front-end item based on each configuration item and the corresponding configuration parameter value.

The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the invention in the present disclosure is not limited to the specific combination of the above-mentioned features, but also encompasses other embodiments in which any combination of the above-mentioned features or their equivalents is possible without departing from the inventive concept as defined above. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.

Claims

1. A construction method of a front-end project is applied to a scaffold system, and comprises the following steps:

2. The method of claim 1, wherein prior to said generating a front-end item based on said at least one configuration item and corresponding configuration parameter values, the method further comprises:

3. The method of claim 2, wherein said modifying the engineering template based on each of the user configuration items and corresponding user configuration parameter values comprises:

4. A method according to claim 2 or 3, wherein the user configuration item comprises at least one of: item name, item version number, item description information, and user name.

5. A construction apparatus for a front-end project, applied to a scaffolding system, the apparatus comprising:

6. The apparatus of claim 5, wherein prior to the generating a front-end item based on the at least one configuration item and corresponding configuration parameter values, the apparatus further comprises:

7. The apparatus of claim 6, wherein the modifying unit is further configured to:

8. The apparatus of claim 7, wherein the user configuration item comprises at least one of: item name, item version number, item description information, and user name.

9. An electronic device, comprising:

one or more processors;

storage means for storing one or more programs;

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method recited in any of claims 1-4.

10. A computer-readable medium, on which a computer program is stored, wherein the program, when executed by a processor, implements the method of any one of claims 1-4.