Method, device and application of dynamic compilation of cross-platform components based on VUE

Abstract

The present invention provides a method, device and application for dynamically compiling cross-platform components based on VUE. The method realizes the dynamic compilation of Vue components into cross-platform reusable web components through the Vite plug-in. Based on the compilation of Esprima, three compilation functions are designed to compile the script code fragment, template code fragment and style tag fragment of the Vue component respectively. The method can realize dynamic hot update compilation processing, and achieve the effect of automatically generating cross-platform components with equivalent functions when writing components using Vue syntax, thereby greatly improving the development efficiency and component reuse rate of front-end development.

Description

Technical Field

[0001] The present application relates to the field of front-end development, and in particular to a method, device and application for dynamically compiling cross-platform components based on VUE. Background Art

[0002] Vue is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library focuses solely on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of driving complex single-page applications, making it one of the most mainstream front-end web development frameworks in China.

[0003] Although Vue can greatly improve the efficiency of developers as a web front-end development framework, it still faces some technical difficulties in solving the problem of cross-platform component reuse. Web components technology performs relatively well in solving the problem of cross-platform component reuse. Web components adds a series of features to HTML and DOM specifications, allowing developers to freely build reusable elements or components in web applications or documents. It consists of four parts: (1) Custom Elements: a series of APIs that define new HTML elements; (2) Shadow DOM: a combination of DOM and style encapsulation; (3) HTML Imports: defines how to import other HTML documents into a document; (4) HTML Templates: DOM templates within HTML, <template>Declare within an element.

[0004] However, components written in different front-end frameworks are inevitably subject to the syntax restrictions of their respective frameworks. This means that when reusing components across frameworks or platforms, a framework-specific component library must be developed for each framework. This results in a large amount of common component code being unable to be reused, increasing development complexity. Furthermore, developers currently need to familiarize themselves with the Web Components syntax beforehand if they want to write Web Components within a Vue project, increasing the learning curve. Furthermore, how to organize Web Components to coexist with Vue components and when to register Web Components within the project are complex issues.

[0005] Therefore, when building a cross-platform public component library or applying it in a monorepo architecture with multiple technology stacks, how to quickly compile Vue components and web components is a major problem that needs to be solved. Summary of the Invention

[0006] The embodiments of the present application provide a method, device, and application for dynamically compiling cross-platform components based on VUE, which can conveniently and automatically dynamically compile Vue components into web components. This achieves the effect of automatically generating cross-platform components with equivalent functions when components are written using Vue syntax, greatly improving the development efficiency and component reuse rate of front-end development.

[0007] In a first aspect, an embodiment of the present application provides a method for dynamically compiling cross-platform components based on VUE, comprising the following steps:

[0008] Get the Vue component to be converted;

[0009] Use regular expressions to intercept the script code snippet, template code snippet and style tag snippet of the Vue component;

[0010] Call the compilerScript function to perform AST compilation on the JavaScript code in the script code snippet to obtain an AST abstract syntax tree. Recursively read the props array from the AST abstract syntax tree and write the props array into the specified props function. Based on the set correspondence, write the JavaScript code of the corresponding lifecycle function in the script code snippet into the corresponding lifecycle function of the web component. Insert the methods function in the read script code snippet into the wrapper class of the web component to obtain an SFCScriptBlock object.

[0011] Call the compilerTemplate function to convert the template code snippet into DOM code, and replace the Vue binding event code with the onClick code to obtain the SFCTemplateComplierResults object;

[0012] Call the complierStyle function to set the string in the style tag fragment to the style.textContent code and get the SFCStyleComplierResults object;

[0013] Write the SFCScriptBlock object, SFCTemplateComplierResults object, and SFCStyleComplierResults object into the web components' JavaScript template to obtain the compiled web components.

[0014] In a second aspect, an embodiment of the present application provides a device for dynamically compiling cross-platform components based on VUE, including:

[0015] Vue component acquisition unit, used to obtain the Vue component to be converted;

[0016] A code interception unit, used to intercept the script code fragment, template code fragment and style tag fragment of the Vue component using regular expressions;

[0017] The Script compilation unit is configured to call the compilerScript function to perform AST compilation on the JavaScript code in the script code snippet to obtain an AST abstract syntax tree, recursively read the props array from the AST abstract syntax tree, and write the props array into the specified props function; write the JavaScript code of the corresponding lifecycle function in the script code snippet into the corresponding lifecycle function of the web component based on the set correspondence; and insert the methods function in the read script code snippet into the wrapper class of the web component to obtain an SFCScriptBlock object;

[0018] Template compilation unit calls the compilerTemplate function to convert the template code snippet into DOM code, and replaces the Vue binding event code with the onClick code to obtain the SFCTemplateComplierResults object;

[0019] The Style compilation unit is used to call the complierStyle function to set the string in the style tag fragment to the style.textContent code and obtain the SFCStyleComplierResults object;

[0020] The web components component building unit is used to write the SFCScriptBlock object, SFCTemplateComplierResults object, and SFCStyleComplierResults object into the JavaScript template of webcomponents to obtain the compiled web components.

[0021] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute any of the methods for dynamically compiling cross-platform components based on VUE.

[0022] In a fourth aspect, an embodiment of the present application provides a readable storage medium, in which a computer program is stored. The computer program includes a program code for controlling a process to execute a process, and the process includes the method of dynamically compiling cross-platform components based on VUE.

[0023] The main contributions and innovations of the present invention are as follows:

[0024] The embodiment of this application provides a solution for horizontally expanding Vue components into cross-platform web components. It is configured through the Vite plug-in and synchronized with non-invasive hot update. It provides a simple and customizable configuration method for component reuse in micro front-ends or monorepo and other similar architectures with different technology stacks and multiple application types. This solution customizes three compilation functions to respectively compile the Vue components. <script>、<template>、<style>三个标签内代码内容进行编译加工，自动得到web components组件内容，仅需编写一份vue组件即可利用本申请技术方案实现动态编译为跨平台组件提供其他各不同技术栈子应用内开发使用，为已发布的vue组件库提供了一种重构为跨平台组件的可能性，减少为适应不同平台架构而改造原组件库导致的冗余重复代码与工作量，极大较少了往跨平台组件方向迁移所需的成本。

[0025] 本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。附图说明

[0026] 此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

[0027] 图1是运行本申请的基于VUE的动态编译跨平台组件的方法的应用系统框架图；

[0028] 图2是根据本申请实施例的基于VUE的动态编译跨平台组件的方法的流程图；

[0029] 图3是根据本申请实施例的基于VUE的动态编译跨平台组件的装置的结构框图；

[0030] 图4是根据本申请实施例的电子装置的硬件结构示意图。具体实施方式

[0031] 这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

[0032] 需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

[0033] 实施例一

[0034] 如图2所示，本方案提供了一种基于VUE的动态编译跨平台组件的方法，包括以下步骤：

[0035] 获取待转换的vue组件；

[0036] 利用正则表达式截取所述vue组件的script代码片段、template代码片段以及style标签片段；

[0037] 调用compilerScript函数对script代码片段中的js代码进行AST编译得到AST抽象语法树，对所述AST抽象语法树进行递归读取props数组，并将所述props数组写入指定props函数中；依据设定的对应关系将script代码片段中对应的生命周期函数的js代码写入web components组件对应的生命周期函数内；将读取的script代码片段中的methods的函数插入在web components组件的包装类内，得到SFCScriptBlock对象；

[0038] 调用compilerTemplate函数将template代码片段转换为dom代码，并将vue绑定事件代码替换为onClick代码，得到SFCTemplateComplierResults对象；

[0039] 调用complierStyle函数将style标签片段内中字符串设置为style.textContent代码，得到SFCStyleComplierResults对象；

[0040] 将SFCScriptBlock对象、SFCTemplateComplierResults对象以及SFCStyleComplierResults对象写入web components的js模板内，得到编译后的webcomponents组件。

[0041] 本方案针对vue组件设计了一套二次封装处理的编译方法，以将vue组件动态编译成web components组件，以实现基于vue的跨平台组件的扩展。

[0042] 值得一提的是，由于本方案是基于vue框架的vue组件进行动态编译，考虑到vite内部使用浏览器原生ES Module(浏览器端处理模块的ECMAScript标准)作为模块解析的实现方案，相比于其他需要额外动态分析模块间依赖关系的工具来说效率会高很多，且vite内部设计了完整的插件系统，可高定制化整个项目构建流程的执行钩子函数，有利于在项目执行过程中在任意阶段去完成对代码进行的任何转换处理操作，故本方案选择vite作为工程化打包工具。换言之，本方案提供的基于VUE的动态编译跨平台组件的方法编辑为代码形式并基于项目构建工具vite插件配置形式实现，实现了简洁高效低耦合的代码运行切入。

[0043] 在一些实施例中，本方案可实现对vue组件的动态编译，即可主动获取新增或者变更的vue组件并调用本方法对其进行动态编译。

[0044] 对应的，在"获取待转换的vue组件”步骤中，在主函数中配置vue组件的引入参数，触发所述主函数并基于所述引入参数以获取待转换的vue组件。以此方式实现了开发人员仅需如同往常地正常编译vue组件，该方法即可实现对vue组件的自动编译的效果。

[0045] 如前所述，本方法以vite插件的形式实现，而vite插件开发需要遵循vite官方提供的插件API规范，该插件API规范规定了vite插件的主函数必须返回一个对象，在该对象内必须指定插件名称即name属性，然后声明所需要的vite钩子函数在其内部，以此实现对项目内任意文件内容的自定义转换操作。也就是说，在输入项目启动脚本命令后，伴随着vite启动插件钩子函数也依次在各自的触发时机中执行。

[0046] 换言之，在"获取待转换的vue组件”步骤中，在vite配置文件内引入主函数，并在主函数内配置vue组件的引入参数，触发所述主函数并基于所述引入参数以获取待转换的vue组件，其中引入参数包括但不限于位置参数以及组件名称参数。

[0047] 也就是说，本方案通过在vite配置文件中引入并注册主函数并通过设置引入参数传入。位置参数为string类型的transformDir参数，transformDir参数内配置待转换的vue组件的组件目录路径，若未配置的话就设置为默认路径，可以是项目根目录下 / src / components；组件名称参数包括array类型的includes参数，其中includes参数内设置组件目录路径下待转换的vue组件的组件名称，includes参数为数组类型且支持glob匹配规则，若未配置则默认为该组件目录路径下的所有vue组件。当然，组件名称参数还可包括array类型的excludes参数，所述excludes参数配置需要过滤的不需要转换的vue组件，也支持多个glob字符串数组，且优选级大于includes参数。

[0048] 进一步的，在"触发所述主函数并基于所述引入参数以获取待转换的vue组件”步骤中，主函数在执行时对所述引入参数进行解析，并在主函数内的transform钩子函数中进行过滤得到需要转换的目标文件。

[0049] 若本方法以vite插件的形式实现，则主函数为符合vite插件API规范的函数。具体的，将主函数引入并配置进vite配置文件的plugins数组中，再根据引入参数获取待转换的vue组件。当项目启动触发vite插件的主函数后即可解析到配置扫描所有需转换组件文件。

[0050] 在一些实施例中，本方案不仅仅可以实现自动编译vue组件，还可以实现热更新。热更新的目的是为了用户在开发时更改vue组件，可以动态启动编译执行，达到同步更新web components组件的效果。本方案引入了chokidar库，将配置的待转换的vue组件传递给chokidar库，该chokidar库递归组件目录路径下的vue组件，调用fs.watchFile(windows)或fsevents.watchFile(mac OS)，将每个文件变化维护为一个队列并进行部分检测触发算法优化，以实现对组件目录路径下的待转换的vue组件文件的变动高效检测。

[0051] 具体的，本方案将vite插件的配置文件的引入参数传递给chokidar库，利用chokidar库实现对组件目录路径下待转换的vue组件的检测和监控，并在触发变动的回调函数内获取到变动的vue组件文件，并再次对所述待转换的vue组件进行调用编译转换达到动态同步编译生成的效果，该方案解决了开发环境便利性，无需更改代码后频繁重启项目。

[0052] 本方案的核心在于对待转换的vue组件进行二次编译以生成对应的webcomponents组件，本方案对待转换的vue组件进行ast语法转换后，利用相关的转换函数对其进行二次处理封装，组织为web components通用组件代码语法，使用node在同目录下依次生成为web components组件语法的js文件，进而完成web components组件的注册。

[0053] 具体的，在"利用正则表达式截取所述vue组件的script代码片段、template代码片段以及style标签片段”步骤中，使用nodejs核心模块fs通过组件目录路径读取到对应的vue组件的vue文件内容，并使用正则表达式分别匹配截取出<script>标签内代码作为script代码片段、<template>标签内代码作为template代码片段、<style>标签内代码作为style标签片段。

[0054] 另外，在本方案是利用编译工具esprima对vue组件进行编译，编译工具Esprimas的核心作用是可以对指定javascript代码串进行词法、语法分析。最常用的方法就是tokenize()与parseScript()，这两个方法都接收一个字符串类型代码内容作为参数然后解析这段代码的词法结构(数组类型)与语法结构(树状类型)作为返回结果，返回结果以AST编辑树的形式存在。

[0055] 由于vue组件的文件结构是由script、template、style三个标签代码块组成，而esprima仅能针对于script内javascript代码进行解析编译，故本方案在其基础上对vue组件实现二次封装处理编译。

[0056] 本方案针对script代码片段设计了解析函数compilerScript函数，针对template代码片段设计了解析函数compilerTemplate函数，针对style标签片段设计了解析函数complierStyle函数。

[0057] compilerScript函数的目的是vue组件中script内js代码转换为web components组件内具有同等行为作用的js代码。具体的，通过esprima.parseScript对script代码片段中的js代码进行AST编译处理得到AST抽象语法树，对所述AST抽象语法树进行递归读取props数组，并生成static get observedAttributes()函数作为指定props函数，将props数组写入指定props函数内以实现注册。

[0058] 在"依据设定的对应关系将script代码片段中对应的生命周期函数的js代码写入web components组件对应的生命周期函数内”步骤中，设定的对应关系为:vue组件中的created与mounted对应于web components组件的connectedCallback；vue组件中的updated对应于web components组件的adoptedCallback、vue组件中的destroyed对应于web components组件的disconnectedCallback。换言之，本方案依据对应关系将script代码片段中对应的生命周期函数转换为web components组件对应的生命周期函数。

[0059] 在"将读取的script代码片段中的methods的函数，得到web components组件对象”步骤中，将读取到的script代码片段中methods内各个函数插入生成在web components组件的包装类内。

[0060] compilerScript函数通过上述步骤实现了vue组件的script编译转换，compilerScript函数处理完script代码片段得到SFCScriptBlock对象，SFCScriptBlock对象的属性值有type、setup、scriptAst等，SFCScriptBlock对象中的scriptAst即为script代码片段解析后标准的AST数据，包括各生命周期函数、methods等。

[0061] compilerTemplate函数的目的是实现了将vue组件内template代码片段内的dom代码的处理。值得一提的，由于web components同样支持template设置组件的dom元素与slot插槽，故compilerTemplate函数作为dom模板编译函数，将vue组件的template代码片段处理成dom代码，仅需将常用的vue绑定事件语法@click处理成onClick即可，并将最终生成的代码设置为web components组件的shadow节点内。

[0062] compilerTemplate函数通过上述步骤实现了vue组件的template编译转换。compilerTemplate函数处理完template代码片段得到SFCTemplateComplierResults对象，SFCTemplateComplierResults对象内的属性值包括code,ast等，其中code为可执行代码，ast为对应template结构的ast树结构数据。

[0063] complierStyle函数的目的是将样式相关字符串设置为web components内的style.textContext属性值，得到SFCStyleComplierResults对象。

[0064] complierStyle函数通过上述步骤实现了vue组件的style编译转换。complierStyle函数处理style代码片段得到SFCStyleComplierResults对象，SFCStyleComplierResults对象内含有的属性值包括code和map等，其中code为字符串类型的style样式代码。

[0065] 另外，complierScript函数、compilerTemplate函数以及complierStyle函数含有共同必要参数，共同必要参数包括source、filename、id，其中source为源文件地址，对应的是组件目录路径，filename为文件名，对应的是vue组件的文件名，id为标识符，对应的不同vue组件。由于本方案的执行环境为vite插件回调函数，故以上的共同必要参数直接从插件回调函数返回的参数获取即可。

[0066] 本方案在获取SFCScriptBlock对象、SFCTemplateComplierResults对象、SFCStyleComplierResults对象后，使用nodejs的fs模块分别将SFCScriptBlock对象、SFCTemplateComplierResults对象、SFCStyleComplierResults对象的属性值写入进新的web components组件的文件内。

[0067] 具体的，在"将SFCScriptBlock对象、SFCTemplateComplierResults对象以及SFCStyleComplierResults对象写入web components的js模板内，得到编译后的webcomponents组件”步骤中，利用nodejs的fs模块将SFCScriptBlock对象、SFCTemplateComplierResults对象以及SFCStyleComplierResults对象写入webcomponents的js模板内。

[0068] 具体的，先根据web components组件的基础语法生成基础的js模板，将vue组件的组件名作为类名，并初始化所述web components组件的构造函数和节点插入容器shadow，随后将SFCTemplateComplierResults对象中的ast插入shadow容器，再将SFCScriptBlock对象内的scriptAst中的生命周期函数进行注册与遍历执行，最后将SFCStyleComplierResults对象中的code设置为style.textContext且插入shadow容器，这样生成了对应vue组件功能的web components文件的编译。

[0069] 本方案在得到web components组件后，可将web components组件注册至对应的平台框架中。也就是说，在一些实施例中，本方案包括步骤：将web components组件注册至对应的平台框架内。

[0070] 具体的，本方案将生成的web components组件的组件列表记录为注册名单数组，通过vite插件钩子函数transformIndexHtml将script引入代码插入在html完成webcomponents组件注册。vite插件钩子函数transformIndexHtml可以很方便的在html中插入或修改代码，利用这一特性本方案可在平台框架原来的html代码中插入script标签并且设置引入刚才生成好的web components组件完成了web components组件的注册，进而实现组件的跨平台复用。

[0071] 如图1所示，本方案提供了实现该方法的微前端应用的总架构图，该微前端应用系统包括入口主应用mian(vue技术栈)、子应用micro1(vue技术栈)、子应用micro2(react技术栈)、子应用micro3(angular技术栈)、子应用micro4(原生html),项目开发构建工具均使用vite管理。本方案通过在主应用main中将本申请主函数引入并配置进vite配置文件中的plugins数组中，再根据项目配置项目内所需转换的vue组件目录以及vue组件文件名。当项目启动触发vite插件函数后即可解析到配置扫描所有需转换组件文件，再通过一系列编译、转换、生成流程，最终生成符合跨平台要求的web components组件并且完成统一注册。完成后其他子应用micro1、micro2、micro3、micro4即可直接使用到编译后的webcomponents组件，无需为不同框架语法各自写一套组件代码。而且，当主应用main中进入扫描转换内vue组件任何开发时代码变更，均可以动态同步编译刷新反应在各不同架构子应用上。此架构图仅为此申请适用的其中一个场景实例，包括但不仅限于此微前端架构。

[0072] 以按钮组件MyButton.vue为示例，若需要将该组件编译为跨平台组件，则本方案的开发环境如下：

[0073] 按照vite官方命令yarn create vite@latest my-vue-app搭建一个vite+vue技术栈的前端基础项目，在vite配置文件vite.config.js中引入本申请的主函数，将引入参数配置进plugins数组选项中，并在主函数中按照个人需求按需配置transformDir、includes、excludes参数，启动本方案的项目后在App.vue的components选项中注册并在template中编写<my-button>标签页面上即展示了编写好的vue组件MyButton，同时项目的public目录发现多出一个webComponents文件夹且包含一个MyButton.js，其中MyButton.js文件会看到是MyButton.vue对应的web components组件，vue组件文件里面的script、template、style三部分代码已被转换生成为web components组件的各属性进行组合，而且在index.html内多了一行script引入标签，引入地址为 / public / webComponents / MyButton.js，使用f12打开浏览器调试工具点击到my-button节点则可发现shadow-root标识，因为这时的组件已经是web components组件了。而且此时改变MyButton.vue任意代码，页面上的web components组件也会动态热更新显现出来。还可以继续在components目录下编写其他不同的vue组件，保存代码后public / webComponents同样会同步增量生成webcomponents组件文件且在index.html内通过script引入。

[0074] 实施例二

[0075] 基于相同的构思，参考图3，本申请还提出了一种基于VUE的动态编译跨平台组件的装置，包括以下：

[0076] Vue组件获取单元，用于获取待转换的vue组件；

[0077] 代码截取单元，用于利用正则表达式截取所述vue组件的script代码片段、template代码片段以及style标签片段；

[0078] Script编译单元，用于调用compilerScript函数对script代码片段中的js代码进行AST编译得到AST抽象语法树，对所述AST抽象语法树进行递归读取props数组，并将所述props数组写入指定props函数中；依据设定的对应关系将script代码片段中对应的生命周期函数的js代码写入web components组件对应的生命周期函数内；将读取的script代码片段中的methods的函数插入在web components组件的包装类内，得到SFCScriptBlock对象；

[0079] Template编译单元，调用compilerTemplate函数将template代码片段转换为dom代码，并将vue绑定事件代码替换为onClick代码，得到SFCTemplateComplierResults对象；

[0080] Style编译单元，用于调用complierStyle函数将style标签片段内中字符串设置为style.textContent代码，得到SFCStyleComplierResults对象；

[0081] web components组件构建单元，用于将SFCScriptBlock对象、SFCTemplateComplierResults对象以及SFCStyleComplierResults对象写入webcomponents的js模板内，得到编译后的web components组件。

[0082] 关于该实施例二中同于实施例一的内容在此不进行重复说明。

[0083] 实施例三

[0084] 本实施例还提供了一种电子装置，参考图4，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项基于VUE的动态编译跨平台组件的方法实施例中的步骤。

[0085] 具体地，上述处理器402可以包括中央处理器(CPU)，或者特定集成电路(ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

[0086] 其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(HardDiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(Non-Volatile)存储器。在特定实施例中，存储器404包括只读存储器(Read-OnlyMemory，简称为ROM)和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemory，简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM)、电可改写ROM(ElectricallyAlterableRead-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(StaticRandom-AccessMemory，简称为SRAM)或动态随机存取存储器(DynamicRandomAccessMemory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器404(FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM)、同步动态随机存取内存(SynchronousDynamicRandom-AccessMemory，简称SDRAM)等。

[0087] 存储器404可以用来存储或者缓存需要处理和 / 或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

[0088] 处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种基于VUE的动态编译跨平台组件的方法。

[0089] 可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

[0090] 传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

[0091] 输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是vue组件等，输出的信息可以是web components组件等。

[0092] 可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：

[0093] 获取待转换的vue组件；

[0094] 利用正则表达式截取所述vue组件的script代码片段、template代码片段以及style标签片段；

[0095] 调用compilerScript函数对script代码片段中的js代码进行AST编译得到AST抽象语法树，对所述AST抽象语法树进行递归读取props数组，并将所述props数组写入指定props函数中；依据设定的对应关系将script代码片段中对应的生命周期函数的js代码写入web components组件对应的生命周期函数内；将读取的script代码片段中的methods的函数插入在web components组件的包装类内，得到SFCScriptBlock对象；

[0096] 调用compilerTemplate函数将template代码片段转换为dom代码，并将vue绑定事件代码替换为onClick代码，得到SFCTemplateComplierResults对象；

[0097] 调用complierStyle函数将style标签片段内中字符串设置为style.textContent代码，得到SFCStyleComplierResults对象；

[0098] 将SFCScriptBlock对象、SFCTemplateComplierResults对象以及SFCStyleComplierResults对象写入web components的js模板内，得到编译后的webcomponents组件。

[0099] 需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

[0100] 通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

[0101] 本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和 / 或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。

[0102] 本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

[0103] 以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。< / script> < / template>

Claims

1. A method for dynamically compiling cross-platform components based on VUE, characterized in that: The following steps are involved: Get the Vue component to be converted; Use regular expressions to intercept the script code snippet, template code snippet and style tag snippet of the Vue component; Call the compilerScript function to perform AST compilation on the JavaScript code in the script code snippet to obtain an AST abstract syntax tree. Recursively read the props array from the AST abstract syntax tree and write the props array into the specified props function. Based on the set correspondence, write the JavaScript code of the corresponding lifecycle function in the script code snippet into the corresponding lifecycle function of the webcomponents component. Insert the methods function in the read script code snippet into the wrapper class of the web components component to obtain an SFCScriptBlock object. Call the compilerTemplate function to convert the template code snippet into DOM code, and replace the Vue binding event code with the onClick code to obtain the SFCTemplateComplierResults object; Call the complierStyle function to set the string in the style tag fragment to the style.textContent code and get the SFCStyleComplierResults object; Write the SFCScriptBlock object, SFCTemplateComplierResults object, and SFCStyleComplierResults object into the web components' JavaScript template to obtain the compiled web components.

2. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: In the "obtain the Vue component to be converted" step, a main function is introduced into the Vite configuration file, and the import parameters of the Vue component are configured in the main function. The main function is triggered and the Vue component to be converted is obtained based on the import parameters, where the import parameters include but are not limited to position parameters and component name parameters.

3. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: Import the chokidar library and pass the import parameters of the vite plug-in configuration file to the chokidar library. The chokidar library detects and monitors the Vue components to be converted, and obtains the changed Vue component files in the callback function that triggers the change.

4. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: The JS code in the script code snippet is compiled into an AST abstract syntax tree through esprima.parseScript, the props array is recursively read from the AST abstract syntax tree, and a static getobservedAttributes() function is generated as the specified props function. The props array is written into the specified props function to achieve registration.

5. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: The set correspondence is: created and mounted in the Vue component correspond to the connectedCallback of the web components component; updated in the Vue component corresponds to the adoptedCallback of the web components component; destroyed in the Vue component corresponds to the disconnectedCallback of the web components component.

6. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: The complierScript function, compilerTemplate function, and complierStyle function contain common required parameters, which are obtained from the parameters returned by the plug-in callback function.

7. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: Generate a basic JS template based on the basic syntax of the webcomponents component, use the component name of the Vue component as the class name, initialize the constructor of the web components component and insert the node into the container shadow, insert the ast in the SFCTemplateComplierResults object into the shadow container, register and traverse the lifecycle functions in the scriptAst in the SFCScriptBlock object, set the code in the SFCStyleComplierResults object to style.textContext and insert it into the shadow container.

8. The method for dynamically compiling cross-platform components based on VUE according to claim 1, characterized in that: Register the webcomponents component to the corresponding platform framework.

9. A device for dynamically compiling cross-platform components based on VUE, characterized in that: include: Vue component acquisition unit, used to obtain the Vue component to be converted; A code interception unit, used to intercept the script code fragment, template code fragment and style tag fragment of the Vue component using regular expressions; The Script compilation unit is configured to call the compilerScript function to perform AST compilation on the JavaScript code in the script code snippet to obtain an AST abstract syntax tree, recursively read the props array from the AST abstract syntax tree, and write the props array into the specified props function; write the JavaScript code of the corresponding lifecycle function in the script code snippet into the corresponding lifecycle function of the web component based on the set correspondence; and insert the methods function in the read script code snippet into the wrapper class of the web component to obtain an SFCScriptBlock object; Template compilation unit calls the compilerTemplate function to convert the template code snippet into DOM code, and replaces the Vue binding event code with the onClick code to obtain the SFCTemplateComplierResults object; The Style compilation unit is used to call the complierStyle function to set the string in the style tag fragment to the style.textContent code and obtain the SFCStyleComplierResults object; The web components component building unit is used to write the SFCScriptBlock object, SFCTemplateComplierResults object, and SFCStyleComplierResults object into the JavaScript template of webcomponents to obtain the compiled web components.

10. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to run the computer program to execute the method for dynamically compiling cross-platform components based on VUE according to any one of claims 1 to 8.

11. A readable storage medium, characterized in that: The readable storage medium stores a computer program, which includes a program code for controlling a process to execute a process, wherein the process includes the method for dynamically compiling a cross-platform component based on VUE according to any one of claims 1 to 8.

Images