一种前端代码文件检测方法、装置及电子设备和存储介质与流程

1.本技术涉及计算机技术领域，更具体地说，涉及一种前端代码文件检测方法、装置及一种电子设备和一种计算机可读存储介质。


背景技术：

2.vue.js作为流行的前端开发框架，正越来越多的应用到实际项目开发中。在一些项目中，要同时向多个语言环境的用户提供服务，这就要求产品必须实现国际化语言切换。vue-i18n是vue.js官方提供的国际化插件，提供了简洁的api和强大的功能，通过简单的配置即可结合vue.js实现产品的多语言支持。
3.要在产品开发中实现国际化多语言切换功能，通常的做法，必须按照vue-i18n的规范，配置好多语言文件，并在业务代码中调用api(application programming interface，应用程序接口)实现自动渲染。如果开发过程中遗漏了多语言配置，或者忘记调用api实现翻译，研发人员只能通过在ui(user interface design，界面设计)界面上测试的方式检查多语言配置是否完善正确。例如，研发人员可能只配置了中文语言包，而忘记配置英文语言包，导致系统产品切换为英文时，ui界面上存在空白字段甚至直接出现错误，甚至出现一些不容易发现的系统bug，进而严重影响用户体验和产品稳定。在相关技术中，多语言配置的检测只能通过ui界面测试的方式，需要耗费研发人员大量的精力，严重影响开发效率。
4.因此，如何实现前端代码中多语言配置的自动检测是本领域技术人员需要解决的技术问题。


技术实现要素：

5.本技术的目的在于提供一种前端代码文件检测方法、装置及一种电子设备和一种计算机可读存储介质，实现了前端代码中多语言配置的自动检测。
6.为实现上述目的，本技术提供了一种前端代码文件检测方法，包括：
7.获取每个语言种类对应的配置文件；
8.确定需要检测的目标前端代码所在的文件夹，在所述文件夹中确定所有后缀为.vue和.js的代码文件；
9.对每个所述代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码；
10.在每个语言种类对应的配置文件中查询所述命名空间和所述key定义，若未接收到所有语言种类对应的配置文件的返回值，则将所述命名空间确定为目标命名空间，将所述key定义确定为目标key定义；
11.输出所述目标命名空间和所述目标key定义和对应的代码所在文件的行数、文件路径和未收到返回值的语言种类。
12.其中，所述获取每个语言种类对应的配置文件，包括：
13.读取前端代码仓库中的多语言配置文件，将所述多语言配置文件的文件内容按照语言种类分别缓存为多个配置文件。
14.其中，在所述文件夹中确定所有后缀为.vue和.js的代码文件，包括：
15.在所述文件夹中确定除所述多语言配置文件之外所有后缀为.vue和.js的代码文件。
16.其中，在所述文件夹中确定所有后缀为.vue和.js的代码文件之后，还包括：
17.将所述代码文件缓存到临时目录中；
18.相应的，所述对每个所述代码文件进行逐行扫描，包括：
19.对所述临时目录中的代码文件进行逐行扫描。
20.其中，还包括：
21.输出包含中文的代码所在文件的行数、中文字段和文件路径。
22.其中，所述对每个所述代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码，包括：
23.对每个所述代码文件进行逐行扫描，将包含多语言标准应用程序编程接口的代码确定为包含多语言配置的命名空间和key定义的代码；
24.通过正则表达式获取所述多语言标准应用程序编程接口调用的第一个参数，以确定命名空间和key定义。
25.其中，所述多语言标准应用程序编程接口包括$t()、$tc()、$te()、$d()、$n()、.$t()、.$tc()、.$te()、.$d()和.$n()。
26.为实现上述目的，本技术提供了一种前端代码文件检测装置，包括：
27.获取模块，用于获取每个语言种类对应的配置文件；
28.确定模块，用于确定需要检测的目标前端代码所在的文件夹，在所述文件夹中确定所有后缀为.vue和.js的代码文件；
29.扫描模块，用于对每个所述代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码；
30.查询模块，用于在每个语言种类对应的配置文件中查询所述命名空间和所述key定义，若未接收到所有语言种类对应的配置文件的返回值，则将所述命名空间确定为目标命名空间，将所述key定义确定为目标key定义；
31.输出模块，用于输出所述目标命名空间和所述目标key定义和对应的代码所在文件的行数、文件路径和未收到返回值的语言种类。
32.为实现上述目的，本技术提供了一种电子设备，包括：
33.存储器，用于存储计算机程序；
34.处理器，用于执行所述计算机程序时实现如上述前端代码文件检测方法的步骤。
35.为实现上述目的，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述前端代码文件检测方法的步骤。
36.通过以上方案可知，本技术提供的一种前端代码文件检测方法，包括：获取每个语言种类对应的配置文件；确定需要检测的目标前端代码所在的文件夹，在所述文件夹中确定所有后缀为.vue和.js的代码文件；对每个所述代码文件进行逐行扫描，确定包含多语言
配置的命名空间和key定义的代码；在每个语言种类对应的配置文件中查询所述命名空间和所述key定义，若未接收到所有语言种类对应的配置文件的返回值，则将所述命名空间确定为目标命名空间，将所述key定义确定为目标key定义；输出所述目标命名空间和所述目标key定义和对应的代码所在文件的行数、文件路径和未收到返回值的语言种类。
37.本技术提供的前端代码文件检测方法，在开发阶段通过在每个语言种类对应的配置文件中查询目标前端代码的命名空间和key定义，实现了目标前端代码文件多语言配置的自动检测。本技术区别于通过ui页面人工测试的方法，在产品开发阶段即可实现开发人员自主测试，帮助研发人员提前发现问题，有利于提高开发效率与产品质量。本技术还公开了一种前端代码文件检测装置及一种电子设备和一种计算机可读存储介质，同样能实现上述技术效果。
38.应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本技术。
附图说明
39.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：
40.图1为根据一示例性实施例示出的一种前端代码文件检测方法的流程图；
41.图2为根据一示例性实施例示出的一种前端代码文件检测装置的结构图；
42.图3为根据一示例性实施例示出的一种电子设备的结构图。
具体实施方式
43.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。另外，在本技术实施例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。
44.本技术实施例公开了一种前端代码文件检测方法，实现了前端代码中多语言配置的自动检测。
45.参见图1，根据一示例性实施例示出的一种前端代码文件检测方法的流程图，如图1所示，包括：
46.s101：获取每个语言种类对应的配置文件；
47.可以理解的是，在前端代码仓库中，已经预先定义了vue-i18n多语言配置文件，配置文件遵循的固定格式，以key:value的形式保存在.js格式的文件中。可以根据需要按照功能模块分别定义在不同的文件中，也可以在一个文件中定义所有的多语言配置。在本步骤中，可以提前指定多语言配置文件在前端代码仓库中的存放目录，进而读取前端代码仓
库中的多语言配置文件，将该多语言配置文件的文件内容以json((javascript object notation，js对象简谱，是一种轻量级的数据交换格式)格式缓存到内存中。如果同时存在多个多语言配置文件，则自动以文件名作为命名空间，保持数据独立，避免了多个文件使用相同的key导致的数据覆盖问题。
48.缓存的数据不会改变多语言配置文件的内容和数据格式，只是根据文件名增加命名空间，例如：文件名为common.js，对应数据为common.test:“测试”。如果同时存在多种语言种类，那么将每种语言种类作为一级命名空间，将文件名作为二级命名空间。例如：en_us.common.test:“test”。
49.s102：确定需要检测的目标前端代码所在的文件夹，在所述文件夹中确定所有后缀为.vue和.js的代码文件；
50.在本步骤中，通过指定需要检测的目标前端代码文件所在的文件夹，自动遍历文件夹下的.vue和.js后缀的代码文件。优选的，可以将遍历出的代码文件另存到临时目录中，以防止文件内容的修改影响原开发代码，降低对前端代码主线版本的影响。
51.在具体实施中，遍历文件夹下的代码文件时，自动判断是文件夹还是文件，如果存在子文件夹，则通过递归方式，读取嵌套子文件夹下的代码文件。同时，为了提高文件遍历性能与准确度，可以自动排除上一步骤中指定的多语言配置文件所在的文件夹，即在所述文件夹中确定除所述多语言配置文件之外所有后缀为.vue和.js的代码文件，这样就不会对.js后缀的多语言配置文件进行重复检查。
52.s103：对每个所述代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码；
53.可以理解的是，根据vue-i18n提供的api标准，实现多语言转换有五种方式，分别为：$t()、$tc()、$te()、$d()和$n()。在vue框架下，.vue文件主要由《template》《/template》和《script》《/script》两部分构成，其中《template》《/template》部分主要负责页面dom(文档对象模型，document object model)框架，例如，可以直接通过$t(“xxx.xxx”)类似的方式实现多语言定义。《script》《/script》部分主要负责javascript逻辑处理，例如，可以通过this.$t(“xxx.xxx”)等的方式实现多语言定义，其中this定义并不固定。其中“xxx.xxx”为多语言文件配置key定义，“xxx”代表命名空间，“xxx”代表json格式文件的key。对于.js文件，vue-i18n的多语言配置方式与.vue文件中的《script》《/script》部分相同，在此不再赘述。
54.在本步骤中，对临时目录中的每个代码文件执行逐行扫描，确定包含多语言配置的命名空间和key定义的代码。作为一种可行的实施方式，本步骤包括：对每个所述代码文件进行逐行扫描，将包含多语言标准应用程序编程接口的代码确定为包含多语言配置的命名空间和key定义的代码；通过正则表达式获取所述多语言标准应用程序编程接口调用的第一个参数，以确定命名空间和key定义。
55.在具体实施中，对每个代码文件进行逐行扫描，当扫描到的行代码为注释区域时，跳过该行的检测，继续扫描下一行。当扫描到的行代码包含中文时，记录代码所在文件的行数、中文字段、文件路径。即本实施例还包括：输出包含中文的代码所在文件的行数、中文字段和文件路径。当扫描到的行代码包含多语言标准应用程序编程接口(vue-i18n多语言配置api)时，即存在$t()、$tc()、$te()、$d()、$n()、.$t()、.$tc()、.$te()、.$d()、.$n
()中任一项时，通过正则表达式获取api调用参数中的第一个参数，即命名空间和key定义。
56.正则表达式的匹配规则为：
57.在《template》《/template》部分，匹配以“$t(”、“$tc(”、“$te(”、“$d(”、“$n(”中任一项为开头，以第一个“)”为结尾，中间包含单引号、双引号、英文点符号、英文字母、空格、英文逗号、中括号、大括号、数字、冒号等字符的任意组合；
58.在《script》《/script》部分和.js文件中，匹配以“.$t(”、“.$tc(”、“.$te(”、“.$d(”、“.$n(”开头，以第一个“)”结尾，中间包含单引号、双引号、英文点符号、英文字母、空格、英文逗号、中括号、大括号、数字、冒号等字符的任意组合。
59.s104：在每个语言种类对应的配置文件中查询所述命名空间和所述key定义，若未接收到所有语言种类对应的配置文件的返回值，则将所述命名空间确定为目标命名空间，将所述key定义确定为目标key定义；
60.在本步骤中，在缓存的配置文件中查询命名空间和key定义，每种语言种类对应的配置文件单独查询，如果所有语言种类对应的配置文件都有返回值，则说明多语言配置正确。如果某个语言种类对应的配置文件没有返回值，记录对应的代码所在文件的行数、命名空间和key定义、文件路径、语言种类。
61.s105：输出所述目标命名空间和所述目标key定义和对应的代码所在文件的行数、文件路径和未收到返回值的语言种类。
62.在本步骤中，将检测结果以txt文本文件的形式保存到指定的输出目录中，可以包括扫描文件路径、问题代码行数、未定义的命名空间和key定义、语言种类等内容。
63.本技术实施例提供的前端代码文件检测方法，在开发阶段通过在每个语言种类对应的配置文件中查询目标前端代码的命名空间和key定义，实现了目标前端代码文件多语言配置的自动检测。本技术实施例区别于通过ui页面人工测试的方法，在产品开发阶段即可实现开发人员自主测试，帮助研发人员提前发现问题，有利于提高开发效率与产品质量。
64.下面对本技术实施例提供的一种前端代码文件检测装置进行介绍，下文描述的一种前端代码文件检测装置与上文描述的一种前端代码文件检测方法可以相互参照。
65.参见图2，根据一示例性实施例示出的一种前端代码文件检测装置的结构图，如图2所示，包括：
66.获取模块201，用于获取每个语言种类对应的配置文件；
67.确定模块202，用于确定需要检测的目标前端代码所在的文件夹，在所述文件夹中确定所有后缀为.vue和.js的代码文件；
68.扫描模块203，用于对每个所述代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码；
69.查询模块204，用于在每个语言种类对应的配置文件中查询所述命名空间和所述key定义，若未接收到所有语言种类对应的配置文件的返回值，则将所述命名空间确定为目标命名空间，将所述key定义确定为目标key定义；
70.输出模块205，用于输出所述目标命名空间和所述目标key定义和对应的代码所在文件的行数、文件路径和未收到返回值的语言种类。
71.本技术实施例提供的前端代码文件检测装置，在开发阶段通过在每个语言种类对
应的配置文件中查询目标前端代码的命名空间和key定义，实现了目标前端代码文件多语言配置的自动检测。本技术实施例区别于通过ui页面人工测试的方法，在产品开发阶段即可实现开发人员自主测试，帮助研发人员提前发现问题，有利于提高开发效率与产品质量。
72.在上述实施例的基础上，作为一种优选实施方式，所述获取模块201具体为读取前端代码仓库中的多语言配置文件，将所述多语言配置文件的文件内容按照语言种类分别缓存为多个配置文件的模块。
73.在上述实施例的基础上，作为一种优选实施方式，所述确定模块202具体为确定需要检测的目标前端代码所在的文件夹，并在所述文件夹中确定除所述多语言配置文件之外所有后缀为.vue和.js的代码文件的模块。
74.在上述实施例的基础上，作为一种优选实施方式，还包括：
75.缓存模块，用于将所述代码文件缓存到临时目录中；
76.相应的，所述扫描模块203具体为对所述临时目录中的代码文件进行逐行扫描，确定包含多语言配置的命名空间和key定义的代码的模块。
77.在上述实施例的基础上，作为一种优选实施方式，还包括：
78.输出模块，用于输出包含中文的代码所在文件的行数、中文字段和文件路径。
79.在上述实施例的基础上，作为一种优选实施方式，所述扫描模块203包括：
80.扫描单元，用于对每个所述代码文件进行逐行扫描，将包含多语言标准应用程序编程接口的代码确定为包含多语言配置的命名空间和key定义的代码；
81.确定单元，用于通过正则表达式获取所述多语言标准应用程序编程接口调用的第一个参数，以确定命名空间和key定义。
82.在上述实施例的基础上，作为一种优选实施方式，所述多语言标准应用程序编程接口包括$t()、$tc()、$te()、$d()、$n()、.$t()、.$tc()、.$te()、.$d()和.$n()。
83.关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
84.基于上述程序模块的硬件实现，且为了实现本技术实施例的方法，本技术实施例还提供了一种电子设备，图3为根据一示例性实施例示出的一种电子设备的结构图，如图3所示，电子设备包括：
85.通信接口1，能够与其它设备比如网络设备等进行信息交互；
86.处理器2，与通信接口1连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述一个或多个技术方案提供的前端代码文件检测方法。而所述计算机程序存储在存储器3上。
87.当然，实际应用时，电子设备中的各个组件通过总线系统4耦合在一起。可理解，总线系统4用于实现这些组件之间的连接通信。总线系统4除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图3中将各种总线都标为总线系统4。
88.本技术实施例中的存储器3用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。
89.可以理解，存储器3可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(rom，read only memory)、可
编程只读存储器(prom，programmable read-only memory)、可擦除可编程只读存储器(eprom，erasable programmable read-only memory)、电可擦除可编程只读存储器(eeprom，electrically erasable programmable read-only memory)、磁性随机存取存储器(fram，ferromagnetic random access memory)、快闪存储器(flash memory)、磁表面存储器、光盘、或只读光盘(cd-rom，compact disc read-only memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(ram，random access memory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的ram可用，例如静态随机存取存储器(sram，static random access memory)、同步静态随机存取存储器(ssram，synchronous static random access memory)、动态随机存取存储器(dram，dynamic random access memory)、同步动态随机存取存储器(sdram，synchronous dynamic random access memory)、双倍数据速率同步动态随机存取存储器(ddrsdram，double data rate synchronous dynamic random access memory)、增强型同步动态随机存取存储器(esdram，enhanced synchronous dynamic random access memory)、同步连接动态随机存取存储器(sldram，synclink dynamic random access memory)、直接内存总线随机存取存储器(drram，direct rambus random access memory)。本技术实施例描述的存储器2旨在包括但不限于这些和任意其它适合类型的存储器。
90.上述本技术实施例揭示的方法可以应用于处理器2中，或者由处理器2实现。处理器2可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器2中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器2可以是通用处理器、dsp，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器2可以实现或者执行本技术实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本技术实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器3，处理器2读取存储器3中的程序，结合其硬件完成前述方法的步骤。
91.处理器2执行所述程序时实现本技术实施例的各个方法中的相应流程，为了简洁，在此不再赘述。
92.在示例性实施例中，本技术实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的存储器3，上述计算机程序可由处理器2执行，以完成前述方法所述步骤。计算机可读存储介质可以是fram、rom、prom、eprom、eeprom、flash memory、磁表面存储器、光盘、或cd-rom等存储器。
93.本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。
94.或者，本技术上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是
个人计算机、服务器、或者网络设备等)执行本技术各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。
95.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应以所述权利要求的保护范围为准。