CN113360141B - 一种vue文件转换方法、装置、电子设备及存储介质 - Google Patents

一种vue文件转换方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN113360141B
CN113360141B CN202110622935.3A CN202110622935A CN113360141B CN 113360141 B CN113360141 B CN 113360141B CN 202110622935 A CN202110622935 A CN 202110622935A CN 113360141 B CN113360141 B CN 113360141B
Authority
CN
China
Prior art keywords
code
node
export
transcoding
script
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.)
Active
Application number
CN202110622935.3A
Other languages
English (en)
Other versions
CN113360141A (zh
Inventor
宋啊礼
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Zhenshi Information Technology Co Ltd
Original Assignee
Beijing Jingdong Zhenshi Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Zhenshi Information Technology Co Ltd filed Critical Beijing Jingdong Zhenshi Information Technology Co Ltd
Priority to CN202110622935.3A priority Critical patent/CN113360141B/zh
Publication of CN113360141A publication Critical patent/CN113360141A/zh
Application granted granted Critical
Publication of CN113360141B publication Critical patent/CN113360141B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • 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
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • 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
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/51—Source to source

Abstract

本发明提供了一种vue文件转换方法、装置、电子设备及存储介质，该方法包括：加载vue文件，解析确定vue文件中的script代码片段；确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。本发明能够降低人工成本。

Description

一种vue文件转换方法、装置、电子设备及存储介质
技术领域
本发明涉及信息处理技术领域，特别涉及一种vue文件转换方法、装置、电子设备及存储介质。
背景技术
对于前端开发来说，typescript(即ts)语言在团队开发和质量把控上有很大优势，可以帮助我们设置变量类型、定义接口、语法提示以及通过静态类型检查及早告知错误所在。
vue是一套用于构建用户界面的渐进式前端框架，在较早的开发项目中主要采用javascript(即js)进行编写，因此存在将vue文件中的脚本从js语言转换ts语言的需求。目前主要采用手工重写的方式对vue文件中的脚本进行从js语言到ts语言的转换，主要是将componnets、props、data、methods等属性对象一一进行修改，这需要大量重复性劳动，人工成本较高。
发明内容
有鉴于此，本发明的目的在于提供了一种vue文件转换方法、装置、电子设备及存储介质，能够降低人工成本。
为了达到上述目的，本发明提供了如下技术方案：
一种vue文件转换方法，包括：
加载vue文件，解析确定vue文件中的script代码片段；
确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
一种vue文件转换装置，包括：
提取单元，用于加载vue文件，解析确定vue文件中的script代码片段；
分解单元，用于确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
转换单元，用于分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
替换单元，用于将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
一种电子设备，包括：至少一个处理器，以及与所述至少一个处理器通过总线相连的存储器；所述存储器存储有可被所述至少一个处理器执行的一个或多个计算机程序；所述至少一个处理器执行所述一个或多个计算机程序时实现上述vue文件转换方法中的步骤。
一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个计算机程序，所述一个或多个计算机程序被处理器执行时实现上述vue文件转换方法中的步骤。
由上面的技术方案可知，本发明中，通过将vue文件中的script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换。应用本发明提供的方案，在需要对一个或多个vue进行js到ts的代码转换时，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例一vue文件转换方法流程图；
图2是本发明实施例二vue文件转换方法流程图；
图3是本发明实施例三vue文件转换方法流程图；
图4是本发明实施例四vue文件转换方法流程图；
图5是本发明实施例五vue文件转换方法流程图；
图6是本发明实施例六vue文件转换方法流程图；
图7是本发明实施例vue文件转换装置的结构示意图；
图8是本发明实施例电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
参见图1，图1是本发明实施例一vue文件转换方法流程图，如图1所示，该方法主要包括以下步骤：
步骤101、加载vue文件，解析确定vue文件中的script代码片段；
步骤102、确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
步骤103、分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
步骤104、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
从图1所示方法可以看出，本实施例中，通过将vue文件中的script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
参见图2，图2是本发明实施例二vue文件转换方法流程图，如图2所示，该方法主要包括以下步骤：
步骤201、加载vue文件，解析确定vue文件中的script代码片段；
在vue文件中，文件内容通常由template代码片段、script代码片段和style代码片段；本发明实施例中，可以使用htmlparse插件对vue文件进行解析，从而获得template代码片段、script代码片段、和style代码片段。
步骤2021、判断所述script代码片段中是否包括export default代码块，如果是，则执行步骤2022，否则，执行步骤2024；
在实际应用中，vue.js使用export default导出各种对象，如props、component、data、methods等对象，因此，当所述script代码片段中包括export default代码块时，说明所述script代码片段是采用js实现的。
步骤2022、确定需要对所述script代码片段进行js到ts的代码转换；
步骤2023、将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分，转至步骤203；
步骤2024、确定不需要对所述script代码片段进行js到ts的代码转换，结束本流程。
以上步骤2021至步骤2022、以及步骤2024是“判断需要对所述script代码片段进行js到ts的代码转换”的具体细化。
步骤203、分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
步骤204、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
从图2所示方法可以看出，本实施例中，解析确定vue文件中的script代码片段后，通过判断script代码片段中是否包含export default代码块来确定师傅需要对所述script代码片段进行js到ts的代码转换，如果需要，则将所述script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
参见图3，图3是本发明实施例三vue文件转换方法流程图，如图3所示，该方法主要包括以下步骤：
步骤301、加载vue文件，解析确定vue文件中的script代码片段；
在vue文件中，文件内容通常由template代码片段、script代码片段和style代码片段；本发明实施例中，可以使用htmlparse插件对vue文件进行解析，从而获得template代码片段、script代码片段、和style代码片段。
步骤3021、判断所述script代码片段中是否包括export default代码块，如果是，则执行步骤3022，否则，执行步骤3024；
在实际应用中，vue.js使用export default导出各种对象，如props、component、data、methods等对象，因此，当所述script代码片段中包括export default代码块时，说明所述script代码片段是采用js实现的。
步骤3022、确定需要对所述script代码片段进行js到ts的代码转换；
步骤3023a、对所述script代码片段进行解析得到所述script代码片段对应的AST树；
步骤3023b、分析确定所述AST树的根节点的子节点中的import节点、exportdefault节点和其它节点；
在实际应用中，vue文件中的script代码片段一般包括导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
以下是script代码片段的一个示例：
将上述script代码片段解析成AST树之后，AST树的根节点的子节点包括两个类型为import的节点(以下简称import节点)和一个类型为export default的节点(以下简称export default节点)。
步骤3023c、将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以export default节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分，转至步骤303。
本实施例中，将上述script代码片段解析成AST树之后，以import节点为根节点的AST子树有2个，对应的代码块分别为import axios from‘axios’和import comDataCardfrom‘@/components/common/DataCard/index.vue’，因此，上述script代码片段中的导入代码部分为：
import axios from‘axios’
import comDataCard from‘@/components/common/DataCard/index.vue’
本实施例中，将上述script代码片段解析成AST树之后，以export default节点为根节点的AST子树有1个，对应的代码块即export default{}代码块，因此，上述script代码片段中的导出代码部分为：
由于将上述script代码片段解析成AST树之后，AST树的根节点的子节点不包括除import节点和export default节点之外的节点，因此，上述script代码片段中不包括其它代码部分。
以上步骤3023a至3023c是图2所示步骤2023的具体细化。
步骤3024、确定不需要对所述script代码片段进行js到ts的代码转换，结束本流程。
步骤303、分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
步骤304、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
本发明实施例中，将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段时，还可以将经代码转换后script脚本片段添加所使用的脚本语言ts，使得所述script脚本片段变为如下格式：<script lang＝ts>经js到ts的代码转换后的脚本代码</script>。
从图3所示方法可以看出，本实施例中，解析确定vue文件中的script代码片段后，通过判断script代码片段中是否包含export default代码块来确定师傅需要对所述script代码片段进行js到ts的代码转换，如果需要，则通过将所述script代码片段解析成ASM树，进而依据ASM树将所述script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
参见图4，图4是本发明实施例四vue文件转换方法流程图，如图4所示，该方法主要包括以下步骤：
步骤401、加载vue文件，解析确定vue文件中的script代码片段；
在vue文件中，文件内容通常由template代码片段、script代码片段和style代码片段；本发明实施例中，可以使用htmlparse插件对vue文件进行解析，从而获得template代码片段、script代码片段、和style代码片段。
步骤4021、判断所述script代码片段中是否包括export default代码块，如果是，则执行步骤4022，否则，执行步骤4024；
在实际应用中，vue.js使用export default导出各种对象，如props、component、data、methods等对象，因此，当所述script代码片段中包括export default代码块时，说明所述script代码片段是采用js实现的。
步骤4022、确定需要对所述script代码片段进行js到ts的代码转换；
步骤4023a、对所述script代码片段进行解析得到所述script代码片段对应的AST树；
步骤4023b、分析确定所述AST树的根节点的子节点中的import节点、exportdefault节点和其它节点；
步骤4023c、将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以export default节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分，转至步骤403。
以上步骤4023a至4023c是图2所示步骤2023的具体细化。
步骤4024、确定不需要对所述script代码片段进行js到ts的代码转换，结束本流程。
步骤4031、在所述导入代码部分之后添加用于导入vue装饰器的代码；
本实施例中，可以预先设定导入代码转换规则，所述导入代码转换规则是：添加用于导入vue装饰器的代码；
可以按照预先设定的导入代码转换规则对导入代码部分进行js到ts的代码转换，即：在所述导入代码部分之后添加用于导入vue装饰器的代码。
例如按照预先设定的导出代码转换规则对导入代码本分进行js到ts的代码转换后，转换后的代码如下：
import axios from‘axios’
import comDataCard from‘@/components/common/DataCard/index.vue’
import{component，vue，watch，prop}from‘vue-property-decorator’
上述转换后的代码的最后一行即为添加的用于导入vue装饰器的代码。
步骤4032、按照预先设定的导出代码转换规则对导出代码部分进行js到ts的代码转换；
步骤4033、按照预先设定的其它代码转换规则对其它代码部分进行js到ts的代码转换；
步骤404、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
从图4所示方法可以看出，本实施例中，解析确定vue文件中的script代码片段后，通过判断script代码片段中是否包含export default代码块来确定师傅需要对所述script代码片段进行js到ts的代码转换，如果需要，则通过将所述script代码片段解析成ASM树，进而依据ASM树将所述script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换，其中，对于导入代码部分，通过在导入代码部分之后添加用于导入vue装饰器的代码实现代码转换。本实施例中，由于在执行vue文件的js到ts的代码转换时，不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
参见图5，图5是本发明实施例五vue文件转换方法流程图，如图5所示，该方法主要包括以下步骤：
步骤501、加载vue文件，解析确定vue文件中的script代码片段；
在vue文件中，文件内容通常由template代码片段、script代码片段和style代码片段；本发明实施例中，可以使用htmlparse插件对vue文件进行解析，从而获得template代码片段、script代码片段、和style代码片段。
步骤5021、判断所述script代码片段中是否包括export default代码块，如果是，则执行步骤5022，否则，执行步骤5024；
在实际应用中，vue.js使用export default导出各种对象，如props、component、data、methods等对象，因此，当所述script代码片段中包括export default代码块时，说明所述script代码片段是采用js实现的。
步骤5022、确定需要对所述script代码片段进行js到ts的代码转换；
步骤5023a、对所述script代码片段进行解析得到所述script代码片段对应的AST树；
步骤5023b、分析确定所述AST树的根节点的子节点中的import节点、exportdefault节点和其它节点；
步骤5023c、将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以export default节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分，转至步骤5031。
以上步骤5023a至5023c是图2所示步骤4023的具体细化。
步骤5024、确定不需要对所述script代码片段进行js到ts的代码转换，结束本流程。
步骤5031、按照预先设定的导入代码转换规则对导入代码部分进行js到ts的代码转换；
本发明实施例中，图4所示步骤4032中，按照预先设定的导出代码转换规则对导出代码部分进行js到ts的代码转换，可以采用以下步骤5032a至步骤5032c实现。其中，预先设定的导出代码转换规则包括：对export default的转换规则、以及通过export default导出的每一对象对应的js到ts的代码转换规则；其中，通过export default导出的对象包括props、data、watch、methods、computed、model、lifeCycle等。
步骤5032a、对于所述export default节点的子节点中的component节点，确定以所述component节点为根节点的AST子树对应的component代码块，对该component代码块进行@component添加，得到如下格式的代码块：@component({component代码块})，将进行@component添加后的代码块添加到所述导出代码部分之前；
例如，对于上述script代码片段的例子，可以将其中的component代码块转换为如下代码块：
步骤5032b、将export default节点对应的代码export default修改为如下格式的代码：export default class*extends Vue，其中*为预设组件名称；
本发明实施例中，对于export default的转换规则为：将“export default”修改为如下格式的代码“export default class*extends Vue”，其中*为预设组件名称。
例如，对于上述script代码片段的例子，可以将其中的export default节点对应的代码(即“export default”)修改为“export default class MyComponent extendsVue”，其中的MyComponent为预设组件名称。
步骤5032c、对于所述export default节点的子节点中的每一非component节点，确定该非component节点所属对象，根据该对象对应的js到ts的代码转换规则对以该子节点为根节点的AST子树对应的代码块进行js到ts的代码转换。
在实际应用中，通过export default导出的每一对象对应的js到ts的代码转换规则每一对象又包括一个或多个属性，每一属性也对应有js到ts的代码转换规则。因此，本发明实施例中，通过export default导出的每一对象对应的js到ts的代码转换规则包括：该对象的每一属性对应的js到ts的代码转换规则。
例如，对于export default中的props对象，可以对props对象的属性添加对应的vue装饰器并放入到class中。如：假设export default中有如下js代码:props：{msg:{type:String,default:‘’}}，则可以确定msg:{type:String,default:‘’}是props对象的一个属性，可以通过对该属性添加对应的vue装饰器并放入到class中，从而将上述js代码转变为以下符合ts语言的代码：@Prop({type:String,default:‘’})msg！:string。
又如，对于export default中的data对象，可以对data对象的属性添加上对应的数据类型并放入class中，如：假设export default中有如下js代码:data对象中存在一个属性formData{field2：null}，可以通过对data对象的属性添加上对应的数据类型并放入class中，从而将上述js代码修改为符合ts语言的代码：private formData＝{field2：null}。
又如，对于export default中的method对象，可以按照预先设定的其它代码转换规则对method对象的属性代码进行js到ts的代码转换，后续在图6所示实施例中进行具体说明。
另外，对于export default导出的其它对象，如watch、computed、model、lifeCycle等，均可以按照现有的js到ts的代码转换规则进行代码转换，不再一一举例。此外，如果export default导出的对象中还包括vuex语法糖对象，则对这种对象，可以按照vuex-class提供的装饰器进行相应的js到ts的代码转换，不再赘述。
步骤5033、按照预先设定的其它代码转换规则对其它代码部分进行js到ts的代码转换；
步骤504、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
从图5所示方法可以看出，本实施例中，解析确定vue文件中的script代码片段后，通过判断script代码片段中是否包含export default代码块来确定师傅需要对所述script代码片段进行js到ts的代码转换，如果需要，则通过将所述script代码片段解析成ASM树，进而依据ASM树将所述script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换。其中，对于导出代码部分，根据export default中的每一对象对应的js到ts的代码转换规则对导出代码部分进行代码转换。本实施例中，由于在执行vue文件的js到ts的代码转换时，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
参见图6，图6是本发明实施例六vue文件转换方法流程图，如图6所示，该方法主要包括以下步骤：
步骤601、加载vue文件，解析确定vue文件中的script代码片段；
在vue文件中，文件内容通常由template代码片段、script代码片段和style代码片段；本发明实施例中，可以使用htmlparse插件对vue文件进行解析，从而获得template代码片段、script代码片段、和style代码片段。
步骤6021、判断所述script代码片段中是否包括export default代码块，如果是，则执行步骤6022，否则，执行步骤6024；
在实际应用中，vue.js使用export default导出各种对象，如props、component、data、methods等对象，因此，当所述script代码片段中包括export default代码块时，说明所述script代码片段是采用js实现的。
步骤6022、确定需要对所述script代码片段进行js到ts的代码转换；
步骤6023a、对所述script代码片段进行解析得到所述script代码片段对应的AST树；
步骤6023b、分析确定所述AST树的根节点的子节点中的import节点、exportdefault节点和其它节点；
步骤6023c、将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以export default节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分，转至步骤6031。
以上步骤4023a至4023c是图2所示步骤2023的具体细化。
步骤6024、确定不需要对所述script代码片段进行js到ts的代码转换，结束本流程。
步骤6031、按照预先设定的导入代码转换规则对导入代码部分进行js到ts的代码转换；
步骤6032、按照预先设定的导出代码转换规则对导出代码部分进行js到ts的代码转换；
本发明实施例中，图4所示步骤4032中，按照预先设定的其它代码转换规则对其它代码部分进行js到ts的代码转换，可以采用以下步骤6033a至步骤6033e实现。其中，预先设定的其它代码转换规则包括：其它代码转换规则包括：变量赋值语句对应的代码转换规则和函数定义语句对应的代码转换规则。
步骤6033a、对于所述AST树中对应于所述其它代码部分的AST子树上的每一节点，执行以下操作步骤6033b至步骤6033e：
在实际应用中，所述其它代码部分，是用js语言编写的常规的js代码。
步骤6033b、判断该节点对应的代码是否是变量设置语句或函数定义语句，如果该节点对应的代码是变量设置语句，则执行步骤6033c，如果该节点对应的代码是函数定义语句，则执行步骤6033d，否则执行步骤6033e；
步骤6033c、根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
本发明实施例中，所述变量赋值语句对应的代码转换规则为：按照变量被赋值的类型对变量添加对应的类型字段；所述类型包括String、Number、Boolean、Array类型；
所述根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，具体包括：
确定该节点对应的代码中等号右侧的变量被赋值的类型；
如果确定的类型是String类型，则将String类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Number类型，则将Number类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Boolean类型，则将Boolean类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Array类型，则将Array<any>类型拼接到该节点对应的代码中等号右侧的变量之后；
否则，将any类型拼接到该节点对应的代码中等号右侧的变量之后。
步骤6033d、根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
本发明实施例中，所述函数定义语句对应的代码转换规则为：对函数的非函数参数添加any类型；
所述根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，具体包括：
确定函数定义语句中包括的函数参数；
对于每一函数参数，如果该函数参数是一个函数，则保持该函数参数不变；如果该函数参数不是函数，则在该函数参数之后拼接any类型。
步骤6033e、保持该节点对应的代码不变。
步骤604、将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
从图6所示方法可以看出，本实施例中，解析确定vue文件中的script代码片段后，通过判断script代码片段中是否包含export default代码块来确定师傅需要对所述script代码片段进行js到ts的代码转换，如果需要，则通过将所述script代码片段解析成ASM树，进而依据ASM树将所述script代码片段分解为导入代码部分、导出代码部分和位于导入代码部分和导出代码部分之间的其它代码部分，并使用这三个代码部分各自对应的代码转换规则对这三个代码部分分别进行js到ts的代码转换，从而完成vue文件从js到ts的代码转换。其中，对于其它代码部分，通过其它代码部分的每个语句进行分析，对变量赋值语句的变量和函数定义语句的参数添加相应的参数类型来实现js到ts的代码转换。本实施例中，由于在执行vue文件的js到ts的代码转换时，由于不需要人工手动去执行大量重复性劳动，因此可以有效降低人工成本。
以上对本发明实施例vue文件转换方法进行了详细说明，本发明实施例还提供了一种vue文件转换装置，以下结合图7进行详细说明。
参见图7，图7是本发明实施例vue文件转换装置的结构示意图，如图7所示，该装置包括：
提取单元701，用于加载vue文件，解析确定vue文件中的script代码片段；
分解单元702，用于确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
转换单元703，用于分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
替换单元704，用于将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段。
图7所示装置中，
所述分解单元702，确定是否需要对所述script代码片段进行js到ts的代码转换，包括：
如果所述script代码片段中包括export default代码块，则确定需要对所述script代码片段进行js到ts的代码转换，否则，确定不需要对所述script代码片段进行js到ts的代码转换。
图7所示装置中，
所述分解单元702，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分，包括：
对所述script代码片段进行解析得到所述script代码片段对应的AST树；
分析确定所述AST树的根节点的子节点中的import节点、export default节点和其它节点；
将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以export default节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分。
图7所示装置中，
所述导入代码转换规则是：添加用于导入vue装饰器的代码；
所述转换单元703，按照预先设定的导入代码转换规则对导入代码部分进行js到ts的代码转换，包括：
在所述导入代码部分的末尾添加用于导入vue装饰器的代码。
图7所示装置中，
所述导出代码转换规则包括：对export default的转换规则、以及通过exportdefault导出的每一对象对应的js到ts的代码转换规则；其中，通过export default导出的对象包括props、data、watch、methods、computed、model、lifeCycle；
所述转换单元703，按照预先设定的导出代码转换规则对导出代码部分进行js到ts的代码转换，包括：
对于所述export default节点的子节点中的component节点，确定以所述component节点为根节点的AST子树对应的component代码块，对该component代码块进行@component添加，得到如下格式的代码块：@component({component代码块})，将进行@component添加后的代码块添加到所述导出代码部分之前；
将export default节点对应的代码export default修改为如下格式的代码：export default class*extends Vue，其中*为预设组件名称；
对于所述export default节点的子节点中的每一非component节点，确定该非component节点所属对象，根据该对象对应的js到ts的代码转换规则对以该子节点为根节点的AST子树对应的代码块进行js到ts的代码转换。
图7所示装置中，
所述其它代码转换规则包括：变量赋值语句对应的代码转换规则和函数定义语句对应的代码转换规则；
所述转换单元703，按照预先设定的其它代码转换规则对其它代码部分进行js到ts的代码转换，包括：
对于所述AST树中对应于所述其它代码部分的AST子树上的每一节点，执行以下操作：
判断该节点对应的代码是否是变量设置语句；
如果该节点对应的代码是变量设置语句，则根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
如果该节点对应的代码是函数定义语句，则根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
否则，保持该节点对应的代码不变。
图7所示装置中，
所述变量赋值语句对应的代码转换规则为：按照变量被赋值的类型对变量添加对应的类型字段；所述类型包括String、Number、Boolean、Array类型；
所述转换单元703，根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，包括：
确定该节点对应的代码中等号右侧的变量被赋值的类型；
如果确定的类型是String类型，则将String类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Number类型，则将Number类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Boolean类型，则将Boolean类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Array类型，则将Array<any>类型拼接到该节点对应的代码中等号右侧的变量之后；
否则，将any类型拼接到该节点对应的代码中等号右侧的变量之后。
图7所示装置中，
所述函数定义语句对应的代码转换规则为：对函数的非函数参数添加any类型；
所述转换单元703，根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，包括：
确定函数定义语句中包括的函数参数；
对于每一函数参数，如果该函数参数是一个函数，则保持该函数参数不变；如果该函数参数不是函数，则在该函数参数之后拼接any类型。
本发明实施例还提供了一种电子设备，如图8所示，该电子设备包括：至少一个处理器801，以及与所述至少一个处理器801通过总线相连的存储器802；所述存储器802存储有可被所述至少一个处理器801执行的一个或多个计算机程序；所述至少一个处理器801执行所述一个或多个计算机程序时实现图1-6中任一流程图所示方法中的步骤。
本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个计算机程序，所述一个或多个计算机程序被处理器执行时实现图1-6中任一流程图所示方法中的步骤。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (8)

1.一种vue文件转换方法，其特征在于，该方法包括：
加载vue文件，解析确定vue文件中的script代码片段；
确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段；
其中，所述导入代码转换规则是：添加用于导入vue装饰器的代码；
按照预先设定的导入代码转换规则对导入代码部分进行js到ts的代码转换，包括：
在所述导入代码部分的末尾添加用于导入vue装饰器的代码；
所述导出代码转换规则包括：对export default的转换规则、以及通过exportdefault导出的每一对象对应的js到ts的代码转换规则；其中，通过export default导出的对象包括props、data、watch、methods、computed、model、lifeCycle；
按照预先设定的导出代码转换规则对导出代码部分进行js到ts的代码转换，包括：
对于所述export default节点的子节点中的component节点，确定以所述component节点为根节点的AST子树对应的component代码块，对该component代码块进行@component添加，得到如下格式的代码块：@component({component代码块})，将进行@component添加后的代码块添加到所述导出代码部分之前；
将export default节点对应的代码export default修改为如下格式的代码：exportdefault class*extends Vue，其中*为预设组件名称；
对于所述export default节点的子节点中的每一非component节点，确定该非component节点所属对象，根据该对象对应的js到ts的代码转换规则对以该子节点为根节点的AST子树对应的代码块进行js到ts的代码转换；
所述其它代码转换规则包括：变量赋值语句对应的代码转换规则和函数定义语句对应的代码转换规则；
按照预先设定的其它代码转换规则对其它代码部分进行js到ts的代码转换，包括：
对于AST树中对应于所述其它代码部分的AST子树上的每一节点，执行以下操作：
判断该节点对应的代码是否是变量设置语句；
如果该节点对应的代码是变量设置语句，则根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
如果该节点对应的代码是函数定义语句，则根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；
否则，保持该节点对应的代码不变；
其中，所述AST树为对所述script代码片段进行解析得到的。
2.根据权利要求1所述的方法，其特征在于，
确定是否需要对所述script代码片段进行js到ts的代码转换，包括：
如果所述script代码片段中包括export default代码块，则确定需要对所述script代码片段进行js到ts的代码转换，否则，确定不需要对所述script代码片段进行js到ts的代码转换。
3.根据权利要求2所述的方法，其特征在于，
将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分，包括：
对所述script代码片段进行解析得到所述script代码片段对应的AST树；
分析确定所述AST树的根节点的子节点中的import节点、export default节点和其它节点；
将以import节点为根节点的AST子树对应的代码块确定为导入代码部分，将以exportdefault节点为根节点的AST子树对应的代码块确定为导出代码部分，将以其它节点为根节点的AST子树对应的代码块确定为其它代码部分。
4.根据权利要求1所述的方法，其特征在于，
变量赋值语句对应的代码转换规则为：按照变量被赋值的类型对变量添加对应的类型字段；所述类型包括String、Number、Boolean、Array类型；
根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，包括：
确定该节点对应的代码中等号右侧的变量被赋值的类型；
如果确定的类型是String类型，则将String类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Number类型，则将Number类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Boolean类型，则将Boolean类型拼接到该节点对应的代码中等号右侧的变量之后；
如果确定的类型是Array类型，则将Array<any>类型拼接到该节点对应的代码中等号右侧的变量之后；
否则，将any类型拼接到该节点对应的代码中等号右侧的变量之后。
5.根据权利要求1所述的方法，其特征在于，
函数定义语句对应的代码转换规则为：对函数的非函数参数添加any类型；
根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换，包括：
确定函数定义语句中包括的函数参数；
对于每一函数参数，如果该函数参数是一个函数，则保持该函数参数不变；如果该函数参数不是函数，则在该函数参数之后拼接any类型。
6.一种vue文件转换装置，其特征在于，该装置包括：
提取单元，用于加载vue文件，解析确定vue文件中的script代码片段；
分解单元，用于确定需要对所述script代码片段进行js到ts的代码转换时，将所述script代码片段分解为导入代码部分、导出代码部分、以及位于导入代码部分和导出代码部分之间的其它代码部分；
转换单元，用于分别按照预先设定的导入代码转换规则、导出代码转换规则、和其它代码转换规则对导入代码部分、导出代码部分、和其它代码部分进行js到ts的代码转换；
替换单元，用于将所述script代码片段替换为由经代码转换后的导入代码部分、其它代码部分、导出代码部分组合而成的script代码片段；
其中，所述转换单元，具体用于所述导入代码转换规则是：添加用于导入vue装饰器的代码时；在所述导入代码部分的末尾添加用于导入vue装饰器的代码；所述导出代码转换规则包括：对export default的转换规则、以及通过export default导出的每一对象对应的js到ts的代码转换规则时；其中，通过export default导出的对象包括props、data、watch、methods、computed、model、lifeCycle；
对于所述export default节点的子节点中的component节点，确定以所述component节点为根节点的AST子树对应的component代码块，对该component代码块进行@component添加，得到如下格式的代码块：@component({component代码块})，将进行@component添加后的代码块添加到所述导出代码部分之前；将export default节点对应的代码exportdefault修改为如下格式的代码：export default class*extends Vue，其中*为预设组件名称；对于所述export default节点的子节点中的每一非component节点，确定该非component节点所属对象，根据该对象对应的js到ts的代码转换规则对以该子节点为根节点的AST子树对应的代码块进行js到ts的代码转换；所述其它代码转换规则包括：变量赋值语句对应的代码转换规则和函数定义语句对应的代码转换规则时，对于AST树中对应于所述其它代码部分的AST子树上的每一节点，执行以下操作：判断该节点对应的代码是否是变量设置语句；如果该节点对应的代码是变量设置语句，则根据变量赋值语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；如果该节点对应的代码是函数定义语句，则根据函数定义语句对应的代码转换规则对该节点对应的代码进行js到ts的代码转换；否则，保持该节点对应的代码不变；其中，所述AST树为对所述script代码片段进行解析得到的。
7.一种电子设备，包括：至少一个处理器，以及与所述至少一个处理器通过总线相连的存储器；所述存储器存储有可被所述至少一个处理器执行的一个或多个计算机程序；其特征在于，所述至少一个处理器执行所述一个或多个计算机程序时实现权利要求1-5中任一权项所述的方法中的步骤。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储一个或多个计算机程序，所述一个或多个计算机程序被处理器执行时实现权利要求1-5中任一权项所述的方法中的步骤。
CN202110622935.3A 2021-06-04 2021-06-04 一种vue文件转换方法、装置、电子设备及存储介质 Active CN113360141B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110622935.3A CN113360141B (zh) 2021-06-04 2021-06-04 一种vue文件转换方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110622935.3A CN113360141B (zh) 2021-06-04 2021-06-04 一种vue文件转换方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN113360141A CN113360141A (zh) 2021-09-07
CN113360141B true CN113360141B (zh) 2024-04-16

Family

ID=77532052

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110622935.3A Active CN113360141B (zh) 2021-06-04 2021-06-04 一种vue文件转换方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN113360141B (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007000015A1 (en) * 2005-06-27 2007-01-04 Quipoz Pty Limited Code transformation
WO2019072110A1 (zh) * 2017-10-11 2019-04-18 阿里巴巴集团控股有限公司 应用程序的生成方法、装置、系统、设备和介质
CN110362312A (zh) * 2019-06-27 2019-10-22 绿漫科技有限公司 一种适用于多种框架的语法转换编译系统及方法
CN111078228A (zh) * 2019-12-20 2020-04-28 深圳乐信软件技术有限公司 网页到小程序的转换方法、装置、服务器及存储介质
CN112631604A (zh) * 2020-12-30 2021-04-09 武汉达梦数据技术有限公司 一种Velk前端框架实现方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007000015A1 (en) * 2005-06-27 2007-01-04 Quipoz Pty Limited Code transformation
WO2019072110A1 (zh) * 2017-10-11 2019-04-18 阿里巴巴集团控股有限公司 应用程序的生成方法、装置、系统、设备和介质
CN110362312A (zh) * 2019-06-27 2019-10-22 绿漫科技有限公司 一种适用于多种框架的语法转换编译系统及方法
CN111078228A (zh) * 2019-12-20 2020-04-28 深圳乐信软件技术有限公司 网页到小程序的转换方法、装置、服务器及存储介质
CN112631604A (zh) * 2020-12-30 2021-04-09 武汉达梦数据技术有限公司 一种Velk前端框架实现方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
动态分析JavaScript的代码推荐方法;刘爽;;数码世界(第02期);全文 *
基于Vue.js的Web前端应用研究;朱二华;;科技与创新(第20期);全文 *

Also Published As

Publication number Publication date
CN113360141A (zh) 2021-09-07

Similar Documents

Publication Publication Date Title
US8091071B2 (en) Method and system for template-based code generation
US9146712B2 (en) Extensible code auto-fix framework based on XML query languages
US8286132B2 (en) Comparing and merging structured documents syntactically and semantically
US10534830B2 (en) Dynamically updating a running page
US8028276B1 (en) Method and system for generating a test file
US7506324B2 (en) Enhanced compiled representation of transformation formats
US11775414B2 (en) Automated bug fixing using deep learning
US8954940B2 (en) Integrating preprocessor behavior into parsing
US20210365258A1 (en) Method and system for updating legacy software
US8468449B1 (en) Generating CSS shorthand properties
CN114138244A (zh) 模型类文件自动生成方法、装置、存储介质及电子设备
CN111124380A (zh) 一种前端代码生成方法
CN111078217A (zh) 脑图生成方法、装置和计算机可读存储介质
CN113360141B (zh) 一种vue文件转换方法、装置、电子设备及存储介质
CN115904480B (zh) 代码重构方法、装置、电子设备及存储介质
CN112199626A (zh) 基于dsl布局引擎的动态表单生成方法
JP2008198103A (ja) 状態遷移図作成装置および状態遷移図作成方法
Anderson et al. Supporting analysis of SQL queries in PHP AiR
CN114528218A (zh) 测试程序的生成方法、装置、存储介质以及电子设备
US11055069B2 (en) Tree structure data editing device, tree structure data editing method, and program
CN113050935A (zh) 生成混入对象的方法、装置、计算设备及计算机可读存储介质
CN113448852A (zh) 一种测试案例的获取方法、装置、电子设备及存储介质
KR101952328B1 (ko) 프로그래밍 언어간 변환 방법
WO2020048416A1 (zh) 领域专用语言dsl的图形化处理方法和设备
CN117874393B (zh) 通过xml文件构建sca模型工程的方法和系统

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
GR01 Patent grant
GR01 Patent grant