一种代码生成方法及设备与流程

本申请涉及web前端技术领域，尤其涉及一种代码生成方法及设备。

背景技术：

现有技术中，由于在构建技术文档系统，尤其是前端展示类组件文档时，通常需要将真实的组件接入效果展示给用户，并且将此样本demo的代码也展示出来，这样就需要提供两份代码，分别为demo的实现代码和展示给开发者的展示demo代码，现在的处理方式通常是将demo的实现代码拷贝一份到mdx(mdx是一种书写格式，允许你在markdown文档中无缝地插入jsx代码)文档中，比较繁琐，且容易更新不同步。

技术实现要素：

本申请的一个目的是提供一种代码生成方法及设备，避免了由于人工操作造成demo的原始代码(即实际代码)和预览代码不一致的问题，节省了开发成本，减少了维护成本，使得文档书写人员只需关心demo怎么集成到文档中，不需要关心预览代码的同步问题，从而提高了文档书写人员的工作效率。

根据本申请的一个方面，提供了一种代码生成方法，应用于web前端，其中，所述方法包括：

通过代码生成工具webpack遍历待处理的至少一个mdx文档；

对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码；

对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码；

基于所述组件的有效代码生成用于临时预览的预览文件；

将所述预览文件导入所述组件代码文件，生成用于临时预览的、新的组件代码文件。

进一步地，上述方法中，所述对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码，包括：

逐行读取所述组件对应的原始代码；

去除所述组件对应的原始代码中的无用代码，得到所述组件对应的有效代码。

进一步地，上述方法中，所述对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码，包括：

对所述mdx文档进行解析，得到组件代码文件及其实际引用路径，所述组件代码文件包括组件对应的原始代码和预览代码；

其中，所述基于所述组件的有效代码生成用于临时预览的预览文件，包括：

在所述mdx文档下，基于所述组件的有效代码生成用于临时预览的预览文件，同时，根据所述实际引用路径确定所述预览文件的路径，其中，所述预览文件的路径和所述实际引用路径均是所述mdx文档所在目录下的子目录且相互独立。

根据本申请的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述代码生成方法。

根据本申请的另一方面，还提供了一种代码生成的设备，其中，该设备包括：

一个或多个处理器；

计算机可读介质，用于存储一个或多个计算机可读指令，

当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述代码生成方法。

与现有技术相比，本申请通过代码生成工具webpack遍历待处理的至少一个mdx文档；对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码；对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码；基于所述组件的有效代码生成用于临时预览的预览文件；将所述预览文件导入所述组件代码文件，生成用于临时预览的、新的组件代码文件，避免了由于人工操作造成demo的原始代码(即实际代码)和预览代码不一致的问题，节省了开发成本，减少了维护成本，使得文档书写人员只需关心demo怎么集成到文档中，不需要关心预览代码的同步问题，从而提高了文档书写人员的工作效率。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出根据本申请一个方面的一种代码生成方法的流程示意图；

图2示出根据本申请一个方面的一种代码生成方法的中的实际流程示意图；

图3示出根据本申请一个方面的一种代码生成方法中的生成代码文件的代码示意图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

图1示出根据本申请一个方面的一种代码生成方法的流程示意图，该方法涉及web前端各类技术文档系统需要展示demo效果及demo代码预览的相关领域，其中，所述方法包括步骤s11、步骤s12、步骤s13、步骤s14及步骤s15，具体包括如下步骤：

步骤s11，通过代码生成工具webpack遍历待处理的至少一个mdx文档，如图2所示，待处理的每个所述mdx文档中包括demo的jsx可运行文和demo的使用方法及应用程序接口(applicationprogramminginterface，api)。

步骤s12，对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码，如图2所示，对mdx文档进行解析后，得到的组件代码文件demo.jsx包含demo对应的原始代码和用于开发者拷贝的预览代码，比如<code/>，其中，code代码预览组件所在的文件包含用于控制预览代码隐藏展示的按钮和供开发者预览和拷贝的demo代码。

步骤s13，对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码。

步骤s14，基于所述组件的有效代码生成用于临时预览的预览文件，比如图2中所示的demo.code.js。

步骤s15，将所述预览文件导入所述组件代码文件，生成用于临时预览的、新的组件代码文件，如图2所示的新的demo.jsx文件。

通过上述步骤s11至步骤s15，避免了由于人工操作造成demo的原始代码(即实际代码)和预览代码不一致的问题，节省了开发成本，减少了维护成本，使得文档书写人员只需关心demo怎么集成到文档中，不需要关心预览代码的同步问题，从而提高了文档书写人员的工作效率。

接着本申请的上述实施例，所述步骤s13对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码，具体包括：

逐行读取所述组件对应的原始代码；

去除所述组件对应的原始代码中的无用代码，得到所述组件对应的有效代码。

例如，对mdx文档进行解析，得到组件代码文件demo.jsx后，逐行读取组件代码文件demo.jsx中的组件对应的原始代码demo的文件内容，并按照过滤规则去除组件组件对应的原始代码中的无用代码，比如<code/>标签，得到该组件对应的有效代码，实现对组件对应的原始代码中的无用代码的过滤。

接着本申请的上述实施例，所述步骤s12对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码，具体包括：

对所述mdx文档进行解析，得到组件代码文件及其实际引用路径，所述组件代码文件包括组件对应的原始代码和预览代码；此处，还可以根据所述组件代码文件的实际引用路径获取该组件代码文件的名称。

其中，所述步骤s14基于所述组件的有效代码生成用于临时预览的预览文件，具体包括：

在所述mdx文档下，基于所述组件的有效代码生成用于临时预览的预览文件，同时，根据所述实际引用路径确定所述预览文件的路径，其中，所述预览文件的路径和所述实际引用路径均是所述mdx文档所在目录下的子目录且相互独立，即所述mdx文档所在目录是所述预览文件的路径和所述实际引用路径的父目录。

本实施例中，对mdx文档进行解析，得到组件代码文件demo.jsx后，逐行读取组件代码文件demo.jsx中的组件对应的原始代码demo的文件内容，并按照过滤规则去除组件组件对应的原始代码中的无用代码，比如<code|>标签，得到该组件对应的有效代码；并基于所述组件的有效代码生成用于临时预览的预览文件，比如图2中所示的demo.code.js，然后将所述预览文件demo.code.js放在临时目录temp下，即确定了所述预览文件的路径，其中，具体的实现代码如图3所示；然后，将目录temp下缓存的所述预览文件demo.code.js导入所述组件代码文件demo.jsx，生成用于临时预览的、新的组件代码文件，如图2所示的新的demo.jsx文件，实现了通过webpack打包构建工具，将组件对应的原始代码：demo代码逐行读取，并进行重新组织后，生成一个预览文件，并在所述组件代码文件中的所述组件对应的原始代码的第一行导入所述预览文件，生成用于临时预览的、新的组件代码文件demo.code.js。

在本申请的实施例中，如图2所示，通过码生成工具webpack遍历需待处理的mdx文档，并解析文档得到该mdx文档中的组件代码文件demo.jsx，通过读取组件代码文件demo.jsx文件中的组件对应的原始代码的内容生成临时的预览文件，并将预览文件导入到demo.jsx中，得到新的组件代码文件，然后，通过新的demo.jsx后面的<code/>标签执行导入的预览文件。不仅避免了由于人工操作造成demo的原始代码(即实际代码)和预览代码不一致的问题，还节省了开发成本，减少了维护成本，使得文档书写人员只需关心demo怎么集成到文档中，不需要关心预览代码的同步问题，从而提高了文档书写人员的工作效率。

根据本申请的另一方面，还提供了一种非易失性存储介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行时，使所述处理器实现如上述代码生成方法。

根据本申请的另一方面，还提供了一种用于代码生成的设备，其中，该设备包括：

一个或多个处理器；

计算机可读介质，用于存储一个或多个计算机可读指令，

当所述一个或多个计算机可读指令被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述代码生成方法。

在此，所述用于代码生成的设备中的各实施例的详细内容，具体可参见上述代码生成方法的实施例的对应部分，在此，不再赘述。

综上所述，本申请通过代码生成工具webpack遍历待处理的至少一个mdx文档；对所述mdx文档进行解析，得到组件代码文件，所述组件代码文件包括组件对应的原始代码和预览代码；对所述组件对应的原始代码进行有效过滤，得到所述组件对应的有效代码；基于所述组件的有效代码生成用于临时预览的预览文件；将所述预览文件导入所述组件代码文件，生成用于临时预览的、新的组件代码文件，避免了由于人工操作造成demo的原始代码(即实际代码)和预览代码不一致的问题，节省了开发成本，减少了维护成本，使得文档书写人员只需关心demo怎么集成到文档中，不需要关心预览代码的同步问题，从而提高了文档书写人员的工作效率。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(asic)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，ram存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。