前端国际化多页面打包方法、装置及计算机设备制造方法及图纸

本发明专利技术公开了前端国际化多页面打包方法、装置、计算机设备及存储介质，涉及研发管理技术，包括若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及将所述当前更新源码进行webpack编译，得到当前输出代码。该方法实现了单页页面输出代码总大小明显减少，多页应用也无需每个页面单独维护一份翻译，只需要维护一份全量翻译即可。

【技术实现步骤摘要】
前端国际化多页面打包方法、装置及计算机设备
本专利技术涉及研发管理的研发框架
，尤其涉及一种前端国际化多页面打包方法、装置、计算机设备及存储介质。
技术介绍
Web前端资源体积一直是影响用户体验的一大痛点，最新研究表明，大多数用户期望的网站加载时间是3秒，如果时间长过3秒，网站就开始流失用户。过大的资源体积会导致首次加载资源速度过慢。而面向海外的前端系统，日积月累逐渐增大的国际化文件又是导致前端资源过大的一个重要原因之一。目前常见的解决方案是国际化根据不同的多页面单独去做国际化字段文件，也即每个页面保留自己单独需要的国际化字段文件，这一方式虽然能在一定程度上解决前端资源过大的问题但依旧导致了维护不便的问题。一是需要维护一份每个界面都需要的公共国际化文件，每次打包每个单页面仍然会将公共的国际化字段全量打包到代码中，导致了其包含很多用不到的字段，而无法实现压缩体积的目的。二是每次新加字段都需要考虑是否在别的页面中使用过，是否需要放到公共的国际化文件里面，维护不便。
技术实现思路
本专利技术实施例提供了一种前端国际化多页面打包方法、装置、计算机设备及存储介质，旨在解决现有技术中根据不同的多页面单独去做国际化字段文件每次打包每个单页面仍然会将公共的国际化字段全量打包到代码中，无法压缩体积，而且维护不便的问题。第一方面，本专利技术实施例提供了一种前端国际化多页面打包方法，其包括：若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及将所述当前更新源码进行webpack编译，得到当前输出代码。第二方面，本专利技术实施例提供了一种前端国际化多页面打包装置，其包括：代码获取单元，用于若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；代码区分单元，用于提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；Key值获取单元，用于获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；代码拼装单元，用于获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及代码编译单元，用于将所述当前更新源码进行webpack编译，得到当前输出代码。第三方面，本专利技术实施例又提供了一种计算机设备，其包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的前端国际化多页面打包方法。第四方面，本专利技术实施例还提供了一种计算机可读存储介质，其中所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行上述第一方面所述的前端国际化多页面打包方法。本专利技术实施例提供了一种前端国际化多页面打包方法、装置、计算机设备及存储介质，包括若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及将所述当前更新源码进行webpack编译，得到当前输出代码。该方法实现了单页页面输出代码总大小明显减少，多页应用也无需每个页面单独维护一份翻译，只需要维护一份全量翻译即可。附图说明为了更清楚地说明本专利技术实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本专利技术实施例提供的前端国际化多页面打包方法的应用场景示意图；图2为本专利技术实施例提供的前端国际化多页面打包方法的流程示意图；图3为本专利技术实施例提供的前端国际化多页面打包装置的示意性框图；图4为本专利技术实施例提供的计算机设备的示意性框图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。还应当理解，在此本专利技术说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本专利技术。如在本专利技术说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。还应当进一步理解，在本专利技术说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。请参阅图1和图2，图1为本专利技术实施例提供的前端国际化多页面打包方法的应用场景示意图；图2为本专利技术实施例提供的前端国际化多页面打包方法的流程示意图，该前端国际化多页面打包方法应用于用户端中，该方法通过安装于用户端中的应用软件进行执行。如图2所示，该方法包括步骤S110～S150。S110、若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码。在本实施例中，公开的是在对代码进行webpack打包流程中的改进方案。当服务器将包括全量语言数据的多语言国际化翻译代码发送至用户端。用户端在对代码进行webpack打包时，webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：首先会从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数；初始化完成后会调用Compiler的run来真正启动webpack编译构建过程，webpack的构建流程包括compile(编译)、make(构建模块)、seal(封装)、emit(输出)阶段，执行完这些阶段就完成了构建过程。也即在步骤S110中，需要检测是否已绑定compile钩子、make钩子、seal钩子和emit钩子组成的钩子组件，当完成了上述钩子组件的绑定后，此时代码已打包完毕，但尚未输出到文件系统中。之后即可根据打包后的代码特点，在源码中找到全量的所有页面的多语言国际化翻译的代码后分别转换成对象。在一实施例中，在步骤S110之前还包括：本文档来自技高网...

【技术保护点】
1.一种前端国际化多页面打包方法，其特征在于，包括：/n若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；/n提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；/n获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；/n获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及/n将所述当前更新源码进行webpack编译，得到当前输出代码。/n

【技术特征摘要】
1.一种前端国际化多页面打包方法，其特征在于，包括：
若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；
提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；
获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及
将所述当前更新源码进行webpack编译，得到当前输出代码。


2.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码之前，还包括：
在本地创建项目；其中，所创建的项目中包括用于存放原始数据和JavaScript模块代码的第一文件，和用于存放webpack打包生成的js文件的第二文件；
在所述项目中创建入口文件路径和打包文件存放路径；
将webpack作为依赖包；
创建索引文件并存储于所述第一文件中，创建用于输出问候信息的Greeter函数和主函数并存储于第二文件中。


3.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述提取多语言国际化翻译代码中每一语言对应的国际化翻译代码，包括：
通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，以识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。


4.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码，包括：
判断当前页面对应的代码是否包括国际化Key值；
若当前页面对应的代码包括国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
若当前页面对应的代码不包括国际化Key值，获取//@langKey注释，根据所述//@langKey注释获取对应的目标国际化翻译代码。


5.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码之...

【专利技术属性】
技术研发人员：任仲洋，于海生，
申请(专利权)人：平安普惠企业管理有限公司，
类型：发明
国别省市：广东;44