CN112685041A - 前端模块化语法转换方法、系统及存储介质 - Google Patents

Abstract

本申请提供了一种前端模块化语法转换方法、系统及存储介质，配置转译为ES6模块化的代码环境；定位原AMD模块化项目中需要转换的require.js文件；匹配require.js文件中的关键字define，提取出function中的代码块；根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。本申请可以自动将js文件的AMD模式写法，转换为ES6的模块化写法。在代码转换后，不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误等问题。

Description

前端模块化语法转换方法、系统及存储介质

技术领域

本申请属于网站开发技术领域，具体地，涉及一种前端模块化语法转换方法、系统及存储介质。

背景技术

在前端发展历史中，在ES6(ECMAScript 6)规范推出之前，并没有对模块化体系进行一个明确的定义。但是模块化对于前端来说，尤为重要，如果没有模块化，变量和方法不易维护，容易造成全局污染，资源加载之前的相互依赖关系处理困难，大型项目可维护性大打折扣。所以，前端社区先于标准规范提出了AMD和CMD两种模块化方案，而且沿用了多年。随着新一代的ES6规范，提供了module方法，可以很好的解决模块化问题，并完全取代AMD和CDM两种模块化方案。

然而，对于使用AMD和CDM两种模块化方案并已经成型的项目，要进行ES6模块化转换，存在以下问题：1、ES6的模块(module)语法，对于新手来说，相对来说比较复杂，要完全了解并熟悉这种写法，需要开发者花费较多的时间。2、对于已经上线或已经成立较长时间的项目，需要对项目进行模块化的语法转换，需要投入很大的人力和时间成本，同时需要承担人为优化过程中，带来的不可控风险，常常令项目优化计划落空。

但是，目前前端领域内，存留较多的为AMD模块化写法，而AMD模块的实现通过js这个开源库实现的。因此亟需一种方法或工具，可以用极低的成本自动将require.js文件的AMD模式化写法转换为ES6的模块化写法。

发明内容

本发明提出了一种前端模块化语法转换方法、系统及存储介质，旨在解决现有的对项目进行模块化的语法转换方法较复杂，人力时间成本太大的问题。

根据本申请实施例的第一个方面，提供了一种前端模块化语法转换方法，具体包括以下步骤：

配置转译为ES6模块化的代码环境；

定位原AMD模块化项目中需要转换的require.js文件；

匹配require.js文件中的关键字define，提取出function中的代码块；

根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；

搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

在本申请一些实施方式中，形成新的ES6模块化文件之后，还包括：根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化文件转换形成新的ES6模块化文件，并引入。

在本申请一些实施方式中，根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化转换形成新的ES6模块化并引入之后，还包括：将原AMD模块化项目中需要转换的require.js文件进行删除，保留新生成的ES6模块化文件，同时将文件名中的"_es6_module"去除。

在本申请一些实施方式中，配置转译为ES6模块化的代码环境，具体包括：

检查原AMD模块化项目中的package.json文件，是否包含Babel相关的转换代码仓库，若没有，则执行转换代码仓库命令进行babel相关代码库的安装。

在本申请一些实施方式中，配置转译为ES6模块化的代码环境，具体包括：

执行“npm install--save-dev@babel/core”命令，安装babel核心代码库，

执行“npm install@babel/preset-env--save-dev”命令，安装ES6转ES5的翻译规则。

在本申请一些实施方式中，定位原AMD模块化项目中需要转换的require.js文件之前，还包括预先配置require.js文件的文件地址。

在本申请一些实施方式中，预先配置require.js文件的文件地址，具体包括：

确定原AMD模块化项目的项目根目录地址；

从config.json配置文件中搜索require.js文件在项目中的目录地址，再与根目录地址进行拼接，形成完整的指向require.js文件的文件地址。

根据本申请实施例的第二个方面，一种前端模块化语法转换系统，具体包括：

ES6模块化配置模块：用于配置转译为ES6模块化的代码环境；

js文件定位模块：用于定位原AMD模块化项目中需要转换的require.js文件；

匹配模块：用于匹配require.js文件中的关键字define，提取出function中的代码块；

ES6模块化转换模块：用于根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；

return内容导出模块：用于搜索原AMD模块化中的原return关键字，通过exportdefault语法，将原return内容导出，形成新的ES6模块化文件。

根据本申请实施例的第三个方面，提供了一种前端模块化语法转换设备，包括：

存储器：用于存储可执行指令；以及

处理器:用于与存储器连接以执行可执行指令从而完成前端模块化语法转换方法。

根据本申请实施例的第四个方面，提供了一种计算机可读存储介质，其上存储有计算机程序；计算机程序被处理器执行以实现前端模块化语法转换方法。

采用本申请实施例中的前端模块化语法转换方法、系统及存储介质，配置转译为ES6模块化的代码环境；定位原AMD模块化项目中需要转换的require.js文件；匹配require.js文件中的关键字define，提取出function中的代码块；根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。本申请可以自动将js的AMD模式写法，转换为ES6的模块化写法。在代码转换后，不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。同时，很好的兼容了处理逻辑的代码与业务逻辑代码，不会影响原项目代码的执行。因此，大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误等问题，解决了大项目进行语法优化迟迟无法落地的问题，真正做到了低成本以及自动化转换。

附图说明

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

图1中示出了根据本申请实施例的一种前端模块化语法转换方法的步骤流程图；

图2中示出了根据本申请实施例的一种前端模块化语法转换方法的流程示意图；

图3中示出了根据本申请实施例的前端模块化语法转换系统的结构示意图；

图4中示出了根据本申请实施例的前端模块化语法转换设备的结构示意图。

具体实施方式

在实现本申请的过程中，发明人发现目前前端领域内，存留较多的为AMD模块化写法，而AMD模块的实现通过js这个开源库实现的，在进行ES6模块化转换时，存在以下问题：1、ES6的模块(module)语法，对于新手来说，相对来说比较复杂，要完全了解并熟悉这种写法，需要开发者花费较多的时间。2、对于已经上线或已经成立较长时间的项目，需要对项目进行模块化的语法转换，需要投入很大的人力和时间成本，同时需要承担人为优化过程中，带来的不可控风险，常常令项目优化计划落空。

基于此，本申请的前端模块化语法转换方法、系统及存储介质，配置转译为ES6模块化的代码环境；定位原AMD模块化项目中需要转换的require.js文件；匹配require.js文件中的关键字define，提取出function中的代码块；根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

本申请的好处：1、用户无需深入了解ES6的module模块化语法、历史代码优化处理的方式以及如何引入Babel转译代码库等繁琐流程，直接可以引入插件，配置好需要转换的require.js文件地址后，执行自动化转换，自动将js的AMD模式写法，转换为ES6的模块化写法。

2、大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误问题。解决了大项目进行语法优化迟迟无法落地的问题，真正做到了低成本以及自动化转换。

3、本申请在代码转换后，在不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。同时，很好的兼容了处理逻辑的代码与业务逻辑代码，不会影响原项目代码的执行。

为了使本申请实施例中的技术方案及优点更加清楚明白，以下结合附图对本申请的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本申请的一部分实施例，而不是所有实施例的穷举。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

实施例1

图1中示出了根据本申请实施例的前端模块化语法转换方法的步骤流程图。

如图1所示，本申请的前端模块化语法转换方法，具体包括以下步骤：

S101：配置转译为ES6模块化的代码环境。

在项目优化过程中，会使用到最新的ES6规范的module模块化语法。因此需要在项目中配置Babel，来兼容版本比较低的浏览器。

具体的，配置转译为ES6模块化的代码环境，包括以下内容：

检查原AMD模块化项目中的package.json文件，是否包含Babel相关的转换代码仓库，若没有，则执行转换代码仓库命令进行babel相关代码库的安装。

具体的，执行以下命令进行babel相关代码库的安装：

执行“npm install--save-dev@babel/core”命令，安装babel核心代码库，

执行“npm install@babel/preset-env--save-dev”命令，安装ES6转ES5的翻译规则。

S102：然后，定位原AMD模块化项目中需要转换的require.js文件。

具体的，在步骤S102定位require.js文件之前，还包括预先配置require.js文件的文件地址。

预先配置require.js文件的文件地址，具体包括：

1)确定原AMD模块化项目的项目根目录地址；

2)从config.json配置文件中搜索require.js文件在项目中的目录地址，再与根目录地址进行拼接，形成完整的指向require.js文件的文件地址。

如果没有进行require.js文件地址的预先配置，会默认在整个项目目录下查找文件类型为js的文件进行检索并定位，然后将符合要求的js文件ADM模块化语法转为ES6的module语法。

S103：然后，匹配require.js文件中的关键字define，提取出所包裹的所有代码块。即取得回调函数，即function中的代码块。

关于项目中AMD模块化中的require.js文件的语法，都是通过define(['module'],function(){实际代码})，这种语法进行定义模块和使用模块的。因此，首先需要，匹配js文件中的关键字define，取得回调函数，即function中的代码块，将代码块进行暂存。

S104：根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件。

S105：搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

将步骤S103中提取出来的代码块，转化后生成一个新的js文件，并在原文件名基础上加上"_es6_module"，然后将新命名的js文件代替原代码块复制进去。

同时，找到原始AMD模块化中的return关键字，通过export default语法，将原来return的内容导出，形成新的ES6模块文件。

其中，Return的内容是原始AMD模块化中对外导出的内容。

在本申请一些实施方式中，形成新的ES6模块化文件之后，还包括以下步骤：

首先，根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化文件转换形成新的ES6模块化文件，并引入。

具体的，在AMD模块下引入其他依赖模块的语法时，是在define定义模块时，先传入一个数组，即S103中提到的['module']，包括依赖的模块。

在项目中全部AMD模块都完成ES6模块转换后，需要确定相互之间依赖引入关系。

根据依赖引入关系将S105中新生成的各个ES6模块依次进行引入，引入语法为import xxx from xxx。有多少个依赖模块，就有多少引入的语句。

最后，进行项目整理。将原AMD模块化项目中需要转换的require.js文件进行删除，保留新生成的ES6模块化文件，同时将文件名中的"_es6_module"去除。这样就保证了，转换后的文件名与原来的文件名一致。

图2中示出了根据本申请实施例的一种前端模块化语法转换方法的流程示意图。

本申请的前端模块化语法转换方法在应用中，如图2所示，首先引入ES6模块化的工具；然后，编写配置require.js文件，首先定位到项目需转换文件的根目录，然后执行项目构建命令，npm run pa-amd-to-module，在构建完成后，会自动将所需要转换的js文件进行转换。

其它实施方式中，

在根据原AMD模块之间的依赖引入关系，将关联的模块进行ES6模块转换并引入时，需要首先确定项目中的依赖引入关系。

具体的，确定项目中的依赖引入关系时，可通过可视化进行表示，具体步骤如下：

步骤1：基于AMD的模块化语法获取原始数据包括项目关联的所有代码文件以及相关信息、依赖关系的数据，即得到此文件的引用信息；

步骤2：对原始数据进行增强，进而得到强化数据。

强化数据包括，计算depth、deepen、depth_range、max_size、max_nums_as_source等信息从项目目录中筛选并且去除不相关文件的无效数据.

其中，depth表示文件的相对根目录的深度，由文件信息对象的id即文件的相对目录计算得到；deepen表示文件是否被同级的其他文件引用；depth_range表示每层目录中的文件总数；max_size表示所有文件中的文件大小的最大值；max_nums_as_source表示所有文件中文件引用数量的最大值；

步骤3：由强化数据映射到可视化模型。

每个文件表示按被引次数表示为不同灰度、不同大小的圆圈；可视化模型显示为同心圆结构，同一级目录下的文件根据id按字典序均匀分布在同一个圆上，第一级目录为半径最小的圆，随半径增大依次为第二级、第三级等目录；在同一级目录中，如果某文件是被同级的其他文件引用，它将被向外移动到本目录和下一级目录之间的位置。

模型建立过程如下：

(1)对大小规模不一的文件进行归一化处理，建立文件的半径模型，公式如下：

其中，r表示归一化的半径，file_size表示文件的大小，max_size表示最大的文件的大小。半径与文件的大小成正比关系。

(2)对文件引用数量进行归一化处理，建立文件的颜色模型，表达式如下：

其中，c表示归一化的引用数量，file_nums_as_source表示文件的引用数量，max_nums_as_source表示所有文件中引用数量的最大值。

(3)计算文件所在坐标：首先计算文件在极坐标系中的位置(ρ,θ)，公式如下：

其中，m，t，w，b为用于调试显示效果的超参数，n表示代码文件在其所在层级目录中的顺序号；

获得极坐标(ρ,θ)后，再将极坐标转换成直角坐标(x,y)，转换公式如下：

步骤4：借助ECharts工具渲染依赖关系的可视化图形；

步骤5：通过正则表达式参与对原始数据的筛选，渲染出一幅新的仅针对特定的文件的依赖关系的可视化图形。

最后，基于以上可视化表示的原项目中的依赖引入关系，将关联的模块进行ES6模块转换并引入时。

采用本申请实施例中的前端模块化语法转换方法，配置转译为ES6模块化的代码环境；定位原AMD模块化项目中需要转换的require.js文件；匹配require.js文件中的关键字define，提取出function中的代码块；根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

本申请可以自动将js的AMD模式写法，转换为ES6的模块化写法。在代码转换后，不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。同时，很好的兼容了处理逻辑的代码与业务逻辑代码，不会影响原项目代码的执行。因此，大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误等问题，解决了大项目进行语法优化迟迟无法落地的问题，真正做到了低成本以及自动化转换。

实施例2

本实施例提供了一种前端模块化语法转换系统，对于本实施例的前端模块化语法转换系统中未披露的细节，请参照其它实施例中的前端模块化语法转换方法的实施内容。

图3中示出了根据本申请实施例的前端模块化语法转换系统的结构示意图。

如图3所示，本申请的前端模块化语法转换系统，包括ES6模块化配置模块10、js文件定位模块20、匹配模块30、ES6模块化转换模块40以及return内容导出模块50。

具体的，

ES6模块化配置模块10：用于配置转译为ES6模块化的代码环境。

具体的，配置转译为ES6模块化的代码环境，包括以下内容：

检查原AMD模块化项目中的package.json文件，是否包含Babel相关的转换代码仓库，若没有，则执行转换代码仓库命令进行babel相关代码库的安装。

具体的，执行以下命令进行babel相关代码库的安装：

执行“npm install--save-dev@babel/core”命令，安装babel核心代码库，

执行“npm install@babel/preset-env--save-dev”命令，安装ES6转ES5的翻译规则。

js文件定位模块20：用于定位原AMD模块化项目中需要转换的require.js文件。

具体的，在定位require.js文件之前，还包括预先配置require.js文件的文件地址。

预先配置require.js文件的文件地址，具体包括：

1)确定原AMD模块化项目的项目根目录地址；

2)从config.json配置文件中搜索require.js文件在项目中的目录地址，再与根目录地址进行拼接，形成完整的指向require.js文件的文件地址。

如果没有进行require.js文件地址的预先配置，会默认在整个项目目录下查找文件类型为js的文件进行检索并定位，然后将符合要求的js文件ADM模块化语法转为ES6的module语法。

匹配模块30：用于匹配require.js文件中的关键字define，提取出function中的代码块。

关于项目中AMD模块化中的require.js文件的语法，都是通过define(['module'],function(){实际代码})，这种语法进行定义模块和使用模块的。因此，首先需要，匹配js文件中的关键字define，取得回调函数，即function中的代码块，将代码块进行暂存。

ES6模块化转换模块40：用于根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件。

return内容导出模块50：用于搜索原AMD模块化中的原return关键字，通过exportdefault语法，将原return内容导出，形成新的ES6模块化文件。

将匹配模块30提取出来的代码块，转化后生成一个新的js文件，并在原文件名基础上加上"_es6_module"，然后将新命名的js文件代替原代码块复制进去。

同时，找到原始AMD模块化中的return关键字，通过export default语法，将原来return的内容导出，形成新的ES6模块文件。

其中，Return的内容是原始AMD模块化中对外导出的内容。

最后，形成新的ES6模块化文件之后，还包括以下步骤：

首先，根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化文件转换形成新的ES6模块化文件，并引入。

具体的，在AMD模块下引入其他依赖模块的语法时，是在define定义模块时，先传入一个数组，即S103中提到的['module']，包括依赖的模块。

在项目中全部AMD模块都完成ES6模块转换后，需要确定相互之间依赖引入关系。

根据依赖引入关系将S105中新生成的各个ES6模块依次进行引入，引入语法为import xxx from xxx。有多少个依赖模块，就有多少引入的语句。

最后，进行项目整理。将原AMD模块化项目中需要转换的require.js文件进行删除，保留新生成的ES6模块化文件，同时将文件名中的"_es6_module"去除。这样就保证了，转换后的文件名与原来的文件名一致。

本申请的前端模块化语法转换方法在应用中，首先定位到项目需转换文件的根目录，然后执行命令构建命令，npm run pa-amd-to-module，在构建完成后，会自动将所需要转换的js文件进行转换。

采用本申请实施例中的前端模块化语法转换系统，通过ES6模块化配置模块10配置转译为ES6模块化的代码环境；js文件定位模块20定位原AMD模块化项目中需要转换的require.js文件；匹配模块30匹配require.js文件中的关键字define，提取出function中的代码块；ES6模块化转换模块40根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；return内容导出模块50搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

本申请可以自动将js的AMD模式写法，转换为ES6的模块化写法。在代码转换后，不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。同时，很好的兼容了处理逻辑的代码与业务逻辑代码，不会影响原项目代码的执行。因此，大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误等问题，解决了大项目进行语法优化迟迟无法落地的问题，真正做到了低成本以及自动化转换。

实施例3

本实施例提供了一种前端模块化语法转换设备，对于本实施例的前端模块化语法转换设备中未披露的细节，请参照其它实施例中的前端模块化语法转换方法或系统具体的实施内容。

图4中示出了根据本申请实施例的前端模块化语法转换设备400的结构示意图。

如图4所示，前端模块化语法转换设备400，包括：

存储器402：用于存储可执行指令；以及

处理器401:用于与存储器402连接以执行可执行指令从而完成基于模板生成PDF的电子签章方法。

本领域技术人员可以理解，所述示意图4仅仅是前端模块化语法转换设备400的示例，并不构成对前端模块化语法转换设备400的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如前端模块化语法转换设备400还可以包括输入输出设备、网络接入设备、总线等。

所称处理器401(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器401也可以是任何常规的处理器等，处理器401是前端模块化语法转换设备400的控制中心，利用各种接口和线路连接整个前端模块化语法转换设备400的各个部分。

存储器402可用于存储所述计算机可读指令，处理器401通过运行或执行存储在存储器402内的计算机可读指令或模块，以及调用存储在存储器402内的数据，实现前端模块化语法转换设备400的各种功能。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据前端模块化语法转换设备400计算机设备30的使用所创建的数据等。此外，存储器402可以包括硬盘、内存、插接式硬盘，智能存储卡(Smart MediaCard，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random AccessMemory，RAM)或其他非易失性/易失性存储器件。

所述前端模块化语法转换设备400集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一计算机可读存储介质中，该计算机可读指令在被处理器执行时，可实现上述各个方法实施例的步骤。

实施例4

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序；计算机程序被处理器执行以实现其他实施例中的前端模块化语法转换方法。

采用本申请实施例中的前端模块化语法转换设备及存储介质，配置转译为ES6模块化的代码环境；定位原AMD模块化项目中需要转换的require.js文件；匹配require.js文件中的关键字define，提取出function中的代码块；根据代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；搜索原AMD模块化中的原return关键字，通过export default语法，将原return内容导出，形成新的ES6模块化文件。

本申请可以自动将js的AMD模式写法，转换为ES6的模块化写法。在代码转换后，不增加整体项目的大小以及不影响用户体验的前提下，大大增强了代码的可阅读性以及可维护性。同时，很好的兼容了处理逻辑的代码与业务逻辑代码，不会影响原项目代码的执行。因此，大大减少了变量优化转换过程中带来的学习成本、时间成本以及人为代码编写过程中容易导致的异常错误等问题，解决了大项目进行语法优化迟迟无法落地的问题，真正做到了低成本以及自动化转换。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本发明可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种前端模块化语法转换方法，其特征在于，具体包括以下步骤：

配置转译为ES6模块化的代码环境；

定位原AMD模块化项目中需要转换的require.js文件；

匹配require.js文件中的关键字define，提取出function中的代码块；

根据所述代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；

搜索原AMD模块化中的原return关键字，通过export default语法，将所述原return内容导出，形成新的ES6模块化文件。

2.根据权利要求1所述的前端模块化语法转换方法，其特征在于，所述形成新的ES6模块化文件之后，还包括：根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化文件转换形成新的ES6模块化文件，并引入。

3.根据权利要求2所述的前端模块化语法转换方法，其特征在于，所述根据原AMD模块化之间的依赖引入关系，将同一个数组中关联的模块化转换形成新的ES6模块化并引入之后，还包括：将原AMD模块化项目中需要转换的require.js文件进行删除，保留新生成的ES6模块化文件，同时将所述文件名中的"_es6_module"去除。

4.根据权利要求1所述的前端模块化语法转换方法，其特征在于，所述配置转译为ES6模块化的代码环境，具体包括：

检查原AMD模块化项目中的package.json文件，是否包含Babel相关的转换代码仓库，若没有，则执行转换代码仓库命令进行babel相关代码库的安装。

5.根据权利要求1或4所述的前端模块化语法转换方法，其特征在于，所述配置转译为ES6模块化的代码环境，具体包括：

执行“npm install--save-dev@babel/core”命令，安装babel核心代码库，

执行“npm install@babel/preset-env--save-dev”命令，安装ES6转ES5的翻译规则。

6.根据权利要求1所述的前端模块化语法转换方法，其特征在于，所述定位原AMD模块化项目中需要转换的require.js文件之前，还包括预先配置所述require.js文件的文件地址。

7.根据权利要求6所述的前端模块化语法转换方法，其特征在于，所述预先配置所述require.js文件的文件地址，具体包括：

确定所述原AMD模块化项目的项目根目录地址；

从config.json配置文件中搜索所述require.js文件在项目中的目录地址，再与根目录地址进行拼接，形成完整的指向require.js文件的文件地址。

8.一种前端模块化语法转换系统，其特征在于，具体包括：

ES6模块化配置模块：用于配置转译为ES6模块化的代码环境；

js文件定位模块：用于定位原AMD模块化项目中需要转换的require.js文件；

匹配模块：用于匹配require.js文件中的关键字define，提取出function中的代码块；

ES6模块化转换模块：用于根据所述代码块生成进行ES6模块化转化，并在原文件名基础上加上"_es6_module"，生成一个新的require.js文件；

return内容导出模块：用于搜索原AMD模块化中的原return关键字，通过exportdefault语法，将所述原return内容导出，形成新的ES6模块化文件。

9.一种前端模块化语法转换设备，其特征在于，包括：

存储器：用于存储可执行指令；以及

处理器:用于与所述存储器连接以执行所述可执行指令从而完成权利要求1-7中任一项所述的前端模块化语法转换方法。

10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序；计算机程序被处理器执行以实现如权利要求1-7任一项所述的前端模块化语法转换方法。

Images