CN112612448A - 前端国际化多页面打包方法、装置及计算机设备 - Google Patents

前端国际化多页面打包方法、装置及计算机设备 Download PDF

Info

Publication number
CN112612448A
CN112612448A CN202011491919.7A CN202011491919A CN112612448A CN 112612448 A CN112612448 A CN 112612448A CN 202011491919 A CN202011491919 A CN 202011491919A CN 112612448 A CN112612448 A CN 112612448A
Authority
CN
China
Prior art keywords
internationalized
code
translation
page
current
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.)
Pending
Application number
CN202011491919.7A
Other languages
English (en)
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.)
Ping An Puhui Enterprise Management Co Ltd
Original Assignee
Ping An Puhui Enterprise Management 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 Ping An Puhui Enterprise Management Co Ltd filed Critical Ping An Puhui Enterprise Management Co Ltd
Priority to CN202011491919.7A priority Critical patent/CN112612448A/zh
Publication of CN112612448A publication Critical patent/CN112612448A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • 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/41—Compilation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G06F9/454—Multi-language systems; Localisation; Internationalisation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

前端国际化多页面打包方法、装置及计算机设备
技术领域
本发明涉及研发管理的研发框架技术领域，尤其涉及一种前端国际化多页面打包方法、装置、计算机设备及存储介质。
背景技术
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之前还包括：
在本地创建项目；其中，所创建的项目中包括用于存放原始数据和JavaScript模块代码的第一文件，和用于存放webpack打包生成的js文件的第二文件；
在所述项目中创建入口文件路径和打包文件存放路径；
将webpack作为依赖包；
创建索引文件并存储于所述第一文件中，创建用于输出问候信息的Greeter函数和主函数并存储于第二文件中。
在本实施例中，在使用webpack之前需要通过一个给定的主文件(如：index.js)，webpack将从这个主文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个(或多个)浏览器可识别的JavaScript文件。使用Webpack前的准备的具体过程如下：
在文件夹webpack-sample-project中创建一个package.json文件：package.json文件是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在命令行中使用npm init命令可以自动创建这个package.json文件。
打开之前的空文件夹webpack-sample-project，并在里面创建两个文件夹,app文件夹(也就是第一文件)和public文件夹(也就是第二文件)，app文件夹用来存放原始数据和将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。
之后创建索引文件(即index.html)并存储在第一文件中，还创建用于输出问候信息的Greeter函数(即Greeter.js)和主函数(main.js)并存储在第二文件中。在index.html文件中写入最基础的html代码，其目的在于引入打包后的js文件(这里先把之后打包后的js文件命名为bundle.js)。在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块。把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值。
S120、提取多语言国际化翻译代码中每一语言对应的国际化翻译代码。
在本实施例中，在多语言国际化翻译代码对应的文件中一般包括各语言种类对应的国际化翻译代码标识字段值，例如中文对应的国际化翻译代码标识字段值为a1，英文对应的国际化翻译代码标识字段值为b1，法文对应的国际化翻译代码标识字段值为c1，日文对应的国际化翻译代码标识字段值为d1。上述多个国际化翻译代码是同一封装在多语言国际化翻译代码中，但是每一中语言都设有一个国际化翻译代码标识字段值以用于标识该语言种类。
在一实施例中，步骤S120包括：
通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，以识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。
即在具体实施时，可以通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，从而识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。也即国际化翻译代码标识字段值起到了对各语言进行分段的作用。
S130、获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码。
在本实施例中，由于在用户当前浏览的网页中对应一种页面语言，若加载完整的多语言国际化翻译代码对应的文件(例如完整的多语言国际化翻译代码对应的文件时10kb大小)，将该页面的界面入口JS代码和完整的多语言国际化翻译代码经过打包后，该网页对应的打包后界面启动JS代码对应的数据文件大小是11kb。但是若先筛选出该网页对应语言种类在语言国际化翻译代码中对应的目标国际化翻译代码，之后再将该页面的界面入口JS代码和该页面的界面入口JS代码进行打包，能有效减小打包后界面启动JS代码对应的数据文件大小。
在一实施例中，步骤S130包括：
判断当前页面对应的代码是否包括国际化Key值；
若当前页面对应的代码包括国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
若当前页面对应的代码不包括国际化Key值，获取//@lang Key注释，根据所述//@lang Key注释获取对应的目标国际化翻译代码。
在本实施例中，根据每个页面中实际用到的国际化字段地方的打包后代码特点，匹配出每个页面的用到的国际化Key。少数情况下代码中出现的需要用变量代表的国际化的情况，采用加//@lang Key注释的方式进行标识，配合UglifyJsPlugin等插件保留后在源码中进行匹配提取Key。
S140、获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码。
在本实施例中，所获取的当前页面对应的当前源码为该页面的界面入口JS代码，此时为了进行后续的webpack编译，需要将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码。
在一实施例中，步骤S140之前还包括：
将多语言国际化翻译代码中目标国际化翻译代码之外的其他国际化翻译代码进行删除，以得到目标国际化翻译代码。
在本实施例中，针对不同的国际化文件和匹配出的所需字段进行过滤，保留需要的字段，去掉当前页面没有用到的字段。通过这一方式，无需将多语言国际化翻译代码的完整数据参与至打包过程，减少了打包文件的大小。
S150、将所述当前更新源码进行webpack编译，得到当前输出代码。
在本实施例中，当获取了当前更新源码后，此时可以根据webpack配置的入口文件路径和打包文件存放路径，以及所创建索引文件、Greeter函数和主函数对所述当前更新源码进行webpack编译，得到当前输出代码。当前更新源码中的经过webpack进行编译后，输出到文件系统中。
该方法实现了单页页面输出代码总大小明显减少，多页应用也无需每个页面单独维护一份翻译，只需要维护一份全量翻译即可。
本发明实施例还提供一种前端国际化多页面打包装置，该前端国际化多页面打包装置用于执行前述前端国际化多页面打包方法的任一实施例。具体地，请参阅图3，图3是本发明实施例提供的前端国际化多页面打包装置的示意性框图。该前端国际化多页面打包装置100可以配置于台式电脑、平板电脑、手提电脑等用户端中。
如图3所示，前端国际化多页面打包装置100包括：代码获取单元110、代码区分单元120、Key值获取单元130、代码拼装单元140、代码编译单元150。
代码获取单元110，用于若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码。
在本实施例中，公开的是在对代码进行webpack打包流程中的改进方案。当服务器将包括全量语言数据的多语言国际化翻译代码发送至用户端。用户端在对代码进行webpack打包时，webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：首先会从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数；初始化完成后会调用Compiler的run来真正启动webpack编译构建过程，webpack的构建流程包括compile(编译)、make(构建模块)、seal(封装)、emit(输出)阶段，执行完这些阶段就完成了构建过程。
也即在代码获取单元110中，需要检测是否已绑定compile钩子、make钩子、seal钩子和emit钩子组成的钩子组件，当完成了上述钩子组件的绑定后，此时代码已打包完毕，但尚未输出到文件系统中。之后即可根据打包后的代码特点，在源码中找到全量的所有页面的多语言国际化翻译的代码后分别转换成对象。
在一实施例中，前端国际化多页面打包装置100还包括：
项目创建单元，用于在本地创建项目；其中，所创建的项目中包括用于存放原始数据和JavaScript模块代码的第一文件，和用于存放webpack打包生成的js文件的第二文件；
路径创建单元，用于在所述项目中创建入口文件路径和打包文件存放路径；
依赖包增加单元，用于将webpack作为依赖包；
文件创建单元，用于创建索引文件并存储于所述第一文件中，创建用于输出问候信息的Greeter函数和主函数并存储于第二文件中。
在本实施例中，在使用webpack之前需要通过一个给定的主文件(如：index.js)，webpack将从这个主文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个(或多个)浏览器可识别的JavaScript文件。使用Webpack前的准备的具体过程如下：
在文件夹webpack-sample-project中创建一个package.json文件：package.json文件是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在命令行中使用npm init命令可以自动创建这个package.json文件。
打开之前的空文件夹webpack-sample-project，并在里面创建两个文件夹,app文件夹(也就是第一文件)和public文件夹(也就是第二文件)，app文件夹用来存放原始数据和将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。
之后创建索引文件(即index.html)并存储在第一文件中，还创建用于输出问候信息的Greeter函数(即Greeter.js)和主函数(main.js)并存储在第二文件中。在index.html文件中写入最基础的html代码，其目的在于引入打包后的js文件(这里先把之后打包后的js文件命名为bundle.js)。在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块。把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值。
代码区分单元120，用于提取多语言国际化翻译代码中每一语言对应的国际化翻译代码。
在本实施例中，在多语言国际化翻译代码对应的文件中一般包括各语言种类对应的国际化翻译代码标识字段值，例如中文对应的国际化翻译代码标识字段值为a1，英文对应的国际化翻译代码标识字段值为b1，法文对应的国际化翻译代码标识字段值为c1，日文对应的国际化翻译代码标识字段值为d1。上述多个国际化翻译代码是同一封装在多语言国际化翻译代码中，但是每一中语言都设有一个国际化翻译代码标识字段值以用于标识该语言种类。
在一实施例中，代码区分单元120还用于：
通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，以识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。
即在具体实施时，可以通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，从而识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。也即国际化翻译代码标识字段值起到了对各语言进行分段的作用。
Key值获取单元130，用于获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码。
在本实施例中，由于在用户当前浏览的网页中对应一种页面语言，若加载完整的多语言国际化翻译代码对应的文件(例如完整的多语言国际化翻译代码对应的文件时10kb大小)，将该页面的界面入口JS代码和完整的多语言国际化翻译代码经过打包后，该网页对应的打包后界面启动JS代码对应的数据文件大小是11kb。但是若先筛选出该网页对应语言种类在语言国际化翻译代码中对应的目标国际化翻译代码，之后再将该页面的界面入口JS代码和该页面的界面入口JS代码进行打包，能有效减小打包后界面启动JS代码对应的数据文件大小。
在一实施例中，Key值获取单元130包括：
Key值判断单元，用于判断当前页面对应的代码是否包括国际化Key值；
第一Key值获取单元，用于若当前页面对应的代码包括国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
第二Key值获取单元，用于若当前页面对应的代码不包括国际化Key值，获取//@lang Key注释，根据所述//@lang Key注释获取对应的目标国际化翻译代码。
在本实施例中，根据每个页面中实际用到的国际化字段地方的打包后代码特点，匹配出每个页面的用到的国际化Key。少数情况下代码中出现的需要用变量代表的国际化的情况，采用加//@lang Key注释的方式进行标识，配合UglifyJsPlugin等插件保留后在源码中进行匹配提取Key。
代码拼装单元140，用于获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码。
在本实施例中，所获取的当前页面对应的当前源码为该页面的界面入口JS代码，此时为了进行后续的webpack编译，需要将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码。
在一实施例中，前端国际化多页面打包装置100还包括：
代码筛选单元，用于将多语言国际化翻译代码中目标国际化翻译代码之外的其他国际化翻译代码进行删除，以得到目标国际化翻译代码。
在本实施例中，针对不同的国际化文件和匹配出的所需字段进行过滤，保留需要的字段，去掉当前页面没有用到的字段。通过这一方式，无需将多语言国际化翻译代码的完整数据参与至打包过程，减少了打包文件的大小。
代码编译单元150，用于将所述当前更新源码进行webpack编译，得到当前输出代码。
在本实施例中，当获取了当前更新源码后，此时可以根据webpack配置的入口文件路径和打包文件存放路径，以及所创建索引文件、Greeter函数和主函数对所述当前更新源码进行webpack编译，得到当前输出代码。当前更新源码中的经过webpack进行编译后，输出到文件系统中。
该装置实现了单页页面输出代码总大小明显减少，多页应用也无需每个页面单独维护一份翻译，只需要维护一份全量翻译即可。
上述前端国际化多页面打包装置可以实现为计算机程序的形式，该计算机程序可以在如图4所示的计算机设备上运行。
请参阅图4，图4是本发明实施例提供的计算机设备的示意性框图。该计算机设备500是用户端，用户端可以是台式电脑、平板电脑、手提电脑等。
参阅图4，该计算机设备500包括通过系统总线501连接的处理器502、存储器和网络接口505，其中，存储器可以包括非易失性存储介质503和内存储器504。
该非易失性存储介质503可存储操作系统5031和计算机程序5032。该计算机程序5032被执行时，可使得处理器502执行前端国际化多页面打包方法。
该处理器502用于提供计算和控制能力，支撑整个计算机设备500的运行。
该内存储器504为非易失性存储介质503中的计算机程序5032的运行提供环境，该计算机程序5032被处理器502执行时，可使得处理器502执行前端国际化多页面打包方法。
该网络接口505用于进行网络通信，如提供数据信息的传输等。本领域技术人员可以理解，图4中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备500的限定，具体的计算机设备500可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
其中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现本发明实施例公开的前端国际化多页面打包方法。
本领域技术人员可以理解，图4中示出的计算机设备的实施例并不构成对计算机设备具体构成的限定，在其他实施例中，计算机设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。例如，在一些实施例中，计算机设备可以仅包括存储器及处理器，在这样的实施例中，存储器及处理器的结构及功能与图4所示实施例一致，在此不再赘述。
应当理解，在本发明实施例中，处理器502可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器502还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
在本发明的另一实施例中提供计算机可读存储介质。该计算机可读存储介质可以为非易失性的计算机可读存储介质。该计算机可读存储介质存储有计算机程序，其中计算机程序被处理器执行时实现本发明实施例公开的前端国际化多页面打包方法。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的设备、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
在本发明所提供的几个实施例中，应该理解到，所揭露的设备、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为逻辑功能划分，实际实现时可以有另外的划分方式，也可以将具有相同功能的单元集合成一个单元，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种前端国际化多页面打包方法，其特征在于，包括：
若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；
提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；
获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及
将所述当前更新源码进行webpack编译，得到当前输出代码。
2.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码之前，还包括：
在本地创建项目；其中，所创建的项目中包括用于存放原始数据和JavaScript模块代码的第一文件，和用于存放webpack打包生成的js文件的第二文件；
在所述项目中创建入口文件路径和打包文件存放路径；
将webpack作为依赖包；
创建索引文件并存储于所述第一文件中，创建用于输出问候信息的Greeter函数和主函数并存储于第二文件中。
3.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述提取多语言国际化翻译代码中每一语言对应的国际化翻译代码，包括：
通过识别多语言国际化翻译代码中国际化翻译代码标识字段值，以识别到多语言国际化翻译代码中每一语言对应的国际化翻译代码。
4.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码，包括：
判断当前页面对应的代码是否包括国际化Key值；
若当前页面对应的代码包括国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
若当前页面对应的代码不包括国际化Key值，获取//@lang Key注释，根据所述//@langKey注释获取对应的目标国际化翻译代码。
5.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码之前，还包括：
将多语言国际化翻译代码中目标国际化翻译代码之外的其他国际化翻译代码进行删除，以得到目标国际化翻译代码。
6.根据权利要求1所述的前端国际化多页面打包方法，其特征在于，所述将所述当前更新源码进行webpack编译，得到当前输出代码，包括：
获取入口文件路径和打包文件存放路径，以及所创建索引文件、Greeter函数和主函数对所述当前更新源码进行webpack编译，得到当前输出代码。
7.一种前端国际化多页面打包装置，其特征在于，包括：
代码获取单元，用于若检测到已绑定钩子组件，获取源码中的多语言国际化翻译代码；
代码区分单元，用于提取多语言国际化翻译代码中每一语言对应的国际化翻译代码；
Key值获取单元，用于获取当前页面对应的国际化Key值，根据所述国际化Key值在多语言国际化翻译代码获取对应的目标国际化翻译代码；
代码拼装单元，用于获取当前页面对应的当前源码，将所述目标国际化翻译代码拼装至所述当前源码，以得到当前更新源码；以及
代码编译单元，用于将所述当前更新源码进行webpack编译，得到当前输出代码。
8.根据权利要求7所述的前端国际化多页面打包装置，其特征在于，还包括：
项目创建单元，用于在本地创建项目；其中，所创建的项目中包括用于存放原始数据和JavaScript模块代码的第一文件，和用于存放webpack打包生成的js文件的第二文件；
路径创建单元，用于在所述项目中创建入口文件路径和打包文件存放路径；
依赖包增加单元，用于将webpack作为依赖包；
文件创建单元，用于创建索引文件并存储于所述第一文件中，创建用于输出问候信息的Greeter函数和主函数并存储于第二文件中。
9.一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至6中任一项所述的前端国际化多页面打包方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如权利要求1至6任一项所述的前端国际化多页面打包方法。
CN202011491919.7A 2020-12-16 2020-12-16 前端国际化多页面打包方法、装置及计算机设备 Pending CN112612448A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011491919.7A CN112612448A (zh) 2020-12-16 2020-12-16 前端国际化多页面打包方法、装置及计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011491919.7A CN112612448A (zh) 2020-12-16 2020-12-16 前端国际化多页面打包方法、装置及计算机设备

Publications (1)

Publication Number Publication Date
CN112612448A true CN112612448A (zh) 2021-04-06

Family

ID=75239922

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011491919.7A Pending CN112612448A (zh) 2020-12-16 2020-12-16 前端国际化多页面打包方法、装置及计算机设备

Country Status (1)

Country Link
CN (1) CN112612448A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113111669A (zh) * 2021-06-15 2021-07-13 图灵人工智能研究院（南京）有限公司 基于增量的前端多语言国际化翻译方法及装置
CN113238737A (zh) * 2021-06-15 2021-08-10 挂号网（杭州）科技有限公司 页面打包方法、装置、电子设备及存储介质
CN113312056A (zh) * 2021-06-16 2021-08-27 浪潮云信息技术股份公司 angular大型集成项目的国际化实现方法、电子设备及存储介质
CN113590185A (zh) * 2021-09-28 2021-11-02 苏州浪潮智能科技有限公司 基于微前端的页面国际化配置方法、装置、设备及介质
CN113760237A (zh) * 2021-10-22 2021-12-07 深圳市元征科技股份有限公司 编译地址的更新方法、装置、终端设备及可读存储介质
CN114003489A (zh) * 2021-09-30 2022-02-01 苏州浪潮智能科技有限公司 一种前端代码文件检测方法、装置及电子设备和存储介质
CN115618887A (zh) * 2022-10-17 2023-01-17 北京志凌海纳科技有限公司 动态长文本国际化方法、装置、设备及存储介质
CN115796190A (zh) * 2023-01-10 2023-03-14 杭州比智科技有限公司 基于vue和webpack的前端国际化多语言转换方法及系统

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106940646A (zh) * 2017-03-17 2017-07-11 微梦创科网络科技（中国）有限公司 一种软件国际化处理方法、装置及系统
CN110262800A (zh) * 2019-06-03 2019-09-20 中国工商银行股份有限公司 多语言处理方法及装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106940646A (zh) * 2017-03-17 2017-07-11 微梦创科网络科技（中国）有限公司 一种软件国际化处理方法、装置及系统
CN110262800A (zh) * 2019-06-03 2019-09-20 中国工商银行股份有限公司 多语言处理方法及装置

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113111669A (zh) * 2021-06-15 2021-07-13 图灵人工智能研究院（南京）有限公司 基于增量的前端多语言国际化翻译方法及装置
CN113238737A (zh) * 2021-06-15 2021-08-10 挂号网（杭州）科技有限公司 页面打包方法、装置、电子设备及存储介质
CN113312056A (zh) * 2021-06-16 2021-08-27 浪潮云信息技术股份公司 angular大型集成项目的国际化实现方法、电子设备及存储介质
CN113312056B (zh) * 2021-06-16 2022-04-19 浪潮云信息技术股份公司 angular大型集成项目的国际化实现方法、电子设备及存储介质
CN113590185A (zh) * 2021-09-28 2021-11-02 苏州浪潮智能科技有限公司 基于微前端的页面国际化配置方法、装置、设备及介质
WO2023050703A1 (zh) * 2021-09-28 2023-04-06 苏州浪潮智能科技有限公司 基于微前端的页面国际化配置方法、装置、设备及介质
CN114003489A (zh) * 2021-09-30 2022-02-01 苏州浪潮智能科技有限公司 一种前端代码文件检测方法、装置及电子设备和存储介质
CN114003489B (zh) * 2021-09-30 2023-08-18 苏州浪潮智能科技有限公司 一种前端代码文件检测方法、装置及电子设备和存储介质
CN113760237A (zh) * 2021-10-22 2021-12-07 深圳市元征科技股份有限公司 编译地址的更新方法、装置、终端设备及可读存储介质
CN115618887A (zh) * 2022-10-17 2023-01-17 北京志凌海纳科技有限公司 动态长文本国际化方法、装置、设备及存储介质
CN115796190A (zh) * 2023-01-10 2023-03-14 杭州比智科技有限公司 基于vue和webpack的前端国际化多语言转换方法及系统

Similar Documents

Publication Publication Date Title
CN112612448A (zh) 前端国际化多页面打包方法、装置及计算机设备
CN110162296B (zh) 应用程序编程接口文档的生成方法、装置及终端设备
CN109976761B (zh) 软件开发工具包的生成方法、装置及终端设备
CN109117119B (zh) 一种多态组件融合方法
CN111240684B (zh) 一种js代码的裁剪方法、装置、介质和电子设备
CN111680253B (zh) 页面应用数据包生成方法、装置、计算机设备及存储介质
CN108304175B (zh) 代码文件隔离打包方法及装置
CN110059456B (zh) 代码保护方法、代码保护装置、存储介质与电子设备
CN111985055B (zh) 一种模型封装方法、装置及电子设备
CN110580174B (zh) 应用组件生成方法、服务器及终端
CN106843901B (zh) 一种页面渲染和验证的方法和装置
CN114153459A (zh) 接口文档生成方法及装置
CN111444453A (zh) 页面回传数据处理方法及其装置
Rosenmüller et al. Tailor-made data management for embedded systems: A case study on Berkeley DB
CN110347471B (zh) 层级式显示组件系统、显示组件调用方法和装置
CN114662022A (zh) 一种应用隔离方法及装置
CN109542447B (zh) 一种otx程序文件执行方法及装置
Stamey et al. The aspect-oriented web
CN111273940B (zh) 将程序文件上传至代码仓库的方法及装置
CN114237407A (zh) 一种字体图标处理方法、装置及计算机可读存储介质
CN114492473A (zh) 语言字符串的翻译方法、装置、计算机设备及存储介质
CN113986322B (zh) 一种动态修改页面代码的方法、装置及存储介质
CN113495727B (zh) 业务组件开发方法、装置、电子设备及介质
CN117472469A (zh) 资源加载方法及系统
CN117687635A (zh) 应用样式文件的方法、装置及电子设备

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