CN108628626B - Development environment building method, code updating method and device - Google Patents
Development environment building method, code updating method and device Download PDFInfo
- Publication number
- CN108628626B CN108628626B CN201810419826.XA CN201810419826A CN108628626B CN 108628626 B CN108628626 B CN 108628626B CN 201810419826 A CN201810419826 A CN 201810419826A CN 108628626 B CN108628626 B CN 108628626B
- Authority
- CN
- China
- Prior art keywords
- hot update
- webpage
- local
- server
- remote server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
- 238000011161 development Methods 0.000 title claims abstract description 88
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000010276 construction Methods 0.000 claims abstract description 23
- 230000006870 function Effects 0.000 claims description 49
- 230000008859 change Effects 0.000 claims description 27
- 238000012545 processing Methods 0.000 claims description 27
- 238000012544 monitoring process Methods 0.000 claims description 14
- 230000008569 process Effects 0.000 claims description 11
- 238000004891 communication Methods 0.000 claims description 9
- 230000015654 memory Effects 0.000 claims description 5
- 230000000977 initiatory effect Effects 0.000 claims description 2
- 230000009286 beneficial effect Effects 0.000 abstract description 4
- 238000013515 script Methods 0.000 description 22
- 238000010586 diagram Methods 0.000 description 13
- 230000004048 modification Effects 0.000 description 8
- 238000012986 modification Methods 0.000 description 8
- 230000000694 effects Effects 0.000 description 5
- 238000004806 packaging method and process Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the invention provides a development environment construction method, a code updating method and a code updating device, and relates to the field of webpage development. The development environment construction method comprises the following steps: starting a local server which enables local webpage resources to be accessed by a remote server; inserting the access link of the webpage resource into a page template of the webpage resource; and sending the page template to the remote server from the local so that the browser can download the webpage resource according to the access link through the remote server. The technical scheme provided by the embodiment of the invention is beneficial to improving the webpage development efficiency.
Description
Technical Field
The embodiment of the invention relates to the field of webpage development, in particular to a development environment building method, a code updating method and a device.
Background
The development of the webpage comprises a front end and a server end. Front-end development generally refers to the development of page templates, web scripts and web styles; the development of the server refers to the development of background scripts, databases, web interfaces and the like. The link between the front end and the server is a page template, the page template can be used for loading a front end script, and can also be processed by the server to inject some information into the template. In many practical scenarios, a server developer is required to write some information (such as user information and user authority) into a page template, and interact with a webpage script and a webpage style written by a front-end developer. In such a scenario, when a front-end developer develops, the front-end code needs to be deployed to the server and developed in cooperation with a server-side worker.
In the aspect of code development, how to improve the development efficiency is a problem faced in the field. The present invention is proposed to solve the problem of development efficiency.
Disclosure of Invention
The embodiment of the invention provides a development environment construction method, a code updating method and a device, which are beneficial to improving the efficiency of front-end development.
In a first aspect, an embodiment of the present invention provides a development environment construction method, including:
starting a local server which enables local webpage resources to be accessed by a remote server;
inserting the access link of the webpage resource into a page template of the webpage resource;
sending the page template to the remote server from the local so that the browser can download the webpage resource according to the access link through the remote server;
wherein the local server has a hot update function;
wherein the web page resource comprises a hot update execution file.
In a second aspect, an embodiment of the present invention provides a code updating method, including:
monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server, and the webpage resources comprise a hot update execution file;
and sending a hot update message carrying the code change to the remote server through the communication connection between the local server and the remote server based on the hot update function of the local server so as to trigger the hot update execution file of the browser to execute hot update of a page.
In a third aspect, an embodiment of the present invention provides a development environment construction apparatus, including
The starting module is used for starting a local server which enables local webpage resources to be accessed by a remote server;
the processing module is used for inserting the access link of the webpage resource into a page template of the webpage resource;
the sending module is used for sending the webpage template to the remote server from the local so that the browser can download the webpage resource through the remote server according to the access link;
wherein the local server has a hot update function;
wherein the web page resource comprises a hot update execution file.
In a fourth aspect, an embodiment of the present invention provides a code updating apparatus, including:
the monitoring module is used for monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server, and the webpage resources comprise hot update execution files;
a sending module, configured to send, through a hot update function of the local server, a hot update message carrying the code change to the remote server based on a communication connection between the local server and the remote server, so as to trigger the hot update execution file of the browser to execute hot update of a page.
In a fifth aspect, an embodiment of the present invention provides a web page development system, including:
the development environment building apparatus as described above;
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, and the webpage resources comprise hot update execution files; and
and the remote server is used for receiving the access link of the webpage resource.
In a sixth aspect, an embodiment of the present invention provides a web page development system, including:
code updating apparatus as described above; and
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, and the webpage resources comprise hot update execution files;
the browser is used for opening a webpage of a remote server, and the browser downloads the webpage resource of the webpage from the local server through the remote server; and
the remote server is used for responding to the opening of the webpage to access the local webpage resource through the local server, and sending a hot update message to the webpage resource of the browser so as to trigger the hot update execution file of the browser to execute hot update of the webpage.
In a seventh aspect, an embodiment of the present invention provides a computer storage medium, which stores one or more computer instructions, and when executed, the one or more computer instructions implement the development environment building method or the code updating method described above.
In an eighth aspect, an embodiment of the present invention provides an electronic device, including:
one or more memories for storing one or more computer instructions;
one or more processors for invoking and executing the one or more computer instructions to implement the development environment building method or the code updating method as described above.
By adopting the embodiments of the invention, the front-end development efficiency is improved.
These and other aspects of the invention are apparent from and will be elucidated with reference to the embodiments described hereinafter.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and those skilled in the art can also obtain other drawings according to the drawings without creative efforts.
FIG. 1 shows a flow diagram of a development environment construction method according to an embodiment of the invention;
FIG. 2 shows a flow diagram of a development environment construction method according to another embodiment of the present invention;
FIG. 3 shows a flow diagram of a code update method according to an embodiment of the invention;
FIG. 4 shows a block diagram of a development environment construction apparatus according to one embodiment of the present invention;
FIG. 5 shows a block diagram of a code update apparatus according to one embodiment of the invention;
FIG. 6 illustrates a block diagram of a web page development system, according to one embodiment of the invention;
FIG. 7 illustrates a block diagram of a web page development system in accordance with another embodiment of the present invention;
FIG. 8 shows a block diagram of an electronic device according to an embodiment of the invention.
Detailed Description
In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention.
In some of the flows described in the present specification and claims and in the above figures, a number of operations are included that occur in a particular order, but it should be clearly understood that these operations may be performed out of order or in parallel as they occur herein, with the order of the operations being indicated as 101, 102, etc. merely to distinguish between the various operations, and the order of the operations by themselves does not represent any order of performance. Additionally, the flows may include more or fewer operations, and the operations may be performed sequentially or in parallel. It should be noted that, the descriptions of "first", "second", etc. in this document are used for distinguishing different messages, devices, modules, etc., and do not represent a sequential order, nor limit the types of "first" and "second" to be different.
First, names and tools related to or possibly related to embodiments of the present invention are described, and these descriptions are intended to make the reader more easily understand the embodiments of the present invention.
Remote front-end development: the development of the webpage comprises a front end and a server end, wherein the front end development generally refers to the development of a webpage template, a webpage script and a webpage style; the development of the server refers to the development of background scripts, databases, web interfaces and the like. The link between the front end and the server is a page template, the page template can be used for loading a front end script, and can also be processed by the server to inject some information into the template. In many practical scenarios, a server developer is required to write some information (such as user information and user authority) into a page template, and interact with a webpage script and a webpage style written by a front-end developer. In such a scenario, when a front-end developer develops, the front-end code needs to be deployed to the server and developed in cooperation with a server-side worker.
FIS is a front-end development solution developed by hundreds, and can solve the problems of automation tools, performance optimization, development specifications, code deployment, development flows and the like in front-end development.
However, FIS does not enable real-time hot-update of web pages, which can reduce the development efficiency of front-end developers. For example, if a form needs four steps, each of which must be filled in to enter the next step, the front-end developer needs to frequently fill in the forms of the first three steps when developing the form of the fourth step (because the update of the code needs to refresh the web page to function, and the refresh of the web page needs to start filling in from the first step). If the real-time hot update can be realized, the front-end developer can continuously modify the codes when developing the fourth step, see the modified effect in real time and do not need to perform complicated form filling operation any more.
Webpack is a webpage module construction tool, wherein the module refers to resources (such as static resources like webpage scripts, webpage style sheets, webpage pictures and the like) in a webpage. It specifies a specification for real-time hot updates of web pages. Meanwhile, a local web server is also built in the system, and developers can start the server on own PC to develop cooperatively. One of the salient features of Webpack is that it can pack all resources in a web page (such as html, web scripts, web style sheets, pictures, etc.) into a single javascript file, and this packed script file is also called an entry file, and contains all information of the page.
However, Webpack does not have a function of pushing code to a remote server in real time, and Webpack can only parse html files and cannot parse and use server side templates (such as smart templates in PHP language). In addition, the real-time hot update technology of the Webpack can only act on a Webpack built-in web server started on a developer's own computer, and cannot realize the real-time hot update of the web page of the remote server.
Real-time hot update of web pages: in general, if a user opens a certain web page, when the code of the web page on the web page server changes (for example, a new version of code is deployed on the server), the web page needs to be refreshed to see the change of the web page; the real-time hot updating technology can immediately change the structure of the webpage when the code changes, and immediately display the changed structure and style of the webpage to a user.
Nodejs is a javascript language runtime environment based on a V8 engine (developed by Google) that can be used to develop command line tools, server side scripts, etc. The aforementioned FIS, Webpack are both Nodejs-based local command line tools.
Express is a service end framework based on Nodejs, and can be used for quickly building a webpage server.
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other examples obtained based on the examples in the present invention are within the scope of the present invention.
Fig. 1 is a flowchart illustrating a development environment building method according to an embodiment of the present invention. Illustratively, the method can be applied to local environment building of front-end code development. Referring to fig. 1, the method includes:
100: a local server is initiated that makes local web page resources accessible to the remote server. In other words, the local server is used to serve the web page resource.
In this embodiment, the local server has a hot update function. For example, the local server is enabled with webpack hot-update functionality by loading webpack hot-update middleware.
In this embodiment, the web page resource includes a hot update execution file, and the hot update execution file is used for establishing a hot update connection and executing a hot update process.
In this embodiment, the web page resource further includes a page code portion, and the web page resource is locally saved as a package file. For example a webpack entry file. The webpack entry file refers to a script file packed based on webpack. Alternatively, the step of generating the webpack entry file by packaging can be taken as a step in the method provided by this embodiment.
And 102, inserting the access link of the webpage resource into the page template of the webpage resource. And the page template and the webpage resource have a corresponding relation.
104: and sending the page template to the remote server from the local so that the browser can download the webpage resource according to the access link through the remote server.
By adopting the development environment construction method provided by the embodiment, the local environment suitable for front-end code development can be efficiently constructed. The expression "suitable for front-end code development" is embodied in: under the condition that a remote webpage is opened, even if codes are modified locally, a front-end developer can observe the actual modification effect of the remote webpage in real time, refreshing operation is not needed, and development efficiency is improved.
Optionally, in an implementation manner of this embodiment, in 104, the page template carrying the access link is sent to the remote server locally through FIS.
Optionally, in an implementation manner of this embodiment, the local server is an express server.
Optionally, in an implementation manner of this embodiment, the hot update function is started by reading a second configuration file and then based on the second configuration file. Wherein the second configuration file comprises a startup configuration of the hot update function.
Fig. 2 is a flowchart illustrating a development environment building method according to an embodiment of the present invention. Illustratively, the method can be applied to local environment building of front-end code development. Referring to fig. 2, the method includes:
200: reading a first configuration file, wherein the first configuration file comprises the processing configuration of the page template.
202: and performing configuration processing based on the first configuration file.
100: a local server is initiated that makes local web page resources accessible to the remote server. The local server has a hot update function.
102: and inserting the access link of the webpage resource into a page template of the webpage resource. And the page template and the webpage resource have a corresponding relation.
104: and sending the page template to the remote server from the local so that the browser can download the webpage resource according to the access link through the remote server.
In the present embodiment, please refer to the description of the embodiment shown in fig. 1 and the implementation manner thereof for the processing of the processing 100-104, which is not described herein again.
In this embodiment, in the process 202, the configuration process includes: obtaining a local IP and port number (e.g., obtaining the port number from a first configuration file); inserting the access link including the local IP and port number in the page template.
By adopting the development environment construction method provided by the embodiment, the local environment suitable for front-end code development can be efficiently constructed. The expression "suitable for front-end code development" is embodied in: under the condition that a remote webpage is opened, even if codes are modified locally, a front-end developer can observe the actual modification effect of the remote webpage in real time, refreshing operation is not needed, and development efficiency is improved.
Fig. 3 is a flowchart illustrating a front-end code updating method of a remote server according to an embodiment of the present invention. Referring to fig. 3, the method includes:
300: and in the case of opening a webpage of a remote server through a browser, monitoring local code changes aiming at webpage resources. The browser downloads the webpage resources of the webpage from a local server through a remote server, wherein the webpage resources comprise hot update execution files.
302: and sending a hot update message carrying the code change to the remote server through a hot update function of the local server and through the communication connection between the local server and the remote server so as to trigger the hot update execution file of the browser to execute hot update of a page.
By adopting the method provided by the embodiment, the remote server can be informed of the local change of the code in real time, and the remote server sends the change of the code to the hot update execution of the browser, so that the hot update execution is triggered to carry out the hot update processing of the page based on the change of the code. Thus, the modification executed locally can be reflected on the remote webpage opened by the browser (or the software with the equivalent function) in real time, and the refreshing operation is not required to be executed, thereby being beneficial to improving the front-end development efficiency.
Optionally, in an implementation manner of this embodiment, the local server is an express server.
Optionally, in an implementation manner of this embodiment, the webpack-based service listens for code changes to the web page resource.
Fig. 4 is a block diagram showing a development environment construction apparatus according to an embodiment of the present invention, which is applied to front-end code development. Referring to fig. 4, the development environment construction apparatus includes a starting module 40, a processing module 42, and a transmitting module 44. The details will be described below.
In this embodiment, the starting module 40 is used to start a local server that makes a local web resource accessible to a remote server, in other words, serves the web resource through the local server.
In this embodiment, the local server has a hot update function. For example, the local server is enabled with webpack hot-update functionality by loading webpack hot-update middleware.
In this embodiment, the web page resource includes a hot update execution file for establishing a hot update connection and executing a hot update process. Illustratively, the web page resources are saved locally as a packaged file, e.g., a webpack entry file. The webpack entry file refers to a script file packaged based on webpack. Optionally, the apparatus provided in this embodiment may include a module for generating a webpack entry file in a packaging manner.
In this embodiment, the processing module 42 is configured to insert the access link of the web resource into the page template of the web resource.
In this embodiment, the sending module 44 is configured to send the page template carrying the access link of the web page resource to the remote server from a local location, so that the browser downloads the web page resource according to the access link through the remote server.
By adopting the development environment construction device provided by the embodiment, the local environment suitable for front-end code development can be efficiently constructed. The expression "suitable for front-end code development" is embodied in: under the condition that a remote webpage is opened, even if codes are modified locally, a front-end developer can observe the actual modification effect of the remote webpage in real time, refreshing operation is not needed, and development efficiency is improved.
Optionally, in an implementation manner of this embodiment, the sending module 44 sends the page template carrying the access link to the remote server locally through FIS.
Optionally, in an implementation manner of this embodiment, the local server is an express server.
Optionally, in an implementation manner of this embodiment, as shown by a dashed box in fig. 4, the local environment building apparatus includes a first reading module 46 and a configuration module 48. The first reading module 46 is configured to read a first configuration file, where the first configuration file includes a processing configuration of the page template. The configuration module 48 is configured to, based on the first configuration file: obtaining a local IP and a port number, and inserting the access link including the local IP and the port number into the page template, for example, inserting the access link in a script tag form.
Optionally, in an implementation manner of this embodiment, the local environment building apparatus includes a second reading module, configured to read a second configuration file, where the second configuration file includes a start configuration of the hot update function; the second starting module starts the hot updating function based on the second configuration file.
Fig. 5 shows a block diagram of a front-end code updating apparatus of a remote server according to an embodiment of the present invention. Referring to fig. 5, the apparatus includes a listening module 50 and a transmitting module 52. The details will be described below.
In this embodiment, the monitoring module 50 is configured to monitor local code changes for a web resource in a case where a web page of a remote server is opened through a browser (for example, a case where a developer opens the remote web page through the browser, or a case where the remote web page is automatically opened through signal triggering, which is not implemented by the monitoring module 50), where the browser downloads the web resource of the web page from the local server through the remote server, and the web resource includes a hot update execution file.
In this embodiment, the sending module 52 is configured to send, through a hot update function of the local server, a hot update message carrying the code change to the remote server based on a communication connection between the local server and the remote server, so as to trigger a hot update of the hot update execution file execution page of the browser.
By adopting the device provided by the embodiment, the remote server can be informed of the local change of the code in real time, and then the remote server sends the change of the code to the hot update execution file of the browser, so that the hot update execution file is triggered to carry out the hot page update processing based on the change of the code. Thus, the modification executed locally can be reflected on the remote webpage opened by the browser (or equivalent software) in real time without executing a refreshing operation, which is beneficial to improving the front-end development efficiency.
Optionally, in an implementation manner of this embodiment, the local server is an express server.
Optionally, in an implementation manner of this embodiment, the monitoring module 50 monitors a code change for the web page resource based on the webpack service.
FIG. 6 shows a block diagram of a web page development system according to an embodiment of the invention. Referring to fig. 6, the web page development system includes a development environment construction apparatus, a local server, and a remote server. The details will be described below.
In this embodiment, please refer to the foregoing for the description of the development environment construction apparatus, which is not described herein. In this embodiment, the local server is configured to make local web resources accessible to the remote server, where the local server has a hot update function, and the web resources include a hot update execution file. The remote server is used for receiving the access link of the webpage resource. For example, a page template carrying the access link is received.
Based on the webpage development system provided by the embodiment, a front-end developer can locally develop front-end codes and observe development effects in real time through a browser without refreshing operation under the condition that a remote webpage is opened through the browser or similar software. Because, based on the web page development system provided by the embodiment, when the remote web page is opened through the browser, the browser can acquire the web page resource from the local server through the remote server; when a developer modifies code, a modification trend (i.e., a code change, e.g., "change page color from a to B") may be sent to a web resource of the browser based on a hot update function, thereby triggering a hot update of the browser to execute file update code and perform a real-time hot update operation.
FIG. 7 shows a block diagram of a web page development system according to an embodiment of the invention. Referring to fig. 7, the web page development system includes a code updating apparatus, a local server, a browser, and a remote server. The details will be described below.
In the present embodiment, please refer to the foregoing for the description of the code updating apparatus, which is not described herein. In this embodiment, the local server is used to make local web resources accessible to the remote server, and the local server has a hot update function, and the web resources include a hot update execution file. The browser is used for opening a webpage of a remote server, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server. The remote server is used for responding to the opening of the webpage, accessing the local webpage resource through the local server, and sending a hot update message to the webpage resource of the browser to trigger the hot update execution file of the browser to execute hot update of the page.
By adopting the webpage development system provided by the embodiment, the efficient front-end development is favorably realized.
FIG. 8 shows a block diagram of an electronic device according to an embodiment of the invention. Referring to fig. 8, the electronic device includes one or more memories 80 and one or more processors 82. The one or more memories 80 are configured to store one or more computer instructions, and the one or more processors 82 are configured to call and execute the one or more computer instructions to implement the development environment construction method or the code updating method provided by the foregoing embodiments or implementations of the foregoing embodiments of the present invention.
Optionally, in an implementation manner of this embodiment, as shown by a dashed box in the figure, the electronic device may further include an input/output interface for implementing data communication.
An embodiment of the present invention further provides a computer storage medium, which stores one or more computer instructions, and when the one or more computer instructions are executed, the development environment building method or the code updating method provided in the foregoing embodiment of the present invention is implemented.
The electronic device or the computer storage medium provided by the embodiments of the present invention may refer to the description of the method embodiments, and thus are not described herein again.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
[ an example of practical application ]
In the example, based on Nodejs/FIS/Webpack, the building of the local environment is realized through a series of Nodejs script automation commands, and the updating process is explained. The example can be understood as a specific implementation manner of the related embodiment of the invention, and can also be understood as a single embodiment.
In one example of an application according to the present invention, the environment construction process is substantially as follows (the reference numbers do not represent the order):
1) and configuring the local nodejs script. Specifically, the developer needs to configure some nodejs scripts locally. The purpose of the configuration is to allow the page template to connect to the webpack-out file. For example, one template corresponds to one webpack script file.
2) The configuration is read. Specifically, the configuration of the developer is read, and the configuration comprises the processing configuration of the page template and the starting configuration of the webpack. The former is used to process the service-side template, and the latter is used to start the webpack service.
3) The page template is processed. For example, there is currently a page template. The following operations are performed: and acquiring the local ip of the developer. A port is obtained in the configuration file, e.g., 2333. Inject an access link containing ip and port number in template. 202.100.1.1:2333/app.
4) And pushing to a remote server. For example, the processed page template is pushed to a remote server using the remote push capability of the FIS. After the pushing is completed, when the developer accesses the web page corresponding to the page template (template.tpl), the local script of the developer is accessed, as described above in 202.100.1.1: 2333/app.js.
5) And starting an express server, wherein webpack real-time packaging middleware and webpack hot update service middleware can be contained. The express server is used for serving app.
6) A webpack hot update middleware is connected.
Js contains, in addition to web page resources, a first part (code, file or script) for establishing a hot update connection and a second part (code, file or script) for implementing hot update logic.
The first part sends a long connection request when executing (for example, the browser automatically executes the first part after loading app. js), for example, a request of http://202.100.1.1:2333/__ webpack _ hmr is sent, so that a long connection is established with the webpack hot update service of the local server (for example, an express server), for example, a long connection of a request-response mechanism is established. If the developer performs code modification locally for the web page resource, for example, the page background is changed from yellow to black. Then, the webpack will monitor the change, and invoke the webpack hot update service to actively push a hot update message, where the message content is: "please execute a piece of code, the content of the code is 'change the page background from yellow to black'. Js at the web page will keep listening to the hot update message, and after receiving the message, perform the following processing: acquiring code content; the code content is executed.
By adopting the example, the webpage development can be carried out locally, the real-time hot update of the remote webpage is realized, and the front-end development efficiency is improved.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above-described technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the embodiments or some parts of the embodiments.
Finally, it should be noted that: the above examples are only intended to illustrate the technical solution of the present invention, but not to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
The invention discloses A1. a development environment construction method, which comprises the following steps:
starting a local server which enables local webpage resources to be accessed by a remote server;
sending an access link of the webpage resource to the remote server from the local so that a browser can download the webpage resource through the remote server according to the access link;
wherein the local server has a hot update function;
wherein the web page resource comprises a hot update execution file.
A2. The method of a1, wherein the web page resource is stored locally as a packaged file.
A3. The method of a1, wherein sending the access link of the web page resource locally to the remote server comprises:
and sending a page template carrying the access link of the webpage resource to the remote server from the local, wherein the page template corresponds to the webpage resource.
A4. The method of a3, the method further comprising:
reading a first configuration file, wherein the first configuration file comprises the processing configuration of the page template;
based on the first configuration file, performing the following processes:
a local IP and a port number are acquired,
inserting the access link including the local IP and port number in the page template
A5. The method of any one of a1-a4, the method further comprising:
reading a second configuration file, wherein the second configuration file comprises a starting configuration of the hot updating function;
initiating the hot update function based on the second profile.
A6. The method of a1, wherein the local server is an express server; the hot update function is a webpack-based hot update function.
B7. A code update method, comprising:
monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server, and the webpage resources comprise a hot update execution file;
and sending a hot update message carrying the code change to the remote server through the communication connection between the local server and the remote server based on the hot update function of the local server so as to trigger the hot update execution file of the browser to execute hot update of a page.
The invention also discloses C8. a development environment construction device, the device includes:
the starting module is used for starting a local server which enables local webpage resources to be accessed by a remote server;
the sending module is used for sending the access link of the webpage resource to the remote server from the local so that the browser can download the webpage resource through the remote server according to the access link;
wherein the local server has a hot update function;
wherein the web page resource comprises a hot update execution file.
C9. The apparatus of C8, wherein the web page resource is stored locally as a package file.
C10. In the apparatus of C8, the sending module is specifically configured to:
and sending a page template carrying the access link of the webpage resource from the local to the remote server, wherein the page template corresponds to the webpage resource.
C11. The apparatus of C10, the apparatus further comprising:
the first reading module is used for reading a first configuration file, and the first configuration file comprises the processing configuration of the page template;
a configuration module configured to perform the following processing based on the first configuration file:
a local IP and a port number are acquired,
inserting the access link including the local IP and port number in the page template.
C12. The device of any one of C8-C11,
the device further comprises a second reading module for reading a second configuration file, wherein the second configuration file comprises the starting configuration of the hot updating function;
the second starting module starts the function based on the hot update based on the second configuration file.
C13. The apparatus as set forth in claim C8,
the local server is an express server;
the hot update function is a webpack-based hot update function.
The invention also discloses a code updating device, comprising:
the monitoring module is used for monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server, and the webpage resources comprise hot update execution files;
a sending module, configured to send, through a hot update function of the local server, a hot update message carrying the code change to the remote server based on a communication connection between the local server and the remote server, so as to trigger the hot update execution file of the browser to execute hot update of a page.
The invention also discloses an E15. a web page development system, comprising:
the development environment construction apparatus of any one of C8-C13;
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, and the webpage resources comprise hot update execution files; and
and the remote server is used for receiving the access link of the webpage resource.
The invention also discloses F16. a web page development system, comprising:
the updating means as described in D14;
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, and the webpage resources comprise hot update execution files;
the browser is used for opening a webpage of a remote server, and the browser downloads the webpage resource of the webpage from the local server through the remote server; and
the remote server is used for responding to the opening of the webpage to access the local webpage resource through the local server, and sending a hot update message to the webpage resource of the browser so as to trigger the hot update execution file of the browser to execute hot update of the webpage.
Also disclosed is a computer storage medium storing one or more computer instructions that, when executed, implement the method of any one of claims a1-a 7.
The invention also discloses h18. an electronic device, comprising:
one or more memories for storing one or more computer instructions;
one or more processors for invoking and executing the one or more computer instructions to implement the method as recited in any one of A1-A7.
Claims (16)
1. A development environment construction method, characterized in that the method comprises:
starting a local server which enables local webpage resources to be accessed by a remote server;
inserting the access link of the webpage resource into a page template of the webpage resource;
locally sending the page template to the remote server so that a browser can download the webpage resource according to the access link through the remote server;
wherein the local server has a hot update function;
the webpage resources comprise a hot update execution file, and the hot update execution file is used for establishing hot update connection and executing hot update processing;
the web page resource is locally saved as a packaged file that also includes a first portion for hot update connections and a second portion for implementing hot update logic.
2. The method of claim 1, wherein the method further comprises:
reading a first configuration file, wherein the first configuration file comprises the processing configuration of the page template;
based on the first configuration file, performing the following processes:
a local IP and a port number are acquired,
inserting the access link including the local IP and port number in the page template.
3. The method of claim 1 or 2, wherein the method further comprises:
reading a second configuration file, wherein the second configuration file comprises a starting configuration of the hot updating function;
initiating the hot update function based on the second profile.
4. The method of claim 1, wherein the web page resource is stored locally as a packaged file.
5. The method of claim 1,
the local server is an express server;
the hot update function is a webpack-based hot update function.
6. A code update method, comprising:
monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, wherein the browser downloads the webpage resources of the webpage from the local server through the remote server according to an access link, the access link is inserted into a page template, the page template is locally sent to the remote server, the webpage resources comprise a hot update execution file, and the hot update execution file is used for establishing a hot update connection and executing hot update processing; the webpage resources are locally stored as a packaged file, and the packaged file further comprises a first part for hot update connection and a second part for realizing hot update logic;
and sending a hot update message carrying the code change to the remote server through the communication connection between the local server and the remote server based on the hot update function of the local server so as to trigger the hot update execution file of the browser to execute hot update of a page.
7. A development environment construction apparatus, characterized in that the apparatus comprises:
the starting module is used for starting a local server which enables local webpage resources to be accessed by a remote server;
the processing module is used for inserting the access link of the webpage resource into a page template of the webpage resource;
the sending module is used for sending the webpage template to the remote server from the local so that the browser can download the webpage resource through the remote server according to the access link;
wherein the local server has a hot update function;
the webpage resources comprise a hot update execution file, and the hot update execution file is used for establishing hot update connection and executing hot update processing;
the web page resource is locally saved as a packaged file that also includes a first portion for hot update connections and a second portion for implementing hot update logic.
8. The apparatus of claim 7, wherein the apparatus further comprises:
the first reading module is used for reading a first configuration file, and the first configuration file comprises the processing configuration of the page template;
a configuration module configured to perform the following processing based on the first configuration file:
a local IP and a port number are acquired,
inserting the access link including the local IP and port number in the page template.
9. The apparatus of claim 7 or 8,
the device further comprises a second reading module for reading a second configuration file, wherein the second configuration file comprises the starting configuration of the hot updating function;
the second starting module starts the hot updating function based on the second configuration file.
10. The apparatus of claim 7, wherein the web page resource is stored locally as a packaged file.
11. The apparatus of claim 7,
the local server is an express server;
the hot update function is a webpack-based hot update function.
12. A code updating apparatus comprising:
the system comprises a monitoring module, a processing module and a processing module, wherein the monitoring module is used for monitoring local code change aiming at webpage resources under the condition that a webpage of a remote server is opened through a browser, the browser downloads the webpage resources of the webpage from the local server through the remote server according to an access link, the access link is inserted into a page template, the page template is locally sent to the remote server, the webpage resources comprise a hot update execution file, and the hot update execution file is used for establishing hot update connection and executing hot update processing; the webpage resources are locally stored as a packaged file, and the packaged file further comprises a first part for hot update connection and a second part for realizing hot update logic;
a sending module, configured to send, through a hot update function of the local server, a hot update message carrying the code change to the remote server based on a communication connection between the local server and the remote server, so as to trigger the hot update execution file of the browser to execute hot update of a page.
13. A web page development system, comprising:
the development environment building apparatus according to any one of claims 7 to 11;
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, the webpage resources comprise hot update execution files, and the hot update execution files are used for establishing hot update connection and executing hot update processing; and
and the remote server is used for receiving the access link of the webpage resource.
14. A web page development system, comprising:
the code updating apparatus of claim 12;
the local server is used for enabling local webpage resources to be accessed by the remote server, the local server has a hot update function, the webpage resources comprise hot update execution files, and the hot update execution files are used for establishing hot update connection and executing hot update processing; the webpage resources are locally stored as a packaged file, and the packaged file further comprises a first part for hot update connection and a second part for realizing hot update logic;
the browser downloads the webpage resources of the webpage from the local server through the remote server according to an access link, the access link is inserted into a page template, and the page template is locally sent to the remote server; and
the remote server is used for responding to the opening of the webpage to access the local webpage resource through the local server, and sending a hot update message to the webpage resource of the browser so as to trigger the hot update execution file of the browser to execute hot update of the webpage.
15. A computer storage medium having stored thereon one or more computer instructions which, when executed, implement the method of any one of claims 1-6.
16. An electronic device, comprising:
one or more memories for storing one or more computer instructions;
one or more processors to invoke and execute the one or more computer instructions to implement the method of any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810419826.XA CN108628626B (en) | 2018-05-04 | 2018-05-04 | Development environment building method, code updating method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810419826.XA CN108628626B (en) | 2018-05-04 | 2018-05-04 | Development environment building method, code updating method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108628626A CN108628626A (en) | 2018-10-09 |
| CN108628626B true CN108628626B (en) | 2021-09-28 |
Family
ID=63695454
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810419826.XA Expired - Fee Related CN108628626B (en) | 2018-05-04 | 2018-05-04 | Development environment building method, code updating method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108628626B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582291A (en) * | 2018-10-16 | 2019-04-05 | 深圳壹账通智能科技有限公司 | Develop environment control method, device, computer equipment and storage medium |
| CN109857454B (en) * | 2018-12-15 | 2023-07-18 | 中国平安人寿保险股份有限公司 | Method, device, electronic equipment and storage medium for generating and caching installation package |
| CN110221853A (en) * | 2019-05-15 | 2019-09-10 | 无线生活（杭州）信息科技有限公司 | The method and Nginx server of page script are updated based on Nginx |
| CN112433745A (en) * | 2020-06-09 | 2021-03-02 | 上海哔哩哔哩科技有限公司 | Hot updating method and equipment |
| CN113342765A (en) * | 2021-06-22 | 2021-09-03 | 山东浪潮通软信息科技有限公司 | Service unit updating method, system and computer equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500199A (en) * | 2013-09-24 | 2014-01-08 | 北京大学 | Webpage rendering accelerating method and system based on pre-loaded Cloud template |
| CN106201642A (en) * | 2016-06-29 | 2016-12-07 | 微梦创科网络科技（中国）有限公司 | A kind of template automatization based on NODEJS compiling loading method and system |
| US9619444B2 (en) * | 2013-03-15 | 2017-04-11 | International Business Machines Corporation | System and method for web content presentation management |
| CN106933569A (en) * | 2017-02-13 | 2017-07-07 | 腾讯科技（深圳）有限公司 | A kind of webpage method for refreshing and device |
-
2018
- 2018-05-04 CN CN201810419826.XA patent/CN108628626B/en not_active Expired - Fee Related
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9619444B2 (en) * | 2013-03-15 | 2017-04-11 | International Business Machines Corporation | System and method for web content presentation management |
| CN103500199A (en) * | 2013-09-24 | 2014-01-08 | 北京大学 | Webpage rendering accelerating method and system based on pre-loaded Cloud template |
| CN106201642A (en) * | 2016-06-29 | 2016-12-07 | 微梦创科网络科技（中国）有限公司 | A kind of template automatization based on NODEJS compiling loading method and system |
| CN106933569A (en) * | 2017-02-13 | 2017-07-07 | 腾讯科技（深圳）有限公司 | A kind of webpage method for refreshing and device |
Non-Patent Citations (2)
| Title |
|---|
| FIS+Webpack在后端模板场景下的混合开发模式探索;clancyz;《https://zhuanlan.zhihu.com/p/28210436》;20170731;第1-10页 * |
| fis-postprocessor-smarty-hmr;clancyz;《https://github.com/clancyz/fis-postprocessor-smarty-hmr》;20171128;第1-3页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108628626A (en) | 2018-10-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108628626B (en) | Development environment building method, code updating method and device | |
| CN111158818B (en) | Page rendering method and device | |
| CN109800173B (en) | Program debugging method, device and storage medium | |
| CN104821954B (en) | A kind of cross-platform remote procedure calling (PRC) method | |
| CN112329945A (en) | Model deployment and reasoning method and device | |
| CN113010827B (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN111026439B (en) | Application program compatibility method, device, equipment and computer storage medium | |
| CN111026634A (en) | Interface automation test system, method, device and storage medium | |
| CN111651169B (en) | Block chain intelligent contract operation method and system based on web container | |
| CN108804100B (en) | Method and device for creating interface element, storage medium and mobile terminal | |
| CN113641582A (en) | Mixed-mode mobile application debugging method and system | |
| CN110083366B (en) | Application running environment generation method and device, computing equipment and storage medium | |
| CN116301951B (en) | Micro-service application installation upgrading method and device based on kubernetes | |
| CN111079048A (en) | Page loading method and device | |
| CN107239265B (en) | Binding method and device of Java function and C function | |
| CN111880786A (en) | Multi-application sharing method, system, device, electronic equipment and storage medium | |
| CN113157274B (en) | Software development method and device based on micro front end, electronic equipment and storage medium | |
| CN110209973A (en) | A kind of web game loading method and device | |
| CN115291933A (en) | Method, device and equipment for constructing small program data packet and storage medium | |
| CN113626330A (en) | Mixed-mode mobile application debugging method and system | |
| CN113641580A (en) | Mixed-mode mobile application debugging method and system | |
| CN116009831B (en) | Mobile application program development method, device and equipment | |
| CN114721655A (en) | Method for remotely deploying MATLAB function | |
| CN113703893B (en) | Page rendering method, device, terminal and storage medium | |
| US20230385038A1 (en) | Sharing components among applications method for web application development |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100085 Beijing, Haidian District on the road to the information on the ground floor of the 1 to the 3 floor of the 2 floor, room 11, 202 Applicant after: Beijing Xingxuan Technology Co.,Ltd. Address before: 100085 Beijing, Haidian District on the road to the information on the ground floor of the 1 to the 3 floor of the 2 floor, room 11, 202 Applicant before: Beijing Xiaodu Information Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20210928 |