CN116755698A - 基于cli的前端工程创建和升级系统及方法 - Google Patents

基于cli的前端工程创建和升级系统及方法 Download PDF

Info

Publication number
CN116755698A
CN116755698A CN202311057250.4A CN202311057250A CN116755698A CN 116755698 A CN116755698 A CN 116755698A CN 202311057250 A CN202311057250 A CN 202311057250A CN 116755698 A CN116755698 A CN 116755698A
Authority
CN
China
Prior art keywords
engineering
project
node
instruction
file
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.)
Granted
Application number
CN202311057250.4A
Other languages
English (en)
Other versions
CN116755698B (zh
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.)
Zhejiang Lab
Original Assignee
Zhejiang Lab
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 Zhejiang Lab filed Critical Zhejiang Lab
Priority to CN202311057250.4A priority Critical patent/CN116755698B/zh
Publication of CN116755698A publication Critical patent/CN116755698A/zh
Application granted granted Critical
Publication of CN116755698B publication Critical patent/CN116755698B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G06F8/65—Updates
    • 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
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/73—Program documentation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Library & Information Science (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了一种基于CLI的前端工程创建和升级系统及方法，本发明通过指令集模块中的目标工程的指令，传达到核心库的工具包中该指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到patch、merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。本发明创新性地提供了基于CLI的前端工程改造升级功能，设计并实现适合本发明应用场景的diff算法和merge算法，时间复杂度分别为O(n)和O(m+n)。

Description

基于CLI的前端工程创建和升级系统及方法
技术领域
本发明涉及前端工程创建领域，尤其涉及一种基于CLI的前端工程创建和升级系统及方法。
背景技术
在GUI已经全面普及的今天，命令行界面CLI不但没有被各种操作系统摒弃反而还在不断地加强和优化，主要原因是因为CLI仍然有丰富的应用场景和优势：
1）因为不需要处理图形和鼠标的交互，CLI更节省系统资源，拥有比GUI更快的操作速度；
2）支持多用户登录；
3）支持批量操作；
4）针对特定的设备和场景，CLI是更好的选择。比如针对不间断运行的服务器、交换机和路由器等电信设备，运维工程师使用Shell等CLI工具来进行维护是更方便高效的一种方式；又比如对于Vue、Flutter等开发框架和工具，专门开发一套GUI是耗时耗力、得不偿失的事情，而开发CLI工具是一个更加快捷的选择。
在软件开发领域，脚手架指的是为减少重复性工作而开发的命令行工具。脚手架存在的意义是让项目的“搭建-开发-部署”更加快速及规范。脚手架的核心功能就是利用模板来快速搭建一个完整的项目结构，开发人员可以很方便地在快速搭建出来的工程上进行开发，从而让开发人员专注于业务代码本身，而不需要关心环境配置、需要集成的工具等等信息。
随着前端工程化的概念越来越深入人心，现在搭建一个前端工程除了配置基本的前端开发框架之外，还需要配置打包构建工具、启动服务、热更新；为了在编写代码的过程中让编辑器帮助开发人员查错以及规范代码书写，还需要引入ESlint等代码规范工具；当然还可能需要配置单元测试，这对开发人员来说，无疑是复杂且繁琐的，尤其对新手程序员来说，更是无从下手。
而从团队协作的角度来说，相似的业务极有可能具有相似的代码结构，如果对相似的业务每次都重新开发一遍，无疑是对资源的一种浪费。
前端脚手架的出现，让这一切都简单化了。一个命令、一个回车，就能搭建起一个新的工程、并让这个工程的服务启动起来；就能一键生成代码结构，让开发人员无需重复开发相似的代码，统一的模板、项目结构和代码书写规范也有利于项目的后期维护。极大地提高了开发人员的工作效率和团队协作的便利性。
然而，现有前端工程创建脚手架只支持基于固定模板的工程、模块或页面的创建，而不支持工程、模块或页面的改造升级，改造升级往往还是依赖于开发人员的手动开发。这无疑降低了开发人员的工作效率、工程的可维护性以及团队协作的便利性。
如果我们考虑实现工程、模块或页面的改造升级，就需要考虑对比找出工程结构和文件的差异（diff），并合并文件（merge）。
我们可以借鉴React Virtual DOM的思想，将每个文件视为一个节点，那么一个工程结构就是一颗多叉树，对比找出两个工程结构的差异的过程就转换为对比找出两颗多叉树的差异的过程。
现有diff算法有：1）传统的对2颗多叉树的比较，时间复杂度是O(n 3)；2）React团队提出的应用在virtual DOM上的diff算法，时间复杂度是O(n)。我们借鉴React VirtualDOM的diff算法，只比较多叉树的同层节点，时间复杂度是O(n)，其中n是树的节点数。
对两个文件的merge在借鉴git的三路合并算法的基础上，进行了更适合本发明的设计：维护一个历史模板池，基准文件有且仅有一个——就是当时创建某个工程时该工程所基于的模板工程。时间复杂度是O(m+n)，其中m和n分别是两个文件的行数。
现有的前端工程创建脚手架只支持基于固定模板的工程、模块或页面的创建，而不支持工程、模块或页面的改造升级，改造升级往往还是依赖于开发人员的手动开发。React Virtual DOM的diff算法是应用在虚拟DOM上的，该算法不适合直接移植到应用场景上，需要在其基础上进行改造；git的递归三路合并算法是应用在git提交的分支合并上的；该算法不适合直接移植到我们的应用场景上，需要在借鉴其思想的基础上提出一种适合的算法。
发明内容
本发明目的在于针对现有技术的不足，提出一种基于CLI的前端工程创建和升级系统及方法。
本发明的目的是通过以下技术方案来实现的：第一方面，本发明提供了一种基于CLI的前端工程创建和升级系统，该系统包括核心库模块和指令集模块；
所述核心库模块包括工具包、插件和模板；其中工具包包括创建工程、改造升级工程和创建子模块的工具文件；插件包括对两个文件进行合并文件merge和对两个工程结构进行寻找文件差异diff的插件；模板包括单页应用SPA工程模板、多页应用MPA工程模板和子模块模板；
所述指令集模块包括新建指令集和改造升级指令集；新建指令集与工具包中的创建工程和创建子模块的工具文件对应，改造升级指令集与工具包中的改造升级工程的工具文件对应；新建指令集包括新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令；改造升级指令集包括将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和将现有的MPA工程进行升级的指令；
用户通过指令集模块中的目标工程的指令，传达到核心库模块的工具包中该指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到存储差异的变量patch和需要进行merge处理的信息变量merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。
进一步地，用户操作时，只能选择指令集模块中包含的指令。
进一步地，用户输入指令后，判断该指令是新建指令，还是对目标工程进行改造升级的指令；
如果是新建指令，进一步判断是新建SPA工程、MPA工程还是子模块；如果是新建SPA工程，则拷贝SPA模板生成一个SPA工程；如果是新建MPA工程，则拷贝MPA模板生成一个MPA工程；如果是新建子模块，则拷贝子模块模板至指令执行目录、生成一个子模块；如果没有命中任何指令，则结束执行；
如果是改造升级指令，进一步判断当前工程是SPA工程还是MPA工程；
如果是SPA工程，判断是将当前工程改造为MPA工程，还是对SPA工程进行升级；如果是将当前工程改造为MPA工程，则直接将目标工程放入MPA模板module目录下作为一个子模块；如果是对SPA工程进行升级，则对目标工程和模板进行diff，找到差异后对将SPA工程模板与当前SPA工程文件进行merge，完成当前SPA工程的升级；
如果是MPA工程，判断是将当前工程改造为SPA工程，还是对MPA工程进行升级；如果是将当前工程改造为SPA工程，则选择一个子模块作为主模块，其余子模块放入页面pages或组件components目录下作为组件；如果是对MPA工程进行升级，则对目标工程和模板进行diff，找到差异后将MPA工程模板与当前MPA工程文件进行merge，完成当前MPA工程的升级。
进一步地，其中对目标工程和模板进行diff的具体步骤如下：
将目录看作一颗多叉树，对目标工程和模板的diff就是对两颗多叉树进行diff；一旦两颗多叉树的节点有差异，则认为这个节点变动了，不再继续比较该节点下的子节点，而是将整个该节点及其子节点作为新增结构标记为需新增的节点，或作为删除结构标记为需删除的节点；
diff的流程如下：
1）前置操作：
1.1）维护一个池子pool，池子中是不进行处理的文件夹和文件；用户需输入放入pool的文件夹和文件信息；
1.2）将目录划分为2个区：业务区和非业务区；用户需输入划分为业务区的文件夹和文件信息，没被划入的即非业务区；
1.3）创建一个变量patch，用来存储两棵树比较后的差异，以供后续操作；
1.4）创建一个变量merge_leafs，用来标记存储需要进行merge处理的叶子节点信息；
2）逐层比较两颗多叉树的节点，如果已经完成所有层的所有节点的比较，进入步骤8），否则进入步骤3）；
3）对某一层的目标工程的节点和模板工程的节点逐个遍历比较，优先遍历目标工程的节点，判断当前遍历到的目标工程的节点如果也存在于同层的模板工程，则判断该节点是否是叶子节点，是叶子节点则进入步骤4），否则进入步骤5）；如果同层的模板工程中不存在该节点，则进入步骤6）；
当目标工程的节点遍历完成，而模板工程中仍有未被遍历到的节点时，这些节点就只存在于模板工程，而不存在于目标工程，遍历模板工程中未被遍历到的节点，进入步骤7）；
4）如果是叶子节点，进一步判断该叶子节点如果属于业务区，则将该节点打上merge的标记，并将标记信息推入merge_leafs，重新进入步骤2）；如果该叶子节点属于非业务区，则将该节点打上覆盖cover的标记，并将标记信息推入merge_leafs，重新进入步骤2）；
5）如果不是叶子节点，则不进行任何标记操作，重新进入步骤2）；
6）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为删除，并将标记信息推入patch，重新进入步骤2）；
7）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为增加，并将标记信息推入patch，重新进入步骤2）；
8）输出变量patch和merge_leafs。
进一步地，应用patch、merge_leafs和文件merge的具体步骤分别如下：
获得patch和merge_leafs后，再次遍历目标工程和模板工程的多叉树结构，执行下列操作：
1）如果当前节点在patch里被标记为增加，则将需增加的节点及其子节点增加到相应位置；
2）如果当前节点在patch里被标记为删除，则将需要删除的节点及其子节点从相应位置上移除；
3）对没有被标记的叶子节点，判断该节点是文件夹还是文件，如果是文件夹，不再做任何操作；
4）如果是文件，则需根据merge_leafs来进行相应操作，如果在merge_leafs里没有当前节点的标记，则无须做任何操作；
5）如果当前节点在merge_leafs里被标记为cover，则用模板工程的该文件内容覆盖模板工程的该文件内容；
6）如果当前节点在merge_leafs里被标记为merge，则对目标工程的该文件和模板工程的该文件进行merge，使用三路合并算法。
进一步地，该系统还包括配置文件模块，所述配置文件模块包括系统所需的依赖资源、代码规范、提交规范和打包发布的配置信息。
进一步地，所述核心库模块中发的插件还包括判断文件或文件夹是否存在、判断当前是SPA还是MPA工程、拷贝文件名以及拷贝文件内容的对应插件。
第二方面，本发明还提供了一种基于CLI的前端工程创建和升级方法，该方法包括以下步骤：
（1）创建工具包、插件和模板，所述工具包包括创建工程、改造升级工程和创建子模块的工具文件；所述插件包括对两个文件进行merge和对两个工程结构进行diff的插件；所述模板包括SPA工程模板、MPA工程模板和子模块模板；
（2）判断目标工程的指令是新建指令还是改造升级指令；所述新建指令包括新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令，与工具包中的创建工程和创建子模块的工具文件对应；所述改造升级指令包括将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和将现有的MPA工程进行升级的指令，与工具包中的改造升级工程的工具文件对应；
（3）用户选择工具包中目标工程的指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到存储差异的变量patch和需要进行merge处理的信息变量merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。
第三方面，本发明还提供了一种基于CLI的前端工程创建和升级装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现所述的一种基于CLI的前端工程创建和升级方法。
第四方面，本发明还提供了一种计算机可读存储介质，其上存储有程序，所述程序被处理器执行时，实现所述的一种基于CLI的前端工程创建和升级方法。
本发明的有益效果：本发明创新性地提供了基于CLI的前端工程改造升级功能，让开发人员可以通过一条指令就能完成繁复的工程创建和改造升级工作，把开发人员从以往的手动开发中解脱出来，且该系统让团队实现工程层面的统一，极大地提高了工程人员的工作效率和团队协作的效率，本发明设计并实现适合本发明应用场景的diff算法和merge算法，时间复杂度分别为O(n)和O(m+n)。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动前提下，还可以根据这些附图获得其他附图。
图1为系统的架构图。
图2为系统流程图。
图3为目录转换为多叉树示意图。
图4为传统的两颗多叉树比较示意图。
图5为diff流程图。
图6为本发明两颗多叉树比较示意图。
图7为文件三路合并算法流程图。
图8为health-fed工程目录结构转换的多叉树示意图。
图9为模板工程的MPA工程模板转换的多叉树结构示意图。
图10是本发明提供的一种基于CLI的前端工程创建和升级装置的结构图。
具体实施方式
以下结合附图对本发明具体实施方式作进一步详细说明。
本发明提供的一种基于CLI的前端工程创建和升级系统，主要包括2个功能：1）新建一个前端工程或子模块；2）对已有前端工程进行改造升级。系统的架构图如图1所示。
本发明的系统架构由三部分组成：配置文件模块、核心库模块和指令集模块。
配置文件模块包括系统所需的依赖资源、代码规范、提交规范和打包发布等的配置信息。
核心库模块又包括工具包、插件和模板。其中工具包包括创建工程、改造升级工程和创建子模块等工具文件；插件有判断文件或文件夹是否存在、判断当前是SPA还是MPA工程、拷贝文件名、拷贝文件内容、对两个文件进行merge和对两个工程结构进行diff等插件；模板包括SPA工程模板、MPA工程模板和子模块模板。
指令集模块包括新建指令集和改造升级指令集。新建指令集有新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令；改造升级指令集有将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和蒋现有的MPA工程进行升级的指令。
用户通过从指令集中选取并执行所需的指令，来使系统进行满足其需求的操作。用户只能输入本系统提供的指令，而不能自己创造不存在于指令集中的指令。当用户输入存在于指令集的指令后，系统会将该指令传达到核心库的工具包中该指令对应的工具文件。随后调用插件和模板来创建一个新的前端工程或对已有前端工程进行改造升级。
如图2所示，用户输入指令后，系统判断该指令是新建指令，还是对目标工程进行改造升级的指令。
如果是新建指令，进一步判断是新建SPA工程、MPA工程还是子模块。如果是新建SPA工程，则拷贝SPA模板生成一个SPA工程；如果是新建MPA工程，则拷贝MPA模板生成一个MPA工程；如果是新建子模块，则拷贝子模块模板至指令执行目录、生成一个子模块。如果没有命中任何指令，则结束执行。
如果是改造升级指令，进一步判断当前工程是SPA工程还是MPA工程。
如果是SPA工程，判断是将当前工程改造为MPA工程，还是对SPA工程进行升级。如果是将当前工程改造为MPA工程，则直接将目标工程放入MPA模板module目录下作为一个子模块；如果是对SPA工程进行升级，则对目标工程和模板进行diff，找到差异后对将SPA工程模板与当前SPA工程文件进行merge，完成当前SPA工程的升级。
如果是MPA工程，判断是将当前工程改造为SPA工程，还是对MPA工程进行升级。如果是将当前工程改造为SPA工程，则选择一个子模块作为主模块，其余子模块放入pages或components目录下作为组件；如果是对MPA工程进行升级，则对目标工程和模板进行diff，找到差异后将MPA工程模板与当前MPA工程文件进行merge，完成当前MPA工程的升级。
其中“对目标工程和模板进行diff”和“应用patch、merge_leafs和文件merge”的具体步骤分别如下。
1.对目标工程和模板进行diff
如图3所示，我们可以将目录看作一颗多叉树，那么对目标工程和模板的diff就是对两颗多叉树进行diff。如图4所示，传统的对两颗多叉树进行diff的方法是循环遍历两棵树的每个节点、进行一一比较，这个算法的时间复杂度目前最优是O(n 3)。
但如果我们只对多叉树的同一层进行比较、而不再进行一一比较，一旦两颗节点有差异，我们就认为这个节点变动了，不再继续比较该节点下的子节点，而是将整个该节点及其子节点作为新增结构标记为需新增的节点或作为删除结构标记为需删除的节点。
diff的流程图如图5所示。
1）前置操作：
1.1）维护一个池子pool，池子中是不进行处理的文件夹和文件；用户需输入放入pool的文件夹和文件信息；
1.2）将目录划分为2个区：业务区和非业务区；用户需输入划分为业务区的文件夹和文件信息，没被划入的即非业务区；
1.3）创建一个变量patch，用来存储两棵树比较后的差异，以供后续操作；
1.4）创建一个变量merge_leafs，用来标记存储需要进行merge处理的叶子节点信息。
2）逐层比较两颗多叉树的节点，如果已经完成所有层的所有节点的比较，进入步骤8），否则进入步骤3）；
3）对某一层的目标工程的节点和模板工程的节点逐个遍历比较，优先遍历目标工程的节点，判断当前遍历到的目标工程的节点如果也存在于同层的模板工程，则判断该节点是否是叶子节点，是叶子节点则进入步骤4），否则进入步骤5）；如果同层的模板工程中不存在该节点，则进入步骤6）；
当目标工程的节点遍历完成，而模板工程中仍有未被遍历到的节点时，这些节点就只存在于模板工程、而不存在于目标工程，遍历模板工程中未被遍历到的节点，进入步骤7）；
4）如果是叶子节点，进一步判断该叶子节点如果属于业务区，则将该节点打上merge的标记，并将标记信息推入merge_leafs，重新进入步骤2）；如果该叶子节点属于非业务区，则将该节点打上cover的标记，并将标记信息推入merge_leafs，重新进入步骤2）；
5）如果不是叶子节点，则不进行任何标记操作，重新进入步骤2）；
6）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为删除，并将标记信息推入patch，重新进入步骤2）；
7）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为增加，并将标记信息推入patch，重新进入步骤2）；
8）输出变量patch和merge_leafs，以供后续“应用patch、merge_leafs和文件merge”的操作。
以图3、图4的工程目录和模板工程为例，举例说明具体的diff过程，如图6所示：
1）在进行diff前需要完成以下前置操作：
1.1）将文件4.css的信息放入存储不进行处理的文件夹和文件的池子pool中；
1.2）将文件夹1及其子节点划分为业务区，其他为非业务区；
1.3）创建一个变量patch，用来存储两棵树比较后的差异，以供后续操作；
1.4）创建一个变量merge_leafs，用来标记存储需要进行merge处理的叶子节点信息。
2）比较第1层。第1层目标工程的目录树存在文件夹0，模板工程同样存在文件夹0，那么继续比较节点0的子节点；
3）比较节点0的子节点的第1层。目标工程的目录树存在节点1、2、3和4.css，模板工程的目录树存在节点1、3.html和4.css。比较发现模板工程里没有目标工程的名称为2的节点，因为节点2及其子节点被划分在非业务区，将目标工程的名称为2的节点标记为待删除节点、并且不再关心其子节点，将此标记推入patch；比较发现模板里没有目标工程的名称为3的节点，因为节点3及其子节点被划分在非业务区，将目标工程的名称为3的节点标记为待删除节点、并且不再关心其子节点，将此标记推入patch；比较发现目标工程里没有模板的名称为3.html的节点，因为节点3.html及其子节点被划分在非业务区，将模板的名称为3.html的节点及其子节点标记为待增加节点、并且不再关心其子节点，将此标记推入patch；发现文件4.css存在于池子pool中，不再对文件4.css进行比较和处理；剩下的名称为1的节点，同时存在于目标工程和模板的树中，因为名称为1的节点不是叶子节点，不对其进行任何标记，继续对这两个节点的子节点进行比较。
4）比较节点1的子节点的第1层。目标工程和模板工程的目录树在节点1的子节点的第1层都存在且只存在节点5，且结点5不是子节点，不对其进行任何标记，继续比较节点5的子节点。
5）比较节点5的子节点的第1层。目标工程的目录树存在节点6.vue，模板工程的目录树存在节点6.vue和2。比较发现目标工程里没有模板的名称为2的节点，因为名称为2的节点被划分在业务区，所以忽略节点2及其子节点的变化，不做任何标记和处理，同时也不再关心其子节点；剩下的名称为6.vue的节点，同时存在于目标工程和模板的树中，因为节点6.vue是叶子节点，且其被划分在业务区，则将该节点打上merge标记，并将此标记信息推入merge_leafs。
6）至此，所有节点都已经比较完毕，结束diff，并得到diff后的差异patch和合并标记变量merge_leafs。
以上算法的diff的时间复杂度为O(n)。相较于传统的时间复杂度为O(n 3)的diff算法，本发明的算法的时间复杂度得到了极大的提升。
其中对两个文件的三路合并算法的具体流程如图7所示。
6.1）从目标工程读取待合并的文件A、从模板工程读取文件B及从历史模板存储区读取基准文件C。
其中历史模板存储区存储了历史上所有的模板工程的文件，比如文件A所在工程P是通过文件C所在的模板工程M生成的，当前最新的模板工程为S，那么模板工程M里的文件就是比较目标工程P和最新模板工程S之间的文件的基准文件。
6.2）创建一个临时文件tmp，用来临时存储合并后的文件内容。
6.3）逐行比对文件A和文件B的内容。
6.4）如果当前比对的内容相同，则将文件A的该行内容复制到临时文件tmp中，进入步骤6.6。
6.5）如果当前比对的内容不同，则需要根据基准文件C来判断接下来要做的合并操作：
6.5.1）如果文件A和文件C的该行内容相同，意味着文件B的该行内容与文件A和C都不同、文件B的该行内容发生了改变，那么采用文件B的该行内容，复制文件B的该行到临时文件tmp，进入步骤6.6；
6.5.2）如果文件A和文件C的该行内容不相同，文件B和文件C的该行内容相同，意味着文件A的该行内容与文件B和C都不同、文件A的该行内容发生了改变，那么采用文件A的该行内容，复制文件A的该行到临时文件tmp，进入步骤6.6；
6.5.3）如果文件A和文件B都与文件C的该行内容不相同，意味着文件A和文件B的该行内容都发生了改变、它们存在冲突，需要开发人员手动选择采用哪个行内容；
6.5.4）开发人员手动选择文件A或B的该行后，将该行内容添加到临时文件tmp中，进入步骤6.6。
6.6）判断是否已经比对完文件A和B的所有行，如果还没有比对完，则再次进入步骤6.3；如果比对完成，进入步骤6.7。
6.7）用文件tmp的内容覆盖文件A的内容，至此得到的文件A为目标工程的待合并文件与最新的模板文件合并后的文件。
假设文件A为m行、文件B为n行，那么合并算法的时间复杂度为O(m+n)。
应用示例：以下以一个支持多平台的MPA工程health-fed为例进行详细说明。
1 工程目录结构转换为多叉树
如图8所示，是health-fed工程目录结构转换的多叉树结构，如图9所示，是MPA工程模板转换的多叉树结构。
2 将health-fed工程改造为SPA工程
将MPA工程改造为SPA工程，只需选择一个子模块作为主模块，其余子模块放入src/components目录下作为组件即可。我们选择将user子模块作为主模块。
3 将health-fed工程进行升级
将MPA工程health-fed升级为最新的MPA工程的过程如下：
1）对health-fed与最新的MPA模板工程进行diff
1.1）设置dist、public和mock节点及其子节点为不处理节点；划分src及其子节点为业务区，那么health-fed的neiMockConfig.js、package.json、README.md、vue.config.js和nginx.js等节点，以及MPA模板工程的.cz-config.js、babel.config.js、neiMockConfig.js、.eslintrc.js、commitlint.config.js、package.json、vue.config.js、.gitignore.js、jsconfig.js、README.md和.husky节点及其子节点为非业务区；创建变量patch用来标记存储两棵树比较后的差异；创建变量merge_leafs用来标记存储需要进行merge处理的叶子节点信息。
1.2）比较health-fed根节点下的第1层。第1层health-fed的目录树存在节点dist、public、mock、src、neiMockConfig.js、package.json、README.md和vue.config.js，MPA模板工程存在节点.cz-config.js、babel.config.js、neiMockConfig.js、.eslintrc.js、commitlint.config.js、package.json、vue.config.js、.gitignore.js、jsconfig.js、.husky、.mock、public和src。因为dist、public和mock节点及其子节点被标记为不处理，所以不再对这几个节点及其子节点进行比较；对剩余的该层节点比较发现，MPA模板工程里没有health-fed的名称为nginx.js的节点，因为该节点被划分在非业务区，将该节点标记为待删除节点、并且不再关心其子节点，将此标记推入patch；比较发现health-fed没有MPA模板工程的名称为.husky、.cz-config.js、babel.config.js、.eslintrc.js、commitlint.config.js、.gitignore.js和jsconfig.js的节点，因为这些节点被划分在非业务区，将这些节点标记为待增加节点、并且不再关心其子节点，将此标记推入patch；剩下的名称为neiMockConfig.js、package.json、README.md、vue.config.js和src的节点，同时存在于health-fed和MPA模板工程的树中，因为neiMockConfig.js、package.json、README.md和vue.config.js节点是叶子节点，且被划分在非业务区，将这些节点打上cover标记，并将此标记信息推入merge_leafs；因为src不是叶子节点，不对其进行任何标记，继续对这两个节点的子节点进行比较。
1.3）比较节点src的子节点的第1层。比较发现MPA模板工程没有health-fed的名称为modules的节点，因为它们都处在业务区，所以忽略节点modules的变化，不做任何标记和处理，同时不再关心其子节点；剩下的名称为api、assets和common的节点，同时存在于health-fed和MPA模板工程中，因为它们不是叶子节点，不对它们进行任何标记，继续分别对它们的子节点进行比较。
1.4）比较节点api的子节点的第1层。比较发现名称为index.js的节点同时存在于health-fed和MPA模板工程，且该节点为叶子节点，因为处于业务区，所以将节点index.js打上merge标记，并将此标记信息推入merge_leafs。
1.5）比较节点assets的子节点的第1层。比较发现MPA模板工程没有health-fed的名称为logo.png和css的节点，因为处于业务区，所以忽略节点logo.png和css的变化，不作任何标记和处理，同时不再关心其子节点。
1.6）比较节点common的子节点的第1层。比较发现MPA模板工程没有health-fed的名称为filters、utils和components的节点，因为处于业务区，所以忽略节点filters、utils和components的变化，不作任何标记和处理，同时不再关心其子节点。
1.7）至此，所有节点都已经比较完毕，结束diff，并得到diff后的差异变量patch和合并标记变量merge_leafs。
2）应用patch和merge_leafs，对文件进行合并。
2.1）再次逐行遍历health-fed和MPA模板工程的多叉树结构。遍历到第2层，发现节点nginx.js在patch中被标记为删除，则将节点nginx.js从health-fed中删除；发现节点.husky、.cz-config.js、babel.config.js、.eslintrc.js、commitlint.config.js、.gitignore.js和jsconfig.js在patch中被标记为增加，则将这些节点及其子节点添加到节点health-fed下作为其子节点；发现节点neiMockConfig.js、package.json、README.md和vue.config.js在merge_leafs中被标记为cover，则用MPA模板工程的这些文件内容覆盖health-fed中的对应文件的内容。
2.2）遍历到第4层，发现节点health-fed/src/api/index.js在merge_leafs中被标记为merge，则对health-fed和MPA模板工程中的这两个文件进行merge。
2.2.1）从health-fed读取index.js文件、记为文件A，其内容如下：
[01] import Ajax from ‘@common/utils/ajax’;
[02] Ajax.defaults.baseURL = ‘api’;
[03] export default {
[04] logout() {
[05] return Ajax.post(
[06] ‘/userLogin/logout’,
[07] undefined,
[08] { baseURL: ‘api’ },
[09] );
[10] },
[11] };
从MPA模板工程读取index.js文件、记为文件B，其内容如下：
[01] import Ajax from ‘@common/utils/ajax’;
[02] export default {
[03] login({ username, password }) {
[04] return Ajax.post('/userLogin/login', { username, password });
[05] },
[06] logout() {
[07] return Ajax.post(‘/userLogin/logout');
[08] },
[09] getUserInfo() {
[10] return Ajax.get(‘/userInfo/select');
[11] },
[12] getOrganizations() {
[13] return Ajax.get(‘/collaboration/organization');
[14] },
[15] getDepartments(organizationCode) {
[16] return Ajax.get('/collaboration/department', { params: {organizationCode } });
[17] },
[18] sendEmail({ email, checkStatus }) {
[19] // checkStatus: 0 - 无须校验该邮箱是否已注册
[20] return Ajax.post('/userLogin/sendEmail', { email, checkStatus});
[21] },
[22] register(data) {
[23] return Ajax.post('/userRegister/registerSubmit', data);
[24] },
[25] resetPwd(data) {
[26] return Ajax.post('/userLogin/resetPasswordByCode', data);
[27] },
[28] };
同时从历史模板存储区找到生成health-fed的模板工程、从中读取mpa/__projectName__/src/api/index.js文件、记为文件C，其内容如下：
[01] import Ajax from ‘@common/utils/ajax’;
[02] Ajax.defaults.baseURL = ‘api’;
[03] export default {
[04] logout() {
[05] return Ajax.post(
[06] ‘/userLogin/logout’,
[07] undefined,
[08] { baseURL: ‘api’ },
[09] );
[10] },
[11] };
2.2.2）创建一个临时文件tmp，用来临时存储合并后的文件内容。
2.2.3）逐行比对文件A和文件B的内容。因为文件A和文件B的第1行和第2行的内容分别相同，所以将文件A的第1行和第2行内容复制到临时文件tmp中。
2.2.4）逐行对比发现文件A和文件B的第3行到第11行的内容不同，那么需要根据基准文件C来做进一步判断。比较发现文件A和基准文件C的第3行到第11行的内容相同，那么采用文件B的第3行到第11行的内容，复制文件B的第3行到第11行的内容到临时文件tmp中。
2.2.5）逐行对比发现文件A和文件B的第12行内容相同，于是将文件A的第12行内容复制到临时文件tmp中。
2.2.6）逐行对比发现文件A和文件B的第13行的内容不同，那么需要根据基准文件C来做进一步判断。比较发现文件A和基准文件C的第13行的内容相同，那么采用文件B的第13行的内容，复制文件B的第13行的内容到临时文件tmp中。
2.2.7）因为文件A已经对比完成，将文件B从第14行起的剩余内容全部复制到临时文件tmp中。
2.2.8）用临时文件tmp的内容覆盖文件A的内容，至此得到的文件A为health-fed的health-fed/src/api/index.js文件与最新的MPA模板工程的mpa/__projectName__/src/api/index.js文件合并后的文件，其内容如下：
[01] import Ajax from ‘@common/utils/ajax’;
[02] export default {
[03] login({ username, password }) {
[04] return Ajax.post('/userLogin/login', { username, password });
[05] },
[06] logout() {
[07] return Ajax.post(‘/userLogin/logout');
[08] },
[09] getUserInfo() {
[10] return Ajax.get(‘/userInfo/select');
[11] },
[12] getOrganizations() {
[13] return Ajax.get(‘/collaboration/organization');
[14] },
[15] getDepartments(organizationCode) {
[16] return Ajax.get('/collaboration/department', { params: {organizationCode } });
[17] },
[18] sendEmail({ email, checkStatus }) {
[19] // checkStatus: 0 - 无须校验该邮箱是否已注册
[20] return Ajax.post('/userLogin/sendEmail', { email, checkStatus});
[21] },
[22] register(data) {
[23] return Ajax.post('/userRegister/registerSubmit', data);
[24] },
[25] resetPwd(data) {
[26] return Ajax.post('/userLogin/resetPasswordByCode', data);
[27] },
[28] };
另一方面，本发明还提供了一种基于CLI的前端工程创建和升级方法，该方法包括以下步骤：
（1）创建工具包、插件和模板，所述工具包包括创建工程、改造升级工程和创建子模块的工具文件；所述插件包括对两个文件进行merge和对两个工程结构进行diff的插件；所述模板包括SPA工程模板、MPA工程模板和子模块模板；
（2）判断目标工程的指令是新建指令还是改造升级指令；所述新建指令包括新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令，与工具包中的创建工程和创建子模块的工具文件对应；所述改造升级指令包括将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和将现有的MPA工程进行升级的指令，与工具包中的改造升级工程的工具文件对应；
（3）用户选择工具包中目标工程的指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到存储差异的变量patch和需要进行merge处理的信息变量merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。
与前述一种基于CLI的前端工程创建和升级方法的实施例相对应，本发明还提供了一种基于CLI的前端工程创建和升级装置的实施例。
参见图10，本发明实施例提供的一种基于CLI的前端工程创建和升级装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，用于实现上述实施例中的一种基于CLI的前端工程创建和升级方法。
本发明提供的一种基于CLI的前端工程创建和升级装置的实施例可以应用在任意具备数据处理能力的设备上，该任意具备数据处理能力的设备可以为诸如计算机等设备或装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在任意具备数据处理能力的设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图10所示，为本发明提供的一种基于CLI的前端工程创建和升级装置所在任意具备数据处理能力的设备的一种硬件结构图，除了图10所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的任意具备数据处理能力的设备通常根据该任意具备数据处理能力的设备的实际功能，还可以包括其他硬件，对此不再赘述。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本发明实施例还提供一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时，实现上述实施例中的一种基于CLI的前端工程创建和升级方法。
所述计算机可读存储介质可以是前述任一实施例所述的任意具备数据处理能力的设备的内部存储单元，例如硬盘或内存。所述计算机可读存储介质也可以是任意具备数据处理能力的设备的外部存储设备，例如所述设备上配备的插接式硬盘、智能存储卡（Smart Media Card，SMC）、SD卡、闪存卡（Flash Card）等。进一步的，所述计算机可读存储介质还可以既包括任意具备数据处理能力的设备的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述任意具备数据处理能力的设备所需的其他程序和数据，还可以用于暂时地存储已经输出或者将要输出的数据。
上述实施例用来解释说明本发明，而不是对本发明进行限制，在本发明的精神和权利要求的保护范围内，对本发明作出的任何修改和改变，都落入本发明的保护范围。

Claims (10)

1.一种基于CLI的前端工程创建和升级系统，其特征在于，该系统包括核心库模块和指令集模块；
所述核心库模块包括工具包、插件和模板；其中工具包包括创建工程、改造升级工程和创建子模块的工具文件；插件包括对两个文件进行合并文件merge和对两个工程结构进行寻找文件差异diff的插件；模板包括单页应用SPA工程模板、多页应用MPA工程模板和子模块模板；
所述指令集模块包括新建指令集和改造升级指令集；新建指令集与工具包中的创建工程和创建子模块的工具文件对应，改造升级指令集与工具包中的改造升级工程的工具文件对应；新建指令集包括新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令；改造升级指令集包括将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和将现有的MPA工程进行升级的指令；
用户通过指令集模块中的目标工程的指令，传达到核心库模块的工具包中该指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到存储差异的变量patch和需要进行merge处理的信息变量merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。
2.根据权利要求1所述的一种基于CLI的前端工程创建和升级系统，其特征在于，用户操作时，只能选择指令集模块中包含的指令。
3.根据权利要求1所述的一种基于CLI的前端工程创建和升级系统，其特征在于，用户输入指令后，判断该指令是新建指令，还是对目标工程进行改造升级的指令；
如果是新建指令，进一步判断是新建SPA工程、MPA工程还是子模块；如果是新建SPA工程，则拷贝SPA模板生成一个SPA工程；如果是新建MPA工程，则拷贝MPA模板生成一个MPA工程；如果是新建子模块，则拷贝子模块模板至指令执行目录、生成一个子模块；如果没有命中任何指令，则结束执行；
如果是改造升级指令，进一步判断当前工程是SPA工程还是MPA工程；
如果是SPA工程，判断是将当前工程改造为MPA工程，还是对SPA工程进行升级；如果是将当前工程改造为MPA工程，则直接将目标工程放入MPA模板module目录下作为一个子模块；如果是对SPA工程进行升级，则对目标工程和模板进行diff，找到差异后对将SPA工程模板与当前SPA工程文件进行merge，完成当前SPA工程的升级；
如果是MPA工程，判断是将当前工程改造为SPA工程，还是对MPA工程进行升级；如果是将当前工程改造为SPA工程，则选择一个子模块作为主模块，其余子模块放入页面pages或组件components目录下作为组件；如果是对MPA工程进行升级，则对目标工程和模板进行diff，找到差异后将MPA工程模板与当前MPA工程文件进行merge，完成当前MPA工程的升级。
4.根据权利要求3所述的一种基于CLI的前端工程创建和升级系统，其特征在于，其中对目标工程和模板进行diff的具体步骤如下：
将目录看作一颗多叉树，对目标工程和模板的diff就是对两颗多叉树进行diff；一旦两颗多叉树的节点有差异，则认为这个节点变动了，不再继续比较该节点下的子节点，而是将整个该节点及其子节点作为新增结构标记为需新增的节点，或作为删除结构标记为需删除的节点；
diff的流程如下：
1）前置操作：
1.1）维护一个池子pool，池子中是不进行处理的文件夹和文件；用户需输入放入pool的文件夹和文件信息；
1.2）将目录划分为2个区：业务区和非业务区；用户需输入划分为业务区的文件夹和文件信息，没被划入的即非业务区；
1.3）创建一个变量patch，用来存储两棵树比较后的差异，以供后续操作；
1.4）创建一个变量merge_leafs，用来标记存储需要进行merge处理的叶子节点信息；
2）逐层比较两颗多叉树的节点，如果已经完成所有层的所有节点的比较，进入步骤8），否则进入步骤3）；
3）对某一层的目标工程的节点和模板工程的节点逐个遍历比较，优先遍历目标工程的节点，判断当前遍历到的目标工程的节点如果也存在于同层的模板工程，则判断该节点是否是叶子节点，是叶子节点则进入步骤4），否则进入步骤5）；如果同层的模板工程中不存在该节点，则进入步骤6）；
当目标工程的节点遍历完成，而模板工程中仍有未被遍历到的节点时，这些节点就只存在于模板工程，而不存在于目标工程，遍历模板工程中未被遍历到的节点，进入步骤7）；
4）如果是叶子节点，进一步判断该叶子节点如果属于业务区，则将该节点打上merge的标记，并将标记信息推入merge_leafs，重新进入步骤2）；如果该叶子节点属于非业务区，则将该节点打上覆盖cover的标记，并将标记信息推入merge_leafs，重新进入步骤2）；
5）如果不是叶子节点，则不进行任何标记操作，重新进入步骤2）；
6）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为删除，并将标记信息推入patch，重新进入步骤2）；
7）进一步判断该节点属于业务区还是非业务区，如果属于业务区，则不进行任何标记操作，重新进入步骤2）；如果属于非业务区，则将该节点标记为增加，并将标记信息推入patch，重新进入步骤2）；
8）输出变量patch和merge_leafs。
5.根据权利要求4所述的一种基于CLI的前端工程创建和升级系统，其特征在于，应用patch、merge_leafs和文件merge的具体步骤分别如下：
获得patch和merge_leafs后，再次遍历目标工程和模板工程的多叉树结构，执行下列操作：
1）如果当前节点在patch里被标记为增加，则将需增加的节点及其子节点增加到相应位置；
2）如果当前节点在patch里被标记为删除，则将需要删除的节点及其子节点从相应位置上移除；
3）对没有被标记的叶子节点，判断该节点是文件夹还是文件，如果是文件夹，不再做任何操作；
4）如果是文件，则需根据merge_leafs来进行相应操作，如果在merge_leafs里没有当前节点的标记，则无须做任何操作；
5）如果当前节点在merge_leafs里被标记为cover，则用模板工程的该文件内容覆盖模板工程的该文件内容；
6）如果当前节点在merge_leafs里被标记为merge，则对目标工程的该文件和模板工程的该文件进行merge，使用三路合并算法。
6.根据权利要求1所述的一种基于CLI的前端工程创建和升级系统，其特征在于，该系统还包括配置文件模块，所述配置文件模块包括系统所需的依赖资源、代码规范、提交规范和打包发布的配置信息。
7.根据权利要求1所述的一种基于CLI的前端工程创建和升级系统，其特征在于，所述核心库模块中发的插件还包括判断文件或文件夹是否存在、判断当前是SPA还是MPA工程、拷贝文件名以及拷贝文件内容的对应插件。
8.一种基于权利要求1-7任一项所述系统的前端工程创建和升级方法，其特征在于，该方法包括以下步骤：
（1）创建工具包、插件和模板，所述工具包包括创建工程、改造升级工程和创建子模块的工具文件；所述插件包括对两个文件进行merge和对两个工程结构进行diff的插件；所述模板包括SPA工程模板、MPA工程模板和子模块模板；
（2）判断目标工程的指令是新建指令还是改造升级指令；所述新建指令包括新建SPA工程的指令、新建MPA工程的指令和新建子模块的指令，与工具包中的创建工程和创建子模块的工具文件对应；所述改造升级指令包括将现有的SPA工程改造为MPA工程的指令、将现有的MPA工程改在为SPA工程的指令、将现有的SPA工程进行升级的指令和将现有的MPA工程进行升级的指令，与工具包中的改造升级工程的工具文件对应；
（3）用户选择工具包中目标工程的指令对应的工具文件，进而调用插件和模板，对目标工程和模板进行diff，得到存储差异的变量patch和需要进行merge处理的信息变量merge_leafs，基于文件merge创建一个新的前端工程或对已有前端工程进行改造升级。
9.一种基于CLI的前端工程创建和升级装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，其特征在于，所述处理器执行所述可执行代码时，实现如权利要求8中所述的一种基于CLI的前端工程创建和升级方法。
10.一种计算机可读存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时，实现如权利要求8中所述的一种基于CLI的前端工程创建和升级方法。
CN202311057250.4A 2023-08-22 2023-08-22 基于cli的前端工程创建和升级系统及方法 Active CN116755698B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311057250.4A CN116755698B (zh) 2023-08-22 2023-08-22 基于cli的前端工程创建和升级系统及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311057250.4A CN116755698B (zh) 2023-08-22 2023-08-22 基于cli的前端工程创建和升级系统及方法

Publications (2)

Publication Number Publication Date
CN116755698A true CN116755698A (zh) 2023-09-15
CN116755698B CN116755698B (zh) 2023-12-08

Family

ID=87955610

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311057250.4A Active CN116755698B (zh) 2023-08-22 2023-08-22 基于cli的前端工程创建和升级系统及方法

Country Status (1)

Country Link
CN (1) CN116755698B (zh)

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100175013A1 (en) * 2009-01-06 2010-07-08 Lance Gerard Krauter Apparatus and method for automatic work instruction generation
US20140304697A1 (en) * 2011-12-01 2014-10-09 Tencent Technology (Shenzhen) Company Limited Method and system for upgrading software
CN110968302A (zh) * 2018-09-28 2020-04-07 北京嘀嘀无限科技发展有限公司 前端开发方法、装置及电子设备
CN111680253A (zh) * 2020-06-08 2020-09-18 南京领行科技股份有限公司 页面应用数据包生成方法、装置、计算机设备及存储介质
CN112306474A (zh) * 2020-10-28 2021-02-02 科大国创云网科技有限公司 一种基于组件化模板的vue项目平滑升级方法
CN113434960A (zh) * 2021-06-28 2021-09-24 成都飞机工业（集团）有限责任公司 一种批量创建和修改零件的方法
CN113641351A (zh) * 2021-08-25 2021-11-12 北银金融科技有限责任公司 一种一键式脚手架完成前端基础功能搭建方法
CN115454417A (zh) * 2022-08-09 2022-12-09 中电云数智科技有限公司 web前端项目搭建方法
CN116225415A (zh) * 2023-03-10 2023-06-06 金茂云科技服务(北京)有限公司 一种前端工程化方法及系统

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100175013A1 (en) * 2009-01-06 2010-07-08 Lance Gerard Krauter Apparatus and method for automatic work instruction generation
US20140304697A1 (en) * 2011-12-01 2014-10-09 Tencent Technology (Shenzhen) Company Limited Method and system for upgrading software
CN110968302A (zh) * 2018-09-28 2020-04-07 北京嘀嘀无限科技发展有限公司 前端开发方法、装置及电子设备
CN111680253A (zh) * 2020-06-08 2020-09-18 南京领行科技股份有限公司 页面应用数据包生成方法、装置、计算机设备及存储介质
CN112306474A (zh) * 2020-10-28 2021-02-02 科大国创云网科技有限公司 一种基于组件化模板的vue项目平滑升级方法
CN113434960A (zh) * 2021-06-28 2021-09-24 成都飞机工业（集团）有限责任公司 一种批量创建和修改零件的方法
CN113641351A (zh) * 2021-08-25 2021-11-12 北银金融科技有限责任公司 一种一键式脚手架完成前端基础功能搭建方法
CN115454417A (zh) * 2022-08-09 2022-12-09 中电云数智科技有限公司 web前端项目搭建方法
CN116225415A (zh) * 2023-03-10 2023-06-06 金茂云科技服务(北京)有限公司 一种前端工程化方法及系统

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
CHEN LIU 等: "Practice and Application of Wiki Open Source Document Platform Based on Vue", IEEE, pages 819 - 822 *
宋彭涛 等: "基于插件技术的多目标指令集模拟器设计与实现", 信息工程大学学报, pages 67 - 70 *
贾丽芳 等: "基于SmartAdmin的数据维护软件前台的快速构建", 电脑知识与技术, pages 7 - 8 *

Also Published As

Publication number Publication date
CN116755698B (zh) 2023-12-08

Similar Documents

Publication Publication Date Title
CN111241454B (zh) 一种生成网页代码的方法、系统和装置
CN109684057B (zh) 任务处理方法、装置和存储介质
US8881097B2 (en) System and method for creating and using graphical object instances in a statechart environment
CN107016094B (zh) 一种项目共享文件多人协同开发方法、装置及系统
US20050065936A1 (en) System and method for reusing form elements in a form building application
US20060020928A1 (en) Translation of comments in code
JPH0373061A (ja) 文書管理方法
CN107305488A (zh) 一种应用国际化方法、装置及终端
CN109522013A (zh) 一种业务功能的代码生成方法及装置
WO2023016480A1 (zh) 一种硬件内存序架构下的代码处理方法及相应装置
CN111208995A (zh) Ibm主机作业的自动生成方法、系统、装置及存储介质
CN112084446A (zh) 一种网页编辑方法、编辑器、电子设备和可读存储介质
CN116755698B (zh) 基于cli的前端工程创建和升级系统及方法
CN116521181B (zh) 基于游戏系统的脚本数据处理方法、装置、设备及介质
CN106919374A (zh) 一种脚本生成方法和装置
CN107944288B (zh) 一种数据访问控制方法和装置
CN112632333A (zh) 查询语句生成方法、装置、设备及计算机可读存储介质
CN115756433A (zh) 代码平台的迁移方法、装置、电子设备及可读存储介质
US20150212799A1 (en) Migration between model elements of different types in a modeling environment
Shonle et al. Aspectbrowser for eclipse: a case study in plug-in retargeting
Korenkov et al. WALT platform for web application development
CN111027196B (zh) 一种电力设备的仿真分析任务处理方法、装置及存储介质
CN113641868A (zh) 一种用于资源保障投入的数据访问控制方法、装置和电子设备
CN113076095A (zh) 一种基于基础与逻辑功能分离的业务实现方法与系统
JP5540856B2 (ja) ワークフローを設定するための装置および方法

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
GR01 Patent grant
GR01 Patent grant