CN115639984A - 一种前端线上编译引擎的实现方法及系统 - Google Patents

Abstract

本发明提供了一种前端线上编译引擎的实现方法及系统，其属于技术领域，包括预先编写在线前端编译服务；基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；通过调用所述编译器的打包方法，生成编译结果；将编译结果输入到指定目录下，实现前端项目的线上升级。

Description

一种前端线上编译引擎的实现方法及系统

技术领域

本发明属于计算机系统编程技术领域，尤其涉及一种前端线上编译引擎的实现方法及系统。

背景技术

本部分的陈述仅仅是提供了与本发明相关的背景技术信息，不必然构成在先技术。

发明人发现，目前前端vue项目在部署到服务器之后，想要添加新的功能页面，需要在线下开发完页面之后手动编译前端项目，将编译产物(html+js+css等文件)上传到前端服务的相应目录下，才能访问到相应的页面，即上线新功能需要先进行线下开发和打包，再线上部署的开发流程，导致开发及部署效率低下的问题。

发明内容

本发明为了解决上述问题，提供了一种前端线上编译引擎的实现方法及系统，所述方案通过接口调用的方式，可以实现发布的页面在线编译和输出，可以在线上预览到页面生成的效果；同时，所述方案设计的前端编译引擎的异常处理机制可以保证不同页面的发布之间不会相互影响，也不会影响其他开发页面和业务页面的正常显示。

根据本发明实施例的第一个方面，提供了一种前端线上编译引擎的实现方法，包括：

预先编写在线前端编译服务；

基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

通过调用所述编译器的打包方法，生成编译结果；

将编译结果输入到指定目录下，实现前端项目的线上升级。

进一步的，所述编译器每次编译发布均需重新进行初始化，使编译器中的入口仅包含当前页面入口。

进一步的，所述前端项目的vue框架采用多页面框架，用于避免线上发布的页面对项目部署的其他非线上发布的页面产生影响。

进一步的，所述预先编写在线前端编译服务，具体为：使用express搭建node服务，用于提供接口的调用服务；使用webpack抽象的线上编译器创建接口，用于实现通过接口调用进行编译器对象的初始化；使用webpack抽象的线上编译器调用与调用情况查询接口，用于实现通过接口调用进行线上编译服务的调用和返回调用结果。

进一步的，所述添加其他预设webpack插件生成最终配置，具体为：使用html-webpack-plugin组织产物中html文件的构建及路径生成；使用singleEntryPlugin组织编译文件的处理和输出配置；使用vue-loader、babel-loader及thread-loader处理项目中vue文件的编译和产物生成；使用css-loader及sass-loader处理项目中css以及scss文件的编译和产物生成；使用copy-webpack-plugin处理项目中公共依赖的产物生成；使用dll-plugin优化编译相关的使用性能。

进一步的，所述编译结果包括待编译前端项目的html、js及css文件。

进一步的，所述在线前端编译服务的编写采用node开发环境。

根据本发明实施例的第二个方面，提供了一种前端线上编译引擎的实现系统，包括：

前端编译服务编写单元，其用于预先编写在线前端编译服务；

Webpack加载器和插件生成单元，其用于基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

配置单元，其用于利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

实例化单元，其用于通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

编译单元，其用于通过调用所述编译器的打包方法，生成编译结果；

部署单元，其用于将编译结果输入到指定目录下，实现前端项目的线上升级。

根据本发明实施例的第三个方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上运行的计算机程序，所述处理器执行所述程序时实现所述的一种前端线上编译引擎的实现方法。

根据本发明实施例的第四个方面，提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现所述的一种前端线上编译引擎的实现方法。

与现有技术相比，本发明的有益效果是：

本发明提供了一种前端线上编译引擎的实现方法及系统，所述方案使得低代码开发平台生成的页面在线上部署的情况下，通过接口调用的方式，可以实现发布的页面在线编译和输出，可以在线上预览到页面生成的效果；同时，所述方案设计的前端编译引擎的异常处理机制可以保证不同页面的发布之间不会相互影响，也不会影响其他开发页面和业务页面的正常显示。

本发明附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。

图1为本发明实施例中所述的当前前端项目升级方式示意图；

图2为本发明实施例中所述的利用前端线上编译引擎的前端项目升级方式示意图；

图3为本发明实施例中所述的一种前端线上编译引擎的实现方法流程图。

具体实施方式

下面结合附图与实施例对本发明做进一步说明。

应该指出，以下详细说明都是例示性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本发明的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

术语解释：

低代码开发平台(LCDP)：通过可视化编辑器，编写少量代码就能快速生成应用程序的开发平台。

线上环境：指开发完成的web应用使用生产环境部署工具(如nginx)进行部署的前台服务，且该前台服务正在运行中，能被用户访问使用，停服维护或重启部署的环境均不是此处所指的线上环境；

线下环境：主要指没有使用生产部署工具进行部署的前台服务，或服务没有在运行中，以及其他线上环境外的情况。

实施例一：

本实施例的目的是提供一种前端线上编译引擎的实现方法。

如图3所示，一种前端线上编译引擎的实现方法，包括：

预先编写在线前端编译服务；

基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

通过调用所述编译器的打包方法，生成编译结果；

将编译结果输入到指定目录下，实现前端项目的线上升级。

进一步的，所述编译器每次编译发布均需重新进行初始化，使编译器中的入口仅包含当前页面入口。

进一步的，所述前端项目的vue框架采用多页面框架，用于避免线上发布的页面对项目部署的其他非线上发布的页面产生影响。

进一步的，所述预先编写在线前端编译服务，具体为：使用express搭建node服务，用于提供接口的调用服务；使用webpack抽象的线上编译器创建接口，用于实现通过接口调用进行编译器对象的初始化；使用webpack抽象的线上编译器调用与调用情况查询接口，用于实现通过接口调用进行线上编译服务的调用和返回调用结果。

进一步的，所述添加其他预设webpack插件生成最终配置，具体为：使用html-webpack-plugin组织产物中html文件的构建及路径生成；使用singleEntryPlugin组织编译文件的处理和输出配置；使用vue-loader、babel-loader及thread-loader处理项目中vue文件的编译和产物生成；使用css-loader及sass-loader处理项目中css以及scss文件的编译和产物生成；使用copy-webpack-plugin处理项目中公共依赖的产物生成；使用dll-plugin优化编译相关的使用性能。

进一步的，所述编译结果包括待编译前端项目的html、js及css文件。

进一步的，所述在线前端编译服务的编写采用node开发环境。

具体的，为了便于理解，以下结合附图对本实施例所述方案进行详细说明：

本实施例所述方案的主要目的如下：

(1)线上部署的低代码开发平台通过前端编译引擎，可以在线编译预览生成的前端代码。

(2)前端编译引擎的异常处理需要满足，平台发布的页面相互隔离，某个页面的发布失败不会影响其他页面正常访问。

如图1所示，目前前端项目的升级方式为在线下进行模块的开发，在模块开发完成后进行编译和线上部署，完成这一系列工作后，开发完成的模块才可以在线上访问到。本发明基于上述问题提供了一种基于前端编译引擎的实现方法，其实现的效果如图2所示，其具体构思为在线上通过接口的调用实现页面的在线编译和输出，使得开发完成的模块可以直接在线上进行访问。

具体的，所述前端编译引擎的具体实现如下：由于目前前端vue项目的编译打包实现是打包工具webpack完成的，在webpack进行打包的过程中会先通过vue的配置文件vue.config.js配置入口entry，再通过配置一系列webpack编译必须的加载器loader和插件plugin，实例化出一个编译器compiler出来，通过调用编译器的打包方法，解析entry的依赖，生成语法树，再通过前面的加载器和插件将前端的代码转换成浏览器可以执行的es5语法，之后输出到产物目录dist下。前端编译引擎的实现如图2所示，通过node编写的在线前端编译服务，根据vue.config.js配置生成基础的webpack加载器和插件，再根据低代码开发平台生成的页面文件demo.vue和入口文件demo.js添加编译入口，最后再添加上其他必须的webpack插件生成最终配置，通过这个配置在线上实例化出compiler编译器对象，然后通过接口调用的方式，手动触发编译器的打包方法，同时通过配置将编译器的产物(html,js,css等文件)输出到指定的目录下。

前端编译引擎的异常处理：考虑到vue单页面的编译，如果一个页面编译失败，错误的编译结果会导致整个项目无法启动，因而前端编译引擎在每次编译时要保证先前页面的入口不会影响本次编译，即编译器每次发布都需要重新初始化，使得编译器中的入口只包含当前的入口entry。所述初始化主要指编译器的创建接口中的操作，具体包括：

(1)使用webpack抽象编译器的创建；

(2)使用webpack有关的插件进行新编译对象的相关配置，具体涉及插件参考上面的webpack最终插件配置说明。

同时，线上的前端vue框架需要调整为多页面框架，用来保证线上发布的页面不会影响到项目部署的其他非线上发布的页面。

实施例二：

本实施例的目的是提供一种前端线上编译引擎的实现系统。

一种前端线上编译引擎的实现系统，包括：

前端编译服务编写单元，其用于预先编写在线前端编译服务；

Webpack加载器和插件生成单元，其用于基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

配置单元，其用于利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

实例化单元，其用于通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

编译单元，其用于通过调用所述编译器的打包方法，生成编译结果；

部署单元，其用于将编译结果输入到指定目录下，实现前端项目的线上升级。

进一步的，本实施例所述系统与实施例一所述方法相对应，其技术细节在实施例一中已经进行了详细描述，故此处不再赘述。

在更多实施例中，还提供：

一种电子设备，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成实施例一中所述的方法。为了简洁，在此不再赘述。

应理解，本实施例中，处理器可以是中央处理单元CPU，处理器还可以是其他通用处理器、数字信号处理器DSP、专用集成电路ASIC，现成可编程门阵列FPGA或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据、存储器的一部分还可以包括非易失性随机存储器。例如，存储器还可以存储设备类型的信息。

一种计算机可读存储介质，用于存储计算机指令，所述计算机指令被处理器执行时，完成实施例一中所述的方法。

实施例一中的方法可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器、闪存、只读存储器、可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。为避免重复，这里不再详细描述。

本领域普通技术人员可以意识到，结合本实施例描述的各示例的单元即算法步骤，能够以电子硬件或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

上述实施例提供的一种前端线上编译引擎的实现方法及系统可以实现，具有广阔的应用前景。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种前端线上编译引擎的实现方法，其特征在于，包括：

预先编写在线前端编译服务；

基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

通过调用所述编译器的打包方法，生成编译结果；

将编译结果输入到指定目录下，实现前端项目的线上升级。

2.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述编译器每次编译发布均需重新进行初始化，使编译器中的入口仅包含当前页面入口。

3.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述前端项目的vue框架采用多页面框架，用于避免线上发布的页面对项目部署的其他非线上发布的页面产生影响。

4.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述预先编写在线前端编译服务，具体为：使用express搭建node服务，用于提供接口的调用服务；使用webpack抽象的线上编译器创建接口，用于实现通过接口调用进行编译器对象的初始化；使用webpack抽象的线上编译器调用与调用情况查询接口，用于实现通过接口调用进行线上编译服务的调用和返回调用结果。

5.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述添加其他预设webpack插件生成最终配置，具体为：使用html-webpack-plugin组织产物中html文件的构建及路径生成；使用singleEntryPlugin组织编译文件的处理和输出配置；使用vue-loader、babel-loader及thread-loader处理项目中vue文件的编译和产物生成；使用css-loader及sass-loader处理项目中css以及scss文件的编译和产物生成；使用copy-webpack-plugin处理项目中公共依赖的产物生成；使用dll-plugin优化编译相关的使用性能。

6.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述编译结果包括待编译前端项目的html、js及css文件。

7.如权利要求1所述的一种前端线上编译引擎的实现方法，其特征在于，所述在线前端编译服务的编写采用node开发环境。

8.一种前端线上编译引擎的实现系统，其特征在于，包括：

前端编译服务编写单元，其用于预先编写在线前端编译服务；

Webpack加载器和插件生成单元，其用于基于所述在线前端编译服务，根据vue.config.js配置生成基础webpack加载器和插件；

配置单元，其用于利用低代码开发平台生成的页面文件和入口文件添加编译入口，并添加其他预设webpack插件生成最终配置；

实例化单元，其用于通过上述配置在线上实例化compiler编译器对象，并提供所述编译器对象的对外调用接口，实现线上编译引擎的构建；

编译单元，其用于通过调用所述编译器的打包方法，生成编译结果；

部署单元，其用于将编译结果输入到指定目录下，实现前端项目的线上升级。

9.一种电子设备，包括存储器、处理器及存储在存储器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7任一项所述的一种前端线上编译引擎的实现方法。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7任一项所述的一种前端线上编译引擎的实现方法。

Images