CN117112060A - 组件库构建方法、装置、电子设备及存储介质 - Google Patents
组件库构建方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN117112060A CN117112060A CN202311095471.0A CN202311095471A CN117112060A CN 117112060 A CN117112060 A CN 117112060A CN 202311095471 A CN202311095471 A CN 202311095471A CN 117112060 A CN117112060 A CN 117112060A
- Authority
- CN
- China
- Prior art keywords
- component
- component library
- configuration information
- generating
- library
- 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
Links
- 238000003860 storage Methods 0.000 title claims abstract description 19
- 238000010276 construction Methods 0.000 title claims description 27
- 238000000034 method Methods 0.000 claims abstract description 48
- 238000004806 packaging method and process Methods 0.000 claims abstract description 34
- 238000012360 testing method Methods 0.000 claims description 67
- 238000012545 processing Methods 0.000 claims description 33
- 230000006870 function Effects 0.000 claims description 27
- 238000012856 packing Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 13
- 238000012986 modification Methods 0.000 claims description 12
- 230000004048 modification Effects 0.000 claims description 12
- 238000013515 script Methods 0.000 claims description 10
- 230000002159 abnormal effect Effects 0.000 claims description 5
- 238000011990 functional testing Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 22
- 238000004891 communication Methods 0.000 description 11
- 238000007726 management method Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 7
- 238000013461 design Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000012423 maintenance Methods 0.000 description 5
- 239000008186 active pharmaceutical agent Substances 0.000 description 4
- 230000004044 response Effects 0.000 description 4
- 230000006399 behavior Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000009434 installation Methods 0.000 description 3
- 238000004519 manufacturing process Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 230000002708 enhancing effect Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 210000003813 thumb Anatomy 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000003339 best practice Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000010924 continuous production Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 238000007429 general method Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000001737 promoting effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000012559 user support system Methods 0.000 description 1
Classifications
-
- 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/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- 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
Abstract
本申请实施例提供一种组件库构建方法、装置、电子设备及存储介质，涉及计算机技术领域，方法包括：生成组件库的项目文件，以及，项目文件的第一配置文件；在项目文件中，根据组件库的目录结构生成对应的目录文件夹；构建组件库的至少一种目标指令，将至少一种目标指令写入对应的目录文件夹；获取组件库的第二配置信息，根据第二配置信息生成至少一种组件，并将组件写入对应的目录文件夹，第二配置信息包括组件的源码、样式、调用方式、数据结构中的至少一种；根据第一配置信息对项目文件进行打包构建，得到组件库。根据上述方法可以快速的生成基于低代码平台通用的组件库，提升开发效率。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种组件库构建方法、装置、电子设备及存储介质。
背景技术
在低代码开发平台中，组件化是一种重要的开发手段，通过对代码进行提取合并形成包括多个组件的组件库，开发人员可以通过对低代码平台组件库中组件的调用组合，快速生成功能完整的页面，从而提高页面开发效率。
目前的组件库通常是基于对应地的业务场景进行构建，由于不同的业务场景和需求的差异，构建方式差异较大，缺少一种在低代码平台通用的组件库的构建流程，开发效率较低。
发明内容
针对上述组件库开发效率低的问题，本申请提供一种组件库构建方法、装置、电子设备及存储介质，可以提升组件库的开发效率。
第一方面，本申请提供一种组件库构建方法，应用于低代码平台，包括：
生成组件库的项目文件，以及，所述项目文件的第一配置文件；
在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；
构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于执行所述组件库的脚本；
获取所述组件库的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；
根据所述第一配置信息对所述项目文件进行打包构建，得到所述组件库。
可选的，所述根据所述组件库的目录结构生成对应的目录文件夹，包括：
响应于用户的目录结构编写操作，获取用于创建所述组件库的目录结构的目录结构信息；
根据目录结构信息，确定所述目录结构包括的文件夹数量和各文件夹名称；
根据所述文件夹数量、所述文件夹名称，以及，目录结构模板，生成所述目录文件夹。
可选的，所述根据所述第一配置信息，对所述项目文件进行打包构建，构建所述组件库，包括：
根据所述第一配置信息，以及，所述组件库的目标对象，获取所述组件库的打包方式；
根据所述打包方式，将所述组件，以及，所述目标指令进行打包，在所述项目文件的根目录中生成至少一个可执行文件；
对所述可执行文件进行命名，得到构建完成的组件库。
可选的，所述目录文件夹中包括用于表征所述组件库版本信息的文件，所述在所述项目文件的根目录中生成至少一个可执行文件之后，所述方法还包括：
根据所述组件库的版本信息，获取所述组件库的版本号；
根据所述版本号在所述项目文件的根目录中生成所述版本号对应的目标文件夹；不同版本号对应不同的目标文件夹。
将所述至少一个可执行文件写入所述目标文件夹。
可选的，所述根据所述配置信息对所述项目文件进行打包构建，构建所述组件库之前，所述方法还包括：
对所述组件进行功能性测试，以验证所述组件的功能和行为是否正常。
可选的，所述对所述组件进行功能性测试，包括：
获取所述组件的测试用例，以及，从所述目录文件夹中获取所述组件的测试指令；
根据所述测试指令执行所述测试用例，获取测试结果；
若所述测试结果出现异常，则将所述测试结果发送至用户的客户端。
可选的，所述方法还包括：
根据所述组件库中各组件的功能和样式，生成所述组件库的说明文档；
将所述说明文档发送至用户的客户端，并接收所述客户端反馈的修改信息；
根据所述修改信息对所述说明文档进行更新，生成目标说明文档。
第二方面，本申请提供一种组件库构建装置，应用于低代码平台，包括：
生成模块，用于生成组件库的项目文件，以及，所述项目文件的第一配置信息；
处理模块，用于在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；
构建模块，用于构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于对执行所述组件库的脚本；
获取模块，用于获取组件的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述组件的第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；
打包模块，用于根据所述第一配置信息对所述项目文件进行打包构建，构建所述组件库。
第三方面，本申请提供一种电子设备，包括：存储器和处理器；
存储器用于存储计算机指令；处理器用于运行存储器存储的计算机指令实现第一方面中任一项的方法。
第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行以实现第一方面中任一项的方法。
第五方面，本申请提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面中任一项的方法。
本申请提供的组件库构建方法、装置、电子设备及存储介质，通过生成组件库的项目文件，以及，所述项目文件的第一配置文件；在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于执行所述组件库的脚本；获取所述组件库的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；根据所述第一配置信息对所述项目文件进行打包构建，得到所述组件库。根据上述方法可以快速的生成基于低代码平台通用的组件库，提升开发效率。
附图说明
图1为本申请实施例提供的组件库构建方法的流程示意图一；
图2为本申请实施例提供的低代码组件的结构示意图；
图3为本申请实施例提供的组件库构建方法的流程示意图二；
图4为本申请实施例提供的组件库构建装置的结构示意图；
图5为本申请实施例提供的电子设备的结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
在本申请的实施例中，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分，并不对其先后顺序进行限定。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定，并且“第一”、“第二”等字样也并不限定一定不同。
需要说明的是，本申请实施例中，“示例性的”或者“例如”等词用于表示例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
随着数字化转型浪潮的深入推进，越来越多的企业开始采用低代码开发平台提供的组件库来提高业务效率和创新能力。
由于不同的业务场景和需求各异，现有的低代码可视化平台组件库存在一些问题，例如组件缺乏多样性、扩展性和可维护性较差等，这些问题限制了低代码平台的应用范围和推广速度。因此，提供一种创新的低代码可视化平台组件库设计和实现方法，成为了低代码开发平台的关键竞争因素之一。
有鉴于此，本申请实施例提供一种组件库的构建方法、装置、电子设备及存储介质，旨在提供一种通用的基于低代码平台组件库的构建方法，可以帮助解决开发效率低、用户界面不一致、代码维护困难等问题，从而提高开发效率、增强用户体验。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以独立实现，也可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。
图1为本申请实施例提供的组件库构建方法的流程示意图，如图1所示，包括：
S101、生成组件库的项目文件，以及，所述项目文件的第一配置文件。
本申请实施例的执行主体可以为低代码平台，例如，低代码处理平台的处理单元。
本申请实施例中，项目文件可以用于表征待生成的组件库，一个项目文件可以对应一个组件库，第一配置文件可以用于表征所述项目文件的打包和处理方式，以生成所述组件库。
示例性的，处理单元可以响应于用户的指令在预设的目录位置生成所述项目文件。
所述用户指令可以为如下所示：
npx create-react-app lcp-datavisual-library
处理单元可以运行上述指令，在目录位置创建一个名称为"lcp-datavisual-library"的React项目文件。
所述第一配置信息可以存储于所述项目文件中，在创建所述项目文件后，可以进入所述项目文件目录，在所述项目文件目中生成所述第一配置信息。
示例性的，处理单元可以响应于用户的指令新建build文件夹，创建一个名为"webpack.config.js"的目标文件，在所述"webpack.config.js"中根据用户输入的配置信息修改所述目标文件，得到所述第一配置文件。所述配置信息可以称为Webpack配置。
可选的，所述配置信息可以根据项目文件的实际需求进行更改。
可选的，生成所述项目文件时，还可以设置所述项目文件所需的依赖，例如，在开发环境中安装Node.js和NodeJS包管理和分发工具(Node Package Manager，NPM)。
S102、在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹。
本申请实施例中，处理单元可以基于获取的目录结构在所述项目文件中生成对应的文件夹，其中，一个目录结构可以对应一个文件夹。
示例性的，所述目录结构可以如下所示：
-.storybook:storybook开发环境的配置。
-build：存放构建、打包、自动化生成相关的配置文件。
-packages:存放所有组件的源码。
-public:存放静态资源。
-lib:存放组件meta信息、编辑态和预览态的配置。
-lib/meta.js:存放所有的组件的meta信息集合,meta用于描述组件的版本号、组件名、组件分类、标题、缩略图、schema、扩展参数/方法、支持的变量等。
-lib/edit-components:低代码编辑态的组件集合。
-lib/preview-components:低代码预览态的组件集合。
-dist:存放打包后的资源。
-components:存放公用组件源码。
-constants:存放所有常量的文件。
-custom-hooks:存放所有自定义hooks的文件。
-request:存放请求配置文件。
-schema:存放所有低代码组件的schema配置文件。
-service:存放所有请求的文件。
-stories:存放所有Storybook配置源文件。
-theme:存放组件主题的文件。
-utils:存放所有的工具类和函数。
-test:存放单元测试相关的文件。
-stylelintrc.js：样式代码检测规范。
-eslintrc.js：JavaScript语法规则和代码风格的检测规范。
-package.json：跟踪依赖关系和元数据。
-README.md：项目说明文档。
-.gitignore：上传远程git仓库时需要忽略的文件说明。
S103、构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于对执行所述组件库的脚本。
本申请实施例中，处理单元可以基于用户的指令创建所述目标指令，或者，获取用户输入的目标指令，并将所述目标指令写入package.json文件夹中的scripts中。
示例性的，所述目标指令可以如下所示：
-dev:用来构建开发环境。
-serve:启动本地服务。
-eslint：js代码检测。
-stylelint：样式代码检测。
-test:unit：对组件进行单元测试。
-build:prod:生产环境打包。
-build:test:测试环境打包。
-build:sit:系统集成测试环境打包。
-storybook:运行storybook查看组件。
-ut:单元测试。
-commit:git代码提交规范检查。
在一些实施例中，上述S101-S103所示步骤还可以称为建立组件库的脚手架工程。
S104、获取组件库的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述组件的第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种。
本申请实施例中，处理单元可以根据获取到第二配置信息生成所述组件库中的组件。
示例性的，如图2所示，一个低代码组件可以包含index.jsx、style.less、thumb.png、main.js、configure.js、config.js、schema.js等文件，上述文件可以根据所述第二配置信息生成。
其中，各文件的说明如下：
Main.js:暴露组件的所有配置信息集合。
index.jsx:组件的核心源码。
style.less:组件的样式文件。
thumb.png:组件在低代码平台中的缩略图。
schema.js:组件的schema配置信息(组件的schema是用来描述组件的属性和配置选项的数据结构。它定义了组件可以接受的输入参数、默认值、数据类型、校验规则等信息。通过使用组件的schema，低代码平台可以生成用户友好的表单界面，供用户配置组件的属性和行为)。
configure.js:配置组件的扩展方法以及配置信息暴露给低代码平台调用的方法集合。
config.js:配置组件的默认数据。
处理平台可以根据上述文件，以及，组件的样式、调用方式等信息，生成对应的组件。
S105、根据所述第一配置信息对所述项目文件进行打包构建，得到所述组件库。
本申请实施例中，处理单元可以根据所述第一配置信息确定项目文件的打包和处理方式，根据所述打包和处理方式将组件库中的源代码、样式和相关资源捆绑到一个或多个最终的可执行文件中，生成所述组件库。
示例性的，处理单元可以在package.json配置以下命令：
"build:lowcode":"webpack--config./build/webpack.lowcode.config.js--mode production"
运行yarn build:lowcode命令就可完成打包构建操作。
本申请实施例提供的组件库构建方法，通过生成组件库的项目文件，以及，所述项目文件的第一配置文件；在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于执行所述组件库的脚本；获取所述组件库的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；根据所述第一配置信息对所述项目文件进行打包构建，得到所述组件库。根据上述方法可以快速的生成基于低代码平台通用的组件库，提升开发效率。
在上述实施例的基础上，本申请实施例提供的组件库构建方法，可以根据如下步骤生成目录文件夹。
示例性的，响应于用户的目录结构编写操作，获取用于创建所述组件库的目录结构的目录结构信息；根据目录结构信息，确定所述目录结构包括的文件夹数量和各文件夹名称；根据所述文件夹数量、所述文件夹名称，以及，目录结构模板，生成所述目录文件夹。
其中，处理平台可以基于用户在低代码平台的编写操作，获取对应的目录结构信息，所述目录结构信息可以用于指示所述目录的样式。
对所述目标结构进行分析，得到包括的文件夹的数量和各文件夹的名称，基于所述文件夹的数量和各文件夹的名称对目录结构模板进行修改，生成对应的文件夹，以及，根据样式对文件夹进行整理排序，得到所述目录文件夹。
在一些实施例中，根据所述第一配置信息，对所述项目文件进行打包构建，构建所述组件库还可以包括如下所示步骤：
示例性的，根据所述第一配置信息，以及，所述组件库的目标对象，获取所述组件库的打包方式；根据所述打包方式，将所述组件，以及，所述目标指令进行打包，在所述项目文件的根目录中生成至少一个可执行文件；对所述可执行文件进行命名，得到构建完成的组件库。
其中，所述组件库的目标对象可以为所述组件库运行的平台和/或环境。所述打包方式包括使用的打包工具和组件库的打包样式。
处理单元可以对所述第一配置信息进行处理，得到所述组件库的打包工具，对所述目标对象进行处理，得到所述打包样式。
处理单元可以调用所述打包工具依据所述打包样式对所述组件以及目标指令进行打包，生成至少一个可执行文件；根据获取的组件库名称对所述可执行文件进行命名，得到构建完成的组件库。
在一些实施例中，构建所述组件库的过程中，还包括组件库的版本管理，在组件库进行更新时，可以降低因不同版本导致发送冲突的几率。
示例性的，根据所述组件库的版本信息，获取所述组件库的版本号；根据所述版本号在所述项目文件的根目录中生成所述版本号对应的目标文件夹；不同版本号对应不同的目标文件夹。将所述至少一个可执行文件写入所述目标文件夹。
其中，组件库的版本信息可以存储于package.json文件中，处理单元可以读取所述package.json文件中有关版本号的字段，所述组件库的版本号。例如，读取package.json文件中名为version的字段，得到所述版本号。
处理单元可以根据所述版本号在所述项目文件的根目录中生成所述版本号对应的目标文件夹，例如，版本号为1.0.0，则可以生成名为1.0.0的文件夹，将打包后的可执行文件存入所述名为1.0.0的文件夹。
应理解，用户可以对version的字段中的内容进行修改，以编写对应的版本号。
通过这种方式，每个版本的组件库产物都会被放置在独立的文件夹中，以便根据需要进行版本管理和使用。用户可以根据自己的项目需求，在其应用程序中引用特定版本的组件库，从而实现版本控制和更新。
在一些实施例中，生成组件时处理单元还可以对组件进行测试。
示例性的，对所述组件进行功能性测试，以验证所述组件的功能和行为是否正常。
其中，对组件测试可以采用Jest和React Testing Library进行React组件单元测试。组件单元测试的目标是验证组件的功能和行为，确保组件在不同情况下的正确性。
在一种可能的实现方式中，对组件进行测试还可以根据如下所示步骤进行：
示例性的，获取所述组件的测试用例，以及，从所述目录文件夹中获取所述组件的测试指令；根据所述测试指令执行所述测试用例，获取测试结果；若所述测试结果出现异常，则将所述测试结果发送至用户的客户端。
其中，测试用例可以为基于所述组件的功能生成的。目标指令可以包括所述测试指令。
在生成所述测试用例时，可以对所述测试指令配置与测试用例的映射关系。通过所述映射关系使用测试指令执行测试用例，得到测试结果。
若所述测试结果中出现异常，可以将所述测试结果以及测试日志发送至用户的客户端。
处理单元可以接收用户的修改指令，对所述组件和/或测试用例进行修正，并再次执行对应的测试案例。
在一些实施例中，在构建组件库时，处理单元还可以生成所述组件库的说明文档，以帮助使用者快速了解所述组件库的功能，途等。
示例性的，根据所述组件库中各组件的功能和样式，生成所述组件库的说明文档；将所述说明文档发送至用户的客户端，并接收所述客户端反馈的修改信息；根据所述修改信息对所述说明文档进行修正，生成目标说明文档。
其中，所述组件库中包括说明文档模板，处理单元可以根据所述组件库中各组件的功能和样式等信息，对所述说明文档模板进行修改，生成所述说明文档，并将说明文档发送至用户的客户端。
若用户通过客户端反馈了修改信息，则处理单元可以根据所述修改信息更新说明文档。
在上述实施例的基础上，下面结合图3对本申请实施例提供的组件库的构建方法进行完整说明。
图3为本申请实施例提供的组件库的构建方法的流程示意图二，如图3所示，包括：
S301、建立组件库脚手架工程。
其中，建立组件库脚手架工程包括初始化工程、目录结构设计、构建指令以及版本管理。
初始化工程包括如下所示内容：
初始化工程是构建低代码平台组件库的第一步，它涉及创建一个新的项目，并设置必要的配置和依赖项。
安装依赖：首先，确保开发环境中已安装Node.js和npm。在项目位置目录下运行以下命令来初始化项目：
npx create-react-app lcp-datavisual-library
创建项目：上述命令将创建一个名为"lcp-datavisual-library"的React项目。等待项目创建完成后，进入项目目录：
cd lcp-datavisual-library
添加Webpack配置：在项目根目录下新建build文件夹，创建一个名为"webpack.config.js"的文件，并添加Webpack的配置。Webpack配置用于打包组件库和处理各种资源。可以根据项目需求进行配置，并确保正确地处理React组件和样式文件。
安装Storybook：运行以下命令来安装Storybook：
npx sb init
配置Storybook：安装完成后，Storybook将在项目中创建一个名为".storybook"的目录，并生成一些示例文件。可以根据需要对这些示例进行修改或删除，并配置Storybook来正确加载和展示组件。
添加事例组件：在项目中创建一个名为"package"的目录，用于存放组件代码。根据需要，可以在"package"目录下创建子目录来组织不同类型的组件。在每个组件目录中，创建一个以组件名称命名的文件，并编写组件的代码。
运行项目：通过以下命令启动项目和Storybook：
npm start npm
run storybook
这将分别启动项目和Storybook服务器，并在浏览器中打开相应的页面。可以在项目中开发和测试组件，并在Storybook中查看和展示它们。
目录结构设计和构建指令包括的内容与图1所示实施例类似，此处不再赘述。
版本管理可以包括如下所示内容：
package.json文件:项目根目录下，存在一个名为package.json的文件，其中包含项目的配置信息和依赖管理。
版本号字段:在package.json文件中，存在一个名为version的字段，用于表示当前组件库的版本号。可以根据需要手动更新该字段，或者使用版本管理工具(如npm)自动更新版本号。
打包构建:在进行组件库打包构建的过程中，可以编写相应的脚本或配置文件，使得打包过程能够读取package.json文件中的版本号字段。
构建文件夹:在打包构建完成后，根据版本号创建一个文件夹，用于存放该版本的组件库产物。例如，如果当前版本号是1.0.0，那么可以创建一个名为1.0.0的文件夹。
组件库产物:打包生成的组件库文件和相关资源放置在对应版本号的文件夹下。这些产物可以包括编译后的JavaScript文件、样式表、图像等。
通过这种方式，每个版本的组件库产物都会被放置在独立的文件夹中，以便根据需要进行版本管理和使用。用户可以根据自己的项目需求，在其应用程序中引用特定版本的组件库，从而实现版本控制和更新。
S302、设计并实现组件。
以设计定义时间组件为例，对组件的构建过程进行说明。
示例性的，包括定义时间展示组件的schema、定义时间展示组件样式，以及，编写时间展示组件的逻辑。
S303、测试组件。
以按钮组件的单元测试为例：
一个简单的按钮组件(Button)，用于显示一个按钮并在点击时执行回调函数。
可以使用render函数从React Testing Library中渲染Button组件，并使用getByText来获取按钮元素。然后，我们使用fireEvent来模拟按钮点击事件，并使用expect来断言回调函数是否被调用。
S304、文档编写。
文档提供了对组件功能和用法的详细说明。其他开发者和用户可以通过文档快速了解组件的用途、可用属性、方法和事件等。文档有助于降低学习成本，并提供使用组件所需的必要信息。文档通常包含示例代码和使用场景，展示组件在实际应用中的使用方式。这些示例帮助其他开发者更好地理解组件的用法，并提供了一个起点来使用组件。示例还可以帮助开发者快速验证组件的功能和行为。低代码组件库常用于多人协作的开发环境。组件文档可以作为团队成员之间交流的重要工具。文档中清晰的说明和示例可以减少沟通成本，提供共享的理解和参考，促进团队成员之间更高效的协作。
组件库通常会不断更新和迭代，添加新功能、修复问题或改进性能。组件文档可以记录每个版本的变更和更新内容，帮助用户了解组件的演化历程。文档还有助于维护者记录组件的使用建议、最佳实践和注意事项，帮助用户正确使用组件。
总之，低代码组件库组件文档的编写对于组件的广泛使用、开发团队之间的协作和用户支持都至关重要。通过清晰、准确和易于理解的文档，可以促进组件的正确使用、提高开发效率，并帮助用户更好地了解和利用组件的功能。
示例性的，以下是一个按钮组件文档编写的示例:
按钮组件是一个可定制的UI按钮，用于在用户界面中显示按钮并处理用户点击事件。
安装和配置:
可以通过以下命令使用npm安装按钮组件：
npminstall button-component
导入按钮组件：
import Button from'button-component'；
属性：
按钮组件支持以下属性：
text(string,required):按钮显示的文本内容。
onClick(function):点击按钮时触发的回调函数。
color(string):按钮的背景颜色。
disabled(boolean):禁用按钮，使其不可点击。
使用示例:
以下是一个简单的使用按钮组件的示例代码：
<Button text＝"Click me"
onClick＝{()＝>{console.log('Button clicked！')；}}
color＝"blue"disabled＝{false}/>
API:
Button组件
Props:
| 属性名 | 类型 | 必需 | 说明 |
| text | string | 是 | 按钮显示的文本内容 |
| onClick | function | 否 | 点击按钮时触发的回调函数 |
| color | string | 否 | 按钮的背景颜色 |
| disabled | boolean | 否 | 禁用按钮，使其不可点击 |
注意事项：
在使用onClick回调函数时，请确保传递一个函数而不是直接调用函数。
可以通过设置color属性来自定义按钮的背景颜色。
当disabled属性设置为true时，按钮将变为禁用状态，不可点击。
S305、打包构建。
打包构建将组件库中的源代码、样式和相关资源捆绑到一个或多个最终的可执行文件中。这样，使用者只需引入打包后的文件，而无需关心组件库的内部结构和依赖关系。可以对组件库进行优化，包括代码压缩、文件合并、资源优化等。这有助于减小组件库的文件大小，提高加载速度和性能。优化后的组件库能够更快地加载和渲染，提升用户体验。
低代码组件库可能依赖于其他库、模块或资源文件。打包构建会解析这些依赖关系，并将它们打包到最终的文件中，以便组件库能够独立运行，无需外部依赖。
实现模块化和命名空间：打包构建可以将组件库的代码进行模块化，使用模块系统(如CommonJS或ES modules)来管理组件的导入和导出。这样，使用者可以按需引入和使用组件，避免全局命名冲突，提高代码的可维护性。
可以针对不同的平台和环境生成不同的构建版本。例如，可以生成适用于浏览器环境的UMD(Universal Module Definition)构建，适用于Node.js环境的CommonJS构建，或适用于ES modules的ES构建。这样，组件库可以在各种不同的环境中使用。
在package.json配置以下命令
"build:lowcode":"webpack--config./build/webpack.lowcode.config.js--mode production"
使用yarn build:lowcode命令就可完成打包构建操作。
S306、发布部署。
本申请实施例中的发布部署主要包含以下步骤:
测试验证：在发布之前，需要对组件库进行测试验证，以确保其功能正常、性能稳定、兼容性良好等。测试可以包括单元测试、集成测试、UI测试等。测试的目的是保证组件库的质量和可靠性，减少出错和故障的可能性。
文档编写：在发布组件库之前，需要编写和更新组件库的文档，以便使用者能够了解如何使用组件库的功能和API。文档可以包括组件库的介绍、安装指南、使用说明、API文档、示例代码等。
发布到仓库：将组件库的最终可执行文件和文档发布到组件库的仓库中。通常，组件库的仓库可以是公共仓库(如npm、GitHub等)或私有仓库(如公司内部仓库、云平台仓库等)。发布到仓库后，其他开发者可以通过仓库来安装和使用组件库。
版本更新和维护：组件库发布后，需要进行版本更新和维护。随着应用程序的演进和新功能的增加，组件库的功能和API也需要不断更新和完善。因此，组件库的发布和维护是一个持续的过程。
本申请实施例提供的组件库构建方法，可以帮助解决组件库的开发效率低、用户界面不一致、代码维护困难等问题，从而提高开发效率、增强用户体验，并促进应用程序的迭代和创新。
本申请实施例还提供一种组件库构建装置。
图4为本申请实施例提供的组件库构建装置40的结构示意图，如图4所示，包括：
生成模块401，用于生成组件库的项目文件，以及，所述项目文件的第一配置信息。
处理模块402，用于在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹。
构建模块403，用于构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于对执行所述组件库的脚本。
获取模块404，用于获取组件的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述组件的第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种。
打包模块405，用于根据所述第一配置信息对所述项目文件进行打包构建，构建所述组件库。
可选的，处理模块402，还用于响应于用户的目录结构编写操作，获取用于创建所述组件库的目录结构的目录结构信息；根据目录结构信息，确定所述目录结构包括的文件夹数量和各文件夹名称；根据所述文件夹数量、所述文件夹名称，以及，目录结构模板，生成所述目录文件夹。
可选的，打包模块405，还用于根据所述第一配置信息，以及，所述组件库的目标对象，获取所述组件库的打包方式；根据所述打包方式，将所述组件，以及，所述目标指令进行打包，在所述项目文件的根目录中生成至少一个可执行文件；对所述可执行文件进行命名，得到构建完成的组件库。
可选的，处理模块402，还用于根据所述组件库的版本信息，获取所述组件库的版本号；根据所述版本号在所述项目文件的根目录中生成所述版本号对应的目标文件夹；不同版本号对应不同的目标文件夹。将所述至少一个可执行文件写入所述目标文件夹。
可选的，组件库构建装置40还包括：测试模块406。
测试模块406，用于对所述组件进行功能性测试，以验证所述组件的功能和行为是否正常。
可选的，测试模块406，还用于获取所述组件的测试用例，以及，从所述目录文件夹中获取所述组件的测试指令；根据所述测试指令执行所述测试用例，获取测试结果；若所述测试结果出现异常，则将所述测试结果发送至用户的客户端。
可选的，构建模块403，还用于根据所述组件库中各组件的功能和样式，生成所述组件库的说明文档；将所述说明文档发送至用户的客户端，并接收所述客户端反馈的修改信息；根据所述修改信息对所述说明文档进行更新，生成目标说明文档。
本申请实施例提供的组件库构建装置可以执行上述任一实施例提供的组件构建方法的技术方案，其原理和技术效果类似，此处不再赘述。
本申请实施例还提供一种电子设备。
图5为本申请实施例提供的电子设备500的结构示意图，如图5所示，包括：
处理器501。
存储器502，用于存储终端设备的可执行指令。
具体的，程序可以包括程序代码，程序代码包括计算机操作指令。存储器502可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
处理器501用于执行存储器502存储的计算机执行指令，以实现前述方法实施例所描述的组件库构建方法实施例的技术方案。
其中，处理器501可能是一个中央处理器(Central Processing Unit，简称为CPU)，或者是特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者是被配置成实施本申请实施例的一个或多个集成电路。
可选的，电子设备50还可以包括通信接口503，以通过通信接口503可以与外部设备进行通信交互，外部设备例如可以是用户终端(例如，手机、平板)。在具体实现上，如果通信接口503、存储器502和处理器501独立实现，则通信接口503、存储器502和处理器501可以通过总线相互连接并完成相互间的通信。总线可以是工业标准体系结构(IndustryStandard Architecture，简称为ISA)总线、外部设备互连(Peripheral Component，简称为PCI)总线或扩展工业标准体系结构(Extended Industry Standard Architecture，简称为EISA)总线等。总线可以分为地址总线、数据总线、控制总线等，但并不表示仅有一根总线或一种类型的总线。
可选的，在具体实现上，如果通信接口503、存储器502和处理器501集成在一块芯片上实现，则通信接口503、存储器502和处理器501可以通过内部接口完成通信。
本申请实施例中还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述组件库构建方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
一种可能的实现方式中，计算机可读介质可以包括随机存取存储器(RandomAccess Memory，RAM)，只读存储器(Read-Only Memory，ROM)，只读光盘(compact discread-only memory，CD-ROM)或其它光盘存储器，磁盘存储器或其它磁存储设备，或目标于承载的任何其它介质或以指令或数据结构的形式存储所需的程序代码，并且可由计算机访问。而且，任何连接被适当地称为计算机可读介质。例如，如果使用同轴电缆，光纤电缆，双绞线，数字用户线(Digital Subscriber Line，DSL)或无线技术(如红外，无线电和微波)从网站，服务器或其它远程源传输软件，则同轴电缆，光纤电缆，双绞线，DSL或诸如红外，无线电和微波之类的无线技术包括在介质的定义中。如本文所使用的磁盘和光盘包括光盘，激光盘，光盘，数字通用光盘(Digital Versatile Disc，DVD)，软盘和蓝光盘，其中磁盘通常以磁性方式再现数据，而光盘利用激光光学地再现数据。上述的组合也应包括在计算机可读介质的范围内。
本申请实施例中还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述组件库构建方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
在上述终端设备或者服务器的具体实现中，应理解，处理器可以是中央处理单元(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital Signal Processor，简称：DSP)、专用集成电路(英文：ApplicationSpecific Integrated Circuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
本领域技术人员可以理解，上述任一方法实施例的全部或部分步骤可以通过与程序指令相关的硬件来完成。前述的程序可以存储于计算机可读取存储介质中，该程序被执行时，执行上述方法实施例的全部或部分的步骤。
本申请技术方案如果以软件的形式实现并作为产品销售或使用时，可以存储在计算机可读取存储介质中。基于这样的理解，本申请的技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括计算机程序或者若干指令。该计算机软件产品使得计算机设备(可以是个人计算机、服务器、网络设备或者类似的电子设备)执行本申请实施例所述方法的全部或部分步骤。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (10)
1.一种组件库构建方法，其特征在于，应用于低代码平台，包括：
生成组件库的项目文件，以及，所述项目文件的第一配置文件；
在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；
构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于执行所述组件库的脚本；
获取所述组件库的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；
根据所述第一配置信息对所述项目文件进行打包构建，得到所述组件库。
2.根据权利要求1所述的方法，其特征在于，所述根据所述组件库的目录结构生成对应的目录文件夹，包括：
响应于用户的目录结构编写操作，获取用于创建所述组件库的目录结构的目录结构信息；
根据目录结构信息，确定所述目录结构包括的文件夹数量和各文件夹名称；
根据所述文件夹数量、所述文件夹名称，以及，目录结构模板，生成所述目录文件夹。
3.根据权利要求2所述的方法，其特征在于，所述根据所述第一配置信息，对所述项目文件进行打包构建，构建所述组件库，包括：
根据所述第一配置信息，以及，所述组件库的目标对象，获取所述组件库的打包方式；
根据所述打包方式，将所述组件，以及，所述目标指令进行打包，在所述项目文件的根目录中生成至少一个可执行文件；
对所述可执行文件进行命名，得到构建完成的组件库。
4.根据权利要求3所述的方法，其特征在于，所述目录文件夹中包括用于表征所述组件库版本信息的文件，所述在所述项目文件的根目录中生成至少一个可执行文件之后，所述方法还包括：
根据所述组件库的版本信息，获取所述组件库的版本号；
根据所述版本号在所述项目文件的根目录中生成所述版本号对应的目标文件夹；不同版本号对应不同的目标文件夹；
将所述至少一个可执行文件写入所述目标文件夹。
5.根据权利要求1-4任一项所述的方法，其特征在于，所述根据所述配置信息对所述项目文件进行打包构建，构建所述组件库之前，所述方法还包括：
对所述组件进行功能性测试，以验证所述组件的功能和行为是否正常。
6.根据权利要求5所述的方法，其特征在于，所述对所述组件进行功能性测试，包括：
获取所述组件的测试用例，以及，从所述目录文件夹中获取所述组件的测试指令；
根据所述测试指令执行所述测试用例，获取测试结果；
若所述测试结果出现异常，则将所述测试结果发送至用户的客户端。
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：
根据所述组件库中各组件的功能和样式，生成所述组件库的说明文档；
将所述说明文档发送至用户的客户端，并接收所述客户端反馈的修改信息；
根据所述修改信息对所述说明文档进行更新，生成目标说明文档。
8.一种组件库构建装置，其特征在于，应用于低代码平台，包括：
生成模块，用于生成组件库的项目文件，以及，所述项目文件的第一配置信息；
处理模块，用于在所述项目文件中，根据所述组件库的目录结构生成对应的目录文件夹；
构建模块，用于构建所述组件库的至少一种目标指令，将所述至少一种目标指令写入对应的目录文件夹；所述目标指令用于对执行所述组件库的脚本；
获取模块，用于获取组件的第二配置信息，根据所述第二配置信息生成至少一种组件，并将所述组件写入对应的目录文件夹，所述组件的第二配置信息包括所述组件的源码、样式、调用方式、数据结构中的至少一种；
打包模块，用于根据所述第一配置信息对所述项目文件进行打包构建，构建所述组件库。
9.一种电子设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序以实现权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，所述计算机程序被处理器执行以实现权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311095471.0A CN117112060A (zh) | 2023-08-29 | 2023-08-29 | 组件库构建方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311095471.0A CN117112060A (zh) | 2023-08-29 | 2023-08-29 | 组件库构建方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117112060A true CN117112060A (zh) | 2023-11-24 |
Family
ID=88797969
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311095471.0A Pending CN117112060A (zh) | 2023-08-29 | 2023-08-29 | 组件库构建方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117112060A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117592315A (zh) * | 2024-01-18 | 2024-02-23 | 宁德时代新能源科技股份有限公司 | 电池设计管理方法、装置、系统、电子设备及存储介质 |
| CN117724988A (zh) * | 2024-02-18 | 2024-03-19 | 杭州玳数科技有限公司 | 一种基于Testing Library的UI组件库测试方法、存储介质及电子设备 |
-
2023
- 2023-08-29 CN CN202311095471.0A patent/CN117112060A/zh active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117592315A (zh) * | 2024-01-18 | 2024-02-23 | 宁德时代新能源科技股份有限公司 | 电池设计管理方法、装置、系统、电子设备及存储介质 |
| CN117724988A (zh) * | 2024-02-18 | 2024-03-19 | 杭州玳数科技有限公司 | 一种基于Testing Library的UI组件库测试方法、存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10565095B2 (en) | Hybrid testing automation engine | |
| US10635728B2 (en) | Manifest-driven loader for web pages | |
| US20230244465A1 (en) | Systems and methods for automated retrofitting of customized code objects | |
| US7877732B2 (en) | Efficient stress testing of a service oriented architecture based application | |
| KR101645052B1 (ko) | 디버깅 파이프라인 | |
| US7996816B2 (en) | Method and apparatus for dynamically binding service component implementations for specific unit test cases | |
| US9811325B2 (en) | Systems and methods for dynamically replacing code objects for code pushdown | |
| WO2021184725A1 (zh) | 用户界面测试方法、装置、存储介质及计算机设备 | |
| US20160004516A1 (en) | Code Generation Framework for Application Program Interface for Model | |
| CN117112060A (zh) | 组件库构建方法、装置、电子设备及存储介质 | |
| US20120246619A1 (en) | Automated testing of browser based rich internet applications (ria) delivered through proprietary frameworks | |
| Cheng et al. | Build Mobile Apps with Ionic 4 and Firebase | |
| US20170220613A1 (en) | Systems and methods for database orientation transformation | |
| US11741002B2 (en) | Test automation systems and methods using logical identifiers | |
| CN110955409B (zh) | 在云平台上创建资源的方法和装置 | |
| CN115658496A (zh) | 可扩展的Web自动化测试方法、系统、设备及存储介质 | |
| US20200097260A1 (en) | Software application developer tools platform | |
| CN113778897A (zh) | 接口的自动测试方法、装置、设备及存储介质 | |
| Pillai | Software architecture with Python | |
| CN116450107B (zh) | 低代码平台二次开发软件的方法、装置、电子设备 | |
| US10606569B2 (en) | Declarative configuration elements | |
| CN113238739A (zh) | 一种插件开发和数据获取方法、装置、电子设备及介质 | |
| CN116841543A (zh) | 基于Flutter动态生成跨平台多端应用的开发方法 | |
| CN116755669A (zh) | 一种基于dsl语言操作模型的低代码开发方法和工具 | |
| CN113504904A (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 |