CN113553035A - 一种通用的前端ui组件库的设计和构建方法 - Google Patents
一种通用的前端ui组件库的设计和构建方法 Download PDFInfo
- Publication number
- CN113553035A CN113553035A CN202110770933.9A CN202110770933A CN113553035A CN 113553035 A CN113553035 A CN 113553035A CN 202110770933 A CN202110770933 A CN 202110770933A CN 113553035 A CN113553035 A CN 113553035A
- Authority
- CN
- China
- Prior art keywords
- component
- file
- files
- component library
- project
- 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
- 238000010276 construction Methods 0.000 title claims abstract description 19
- 238000013461 design Methods 0.000 title claims abstract description 14
- 238000000034 method Methods 0.000 claims abstract description 51
- 238000013515 script Methods 0.000 claims abstract description 41
- 238000004806 packaging method and process Methods 0.000 claims abstract description 37
- 238000012360 testing method Methods 0.000 claims abstract description 33
- 238000011161 development Methods 0.000 claims abstract description 27
- 230000008569 process Effects 0.000 claims abstract description 21
- 238000011068 loading method Methods 0.000 claims abstract description 17
- 238000006243 chemical reaction Methods 0.000 claims description 18
- 238000012856 packing Methods 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 5
- 238000005538 encapsulation Methods 0.000 claims description 3
- 230000010354 integration Effects 0.000 claims description 3
- 230000003993 interaction Effects 0.000 claims description 2
- 238000012545 processing Methods 0.000 abstract description 6
- 238000009877 rendering Methods 0.000 abstract description 6
- 230000009286 beneficial effect Effects 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 12
- 230000008676 import Effects 0.000 description 7
- 230000008859 change Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 230000003252 repetitive effect Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000011156 evaluation Methods 0.000 description 1
- 230000008570 general process Effects 0.000 description 1
- 238000002898 library design Methods 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 238000003860 storage Methods 0.000 description 1
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
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3684—Test management for test design, e.g. generating new test cases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/21—Design, administration or maintenance of databases
-
- 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/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/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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种通用的前端UI组件库的设计和构建方法，属于计算机网络技术领域。本发明的方法包括：搭建前端脚手架；编写目录结构；构建前端UI组件库；编写自动化生成脚本；构建指令；构建项目入口；新建组件开发；打包和发布流程等步骤。对于组件开发人员，本发明为组件库提供了完备的目录结构、按需加载的方法、自动化生成模板脚本以及单元测试这些前置内容，有助于的开发者高效便捷以及统一规范的完成定制化的组件的开发；对于通用组件库使用者，使用该流程构建出的通用组件库，能够简化导入使用步骤，按需加载精简组件工程体积加速渲染速度，减小服务端渲染对CPU(中央处理器)以及带宽的压力。
Description
技术领域
本发明属于计算机网络技术领域，具体涉及一种通用的前端UI组件库的设计和构建方法。
背景技术
近年来，业务系统的功能变得越来越丰富。一个系统是一个独立的应用，随着业务需求的增加和迭代变更，系统的复杂度呈指数级增长，经常一个小的改动可能引起整体逻辑和多个文件的修改，牵一发而动全身。
这种传统的开发方式不仅效率低，且维护成本高，针对此种弊端，我们设想一个通用的解决方案。将一个大而复杂的场景分解为几个小的部分，彼此之间互不干扰，可以单独开发和维护，并且它们之间可以任意组合。这样，当某个模块发生问题时，只需要修改该模块即可。
这种化繁为简的思想在前端开发中的体现就是组件化，组件化的意义在于：
(1)为前端提供了很好的分治策略，可以实现独立维护，可维护性强。
(2)组件具有独立性，组件之间可以自由组合。
(3)页面只不过是组件的容器，负责组合组件即可形成功能完整的界面。
业界针对不同的框架和场景出现了多种开源通用组件库，它们都可以通过简单的引用方式嵌入到业务系统中。但是大多数公司还是会选择开发自己的通用组件库，以便更灵活的适应业务，增加系统的安全性和性能。
从头开发通用组件库的过程中，初始化构建组件库是一个非常繁琐的阶段。从基础的技术选型开始，不仅要进行基础的构建与打包配置，还需要添加一些插件进行代码规范。之后要考虑如何设计目录结构以承载组件、示例以及其他一些辅助工具，以方便整个组件库的开发流程。最后还需要建立一个打包和上传的规范，发布到远程的代码库供所有人下载使用。
开发者完成以上的步骤之后，才能开始真正地开发组件。目前，并不存在一个通用的流程，来规范一个前端UI组件库的初始化。
发明内容
(一)要解决的技术问题
本发明要解决的技术问题是如何提供一种通用的前端UI组件库的设计和构建方法，以解决现有技术无法通过通用流程规范一个前端UI组件库的初始化的问题。
(二)技术方案
为了解决上述技术问题，本发明提出一种通用的前端UI组件库的设计和构建方法，该方法包括如下步骤：
S1、搭建前端脚手架
前端脚手架用于生成一个具备完整文件目录结构的项目样板；
S2、编写目录结构
脚手架初始化完成后，创建一个完备的组件库模版，编写目录结构；
S3、构建前端UI组件库
构建流程从编写脚本、构建指令开始，依次生成项目入口、新建组件开发、开发完成后对项目进行打包并发布；具体包括：
S31、编写自动化生成脚本
通过运行指定脚本文件，自动生成或删除一个组件所关联的所有文件；
S32、构建指令
指令是执行脚本的命令，会放到package.json中的scripts中以及makefile中；
S33、构建项目入口
运行build:file，即会自动执行build-entry.js文件，以生成src目录的入口文件；
S34、新建组件开发
运行new.js文件，生成所有组件关联的文件；之后运行serve构建开发环境，serve指令会配置一个dev-server服务器，从examples目录的入口文件进入，后续对组件的编写、调试、运行都在此dev-server服务器下进行；
S35、打包和发布流程
删除之前打包的文件，生成入口文件，对代码进行检查，根据不同的配置分别进行全量或者按需打包组件和对应样式文件，最后将除了组件之外所用到的工具文件打包。
进一步地，所述步骤S1具体包括如下步骤：
S11、开发者使用命令行工具调用node.js，通过指令的方式快速搭建一个组件库项目；
S12、脚手架本身也是一个项目，首先要初始化该项目，生成package.json，在package.json中添加字段bin，用来存放一个可执行的文件，当项目全局部署后，使用bin字段中设置的cli指令来执行可执行的文件，用以构建一个新的组件库；
S13、使用工具解析命令携带的参数以及配置与开发者进行交互的相关属性，通过命令行携带不同参数和开发者交互的不同选择对组件库进行多样化的配置；
S14、拉取远程或创建本地的组件库模版，该模版是一个完善的组件库架构，包含环境的配置、语法检测的配置、单元测试的配置和持续集成的配置。
进一步地，所述步骤S2中的目录结构至少包括：package.json文件、src目录和examples目录。
进一步地，所述package.json文件包含了项目的版本、入口、脚本和依赖信息，该文件至少需要配置scripts、main、version和files，scripts包含相关脚本，main是目标入口文件，version是项目的版本，files是发布包时需要包含的文件/目录。
进一步地，所述src目录将编写的所有组件做一个统一处理，同时包含每个组件的样式和逻辑、自定义指令、项目整体入口、组件国际化、组件mixins、动画的封装和公共方法。
进一步地，所述examples目录用于展示组件的示例文档，在入口文件中将src目录中编写的所有组件引入，通过路由配置将每个组件展示到页面上。
进一步地，所述examples目录是独立的项目，编写一个loader，loader是资源和模块的转换器，接受源文件为参数，返回转换后的结果；该loader负责将标题、示例组件和示例代码用特殊标识包裹起来，将docs目录中markdown文件中所有用该标识包裹的内容抽出来并合并，最后生成一个完整的组件。
进一步地，所述步骤S31自动化生成相关的文件包括：components.json文件、new.js文件和delete.js文件以及build-entry.js文件。
进一步地，所述步骤S34对组件的编写时使用自动生成工具，基于node.js的文件操作方式，允许组件开发人员使用自动化脚本，产生结构化的代码模板，自动生成工具将根据组件开发者需求，自动生成JavaScript，CSS，markdown文件与标准的结构化目录。
进一步地，所述步骤S35中的按需打包使用多入口打包和代码转换插件来实现对js逻辑文件和css样式文件的按需加载，包括两部分工作：
(1)组件的独立打包，可以利用webpack或是gulp配置多入口的打包方式，在entry项目下配置一个或者多个key-value键值对，key是对应组件名，value是对应组件的js入口文件；将组件库源码中的所有组件文件直接编译写入到目标打包文件夹中，编译后的目录结构和组件源码的目录结构是完全一致的；
(2)引入代码进行转换，代码转换的工具会在编译时完成代码自动转换，在进行ES语法的向前兼容的同时实现对组件按需加载的语法转化。
(三)有益效果
本发明提出一种通用的前端UI组件库的设计和构建方法，对于组件开发人员，为组件库提供了完备的目录结构、按需加载的方法、自动化生成模板脚本以及单元测试这些前置内容，有助于的开发者高效便捷以及统一规范的完成定制化的组件的开发。对于通用组件库使用者，使用该流程构建出的通用组件库，能够简化导入使用步骤，按需加载精简组件工程体积加速渲染速度，减小服务端渲染对CPU(中央处理器)以及带宽的压力。
附图说明
图1为本发明组件库目录构成；
图2为自动生成功能各模块间依赖关系；
图3为本发明的通用创建流程。
具体实施方式
为使本发明的目的、内容和优点更加清楚，下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。
为了解决以上问题，本发明旨在设计一套通用的前端UI组件库设计方法和构建流程，方便开发人员快速地初始化一套属于自己的前端UI组件库。作为一个完善的组件库项目模版，需要包含清晰目录结构、组件的按需加载、便捷的脚本文件和完备的单元测试这四个部分，我们对这四个部分的内容设计如下：
1.目录结构设计
目录结构对于大型项目是非常重要的，合理清晰的目录结构对于后期的开发和扩展都是非常有意义的。组件库的目录构成如图1所示，可以分为四个部分，包括工程化相关的各类文件、组件库依赖的应用框架以及测试框架等配置文件、组件库核心源码和组件库的示例。根据这四大类可以细分为：组件源码、示例代码、文档、打包结果、测试代码、构建打包文件、配置文件(例如代码规范、单元测试)和自动化脚本等。这些部分需要合理的目录结构来组织，本发明设计的目录组成部分与关系阐述如下：
(1)组件源码：通用组件库运行，样式，处理逻辑的目录，本发明所创建的组件库提供可自动化生成组件代码模板，开发组件时，只需要注重组件功能上的实现，减少繁琐步骤与冗余代码，提升开发效率。
(2)示例代码与文档：用于存放文档，各组件例程相关文件的目录。它是一个可独立运行的项目，包含用于展示各个组件的页面。让使用者能够降低学习曲线，快速理解组件库的使用方式，更加简单明了地上手这些组件。
(3)配置文件：用于存放配置组件库相关版本信息，运行环境，依赖插件与打包选项的目录。
(4)自动化脚本：组件库代码模板自动化生成的核心目录，该目录存放组件库提供的自动生成脚本，基于node.js(一个JavaScript运行时平台，为JavaScript脚本程序提供一个运行时环境)实现对文件的操作，从而自动化生成编写组件的模版代码。
(5)构建与打包：该目录保存用于构建和打包组件库项目的文件。
(6)打包结果：存放源码打包结果的目录，该目录下存放的文件可以直接发布，开发者使用组件库时调用的就是该目录。
(7)测试代码：组件开发后，为每个组件编写的单元测试文件。使用自动化测试工具对已经开发好的组件进行测试工作。
2.按需加载
就算业务系统只使用了组件库中的部分组件，它的入口文件也会将所有的组件文件涉及到的依赖和资源全部打包，这种就是全量引入。几乎每个项目都会使用比如按钮、输入框、下拉选项、表格等常见基础组件，但部分组件仅在少数特殊业务线使用，例如富文本编辑器、音乐播放器。
基于以上背景，本专利配置了按需加载的功能，按需引入组件的评定标准为：
(1)较少业务系统使用。
(2)组件中包含体积较大或资源文件较多的第三方依赖。
(3)未被其他组件内部引用。
按需加载的实现有以下两种方式：
(1)使用多入口打包和代码转换插件来实现对js逻辑文件和css样式文件的按需加载。
(2)使用ES6module(基于EcmaScript6标准的模块化实现方案)的tree shakeing(摇树)功能，对项目各模块以及使用到的依赖文件进行精简与打包，从而实现ES6 module风格的按需加载。但是该方式只对JavaScript(一种脚本高级脚本语言)逻辑文件有用，遇到CSS(层叠样式用来定义浏览器中超文本的表现样式)样式文件还需要手动的引入。
对比上述两种方式后，本发明使用第一种进行按需加载，配置按需加载的主要工作分为两个部分，一是组件的独立打包，可以利用webpack(一种前端模块化打包器)或是gulp(一种前端自动化构建工具)配置多入口的打包方式，在entry项目下配置一个或者多个key-value键值对，key是对应组件名，value是对应组件的js入口文件。将组件库源码中的所有组件文件直接编译写入到目标打包文件夹中。编译后的目录结构和组件源码的目录结构是完全一致的，仅仅只是将源码经过一次Babel处理而已，为按需加载的独立组件引入提供前提条件。
二是将引入代码进行转换，代码转换是为了让开发者使用ES6 moudules的书写风格更简便的引入组件。要引入组件需要同时引入它的逻辑和样式代码。代码转换的工具是为了简化引用过程，代码转换的工具会在编译时完成自动转换。假设打包后某个组件xxx和其样式所在路径为componets/lib/xxx，代码转换工具的转换前后代码如下：
//转换前
import{xxx}from'componets
//转换后
import xxx form'componets/lib/xxx'
import'componets/lib/xxx/xxx.css'
上述转化过程使用Babel自带的AST(抽象语法树)操作，首先@babel/parser模块将代码解析为抽象语法树，利用@babel/traverse模块遍历语法树找到如表1中转换前的相关语法节点，然后使用@babel/types模块将其转化为如表1转换后单独引用组件的语法,最后利用@babel/generator模块将修改的抽象语法树生成新的代码字符串，这样就完成了在进行ES语法的向前兼容的同时实现对组件按需加载的语法转化。
3.自动化生成代码
本发明设计了自动生成代码模板的功能，能够基于node.js的文件操作方式，允许组件开发人员使用自动化脚本，产生结构化的代码模板，从而省去重复冗余的文件创建和代码编写工作，保证代码架构与逻辑统一。自动生成工具将根据组件开发者需求，自动生成JavaScript，CSS，markdown(一种文本格式)等文件与标准的结构化目录，本专利依赖的模块如图2:
(1)MakeFile模块，是组件开发人员个性化生成组件模板文件的入口，该文件通过规范化的参数收集组件开发人员的需求。
(2)node.js模块，是代码生成的核心，MakeFile模块将收集的参数交给本模块，通过node.js对文件的读写能力，产生模板文件。
(3)generat file模块，是代码生成的结果，是组件开发人员将要编写的文件模板。
4.单元测试
本发明允许组件开发人员先根据需求进行开发，以行为驱动开发的方式进行开发，然后开发人员根据开发的组件功能需求编写测试代码，本发明将自动收集开发人员书写的特定格式的测试文件，并对测试文件进行自动调用，产生测试结果以及覆盖率文件，简化用户测试操作，提高代码编写质量。
在自动生成代码时本专利会生成预先配置好开箱即用的jest(一款JavaScript环境下的单元测试工具)环境与测试代码模板，并为开发人员提供包括匹配器，断言，mock(用来模拟外部依赖函数)，以及钩子函数等方式对开发的代码进行测试，通过执行本专利的测试模块能够自动扫描各组件路径下开发人员编写的测试文件，对开发的组件进行单元测试。
本发明的创新点在于：对于组件开发人员，本发明设计了一套能够快速建立起一个完整的工程化组件库的开发流程。为组件库提供了完备的目录结构、按需加载的方法、自动化生成模板脚本以及单元测试这些前置内容，有助于的开发者高效便捷以及统一规范的完成定制化的组件的开发。
对于通用组件库使用者，使用该流程构建出的通用组件库。能够简化导入使用步骤，按需加载精简组件工程体积加速渲染速度，减小服务端渲染对CPU(中央处理器)以及带宽的压力。
参见图3，本发明所述的创建组件库通用流程包括以下步骤：
S1、搭建前端脚手架
上述内容只是提供了一整套构建组件库的设计方法和思路，要将这些内容整合成为一个完善的组件库并且能够快速提供给开发者使用，需要把这些前置工作有效提炼出来，搭设一个前端脚手架。
前端脚手架本质上就是一个为了保证各施工过程顺利进行而搭设的工作平台。它可以快速生成一个具备完整文件目录结构的项目样板，提升开发者的开发效率和舒适性。可以将脚手架的构建过程划分为以下四个步骤：
S11、开发者使用命令行工具(command line interface)调用node.js，通过指令的方式快速搭建一个组件库项目。
S12、脚手架本身也是一个项目，首先要初始化该项目，生成package.json(node.js环境下包含文件所在工程的基本配置信息的文件)。在package.json中添加字段bin，用来存放一个可执行的文件。当项目全局部署后，就可以使用bin字段中设置的cli指令来执行可执行的文件，用以构建一个新的组件库。
S13、使用工具解析命令携带的参数以及配置与开发者进行交互的相关属性，通过命令行携带不同参数和开发者交互的不同选择可以对组件库进行多样化的配置。
S14、最重要的部分是拉取远程或创建本地的组件库模版，该模版是一个完善的组件库架构，包含环境的配置、语法检测的配置、单元测试的配置、持续集成的配置等等。
S2、编写目录结构
脚手架初始化完成后，就需要根据发明内容中的几个部分创建一个完备的组件库模版，编写目录结构。
根据发明内容中设计的目录结构，实现如下：
-build(构建)：存放构建、打包、自动化生成相关的配置文件。
-examples(示例)：存放组件相关的示例代码，是一个独立的项目。
-docs(文档)：存放所有的组件示例文档，格式为markdown。
-pages(页面)：存放项目相关的页面。
-components(组件)：存放项目相关的公共业务组件。
-styles(样式)：存放项目相关的公用样式。
-router(路由)：存放项目相关的路由配置。
-index.js：项目的入口文件，在这里引入src中写好的所有组件。
-src：存放入口文件、组件源码和组件相关的辅助文件。
-components(组件)：存放所有组件源码，每个组件有一个独立文件夹，存放逻辑、样式和单元测试文件。
-directives(指令)：存放所有的自定义指令。
-mixins(混合)：存放组件用到的所有公用逻辑。
-styles(样式)：存放所有组件公用样式，包含通用常量、动画、工具、风格、字体库等等。
-utils(工具)：存放所有的工具类和函数。
-index.js：组件库的入口文件，在这里暴露所有的组件和指令。
-test(测试)：存放单元测试相关的文件。
-components.json：实时的组件列表文件。
-eslintrc.js：JavaScrip语法规则和代码风格的检测规范。
-stylelintrc.js：样式代码检测规范。
-.babelrc.js：Babel(JavaScript语法的编译器)相关配置。
-jest.config.js：测试相关配置，使用的测试框架不同，文件名会有所不同。
-Makefile：makefile脚本集合。
-package.json：跟踪依赖关系和元数据。
-README.md：项目说明文档。
-.gitignore：上传远程git仓库时需要忽略的文件说明。
2.1package.json文件
通常我们去配置一个大型项目都是从package.json文件开始的，这里面包含了项目的版本、入口、脚本、依赖等关键信息。
有几个关键字段是我们构建组件库项目必须要设置的，下面将对它们的配置项一一进行分析和解释。
(1)scripts：scripts是package.json中最重要的一个对象，它包含开发、测试、生产构建，打包、部署，测试用例等相关脚本。脚本命令可以使用脚手架提供的，也可以根据项目的需求自定义内容。
(2)main：目标入口文件，外部库引入时的实际引用地址。比如某个名为xxx的组件库，指令import XXX from'xxx'引入的就是main中配置的文件地址。
(3)version：项目的版本，发布项目时通过控制版本更新改动，相同的版本不能进行二次发布。
(4)files：指定发布包时需要包含的文件/目录，有些文件或目录是没有必要上传的，比如说示例文件目录examples。
2.2src目录
该目录的作用就是将编写的所有组件做一个统一处理，同时包含每个组件的样式和逻辑、自定义指令、项目整体入口、组件国际化、组件mixins(混入)、动画的封装和公共方法。
一个组件通常拥有几个固定文件，下面以Input(输入框)组件为例，其中所用的编程语言根据实际应用做出选择。
-index.js：每个组件的入口文件，负责引入组件并抛出。
-input.js：组件源码。
-input.scss：每个组件的样式。
-var.scss：每个组件样式的公共常量。
-input.spec.js：每个组件的单元测试文档。
2.3examples目录
相当于一个独立的项目，主要的功能是展示组件的示例文档，在入口文件中将src目录中编写的所有组件引入，通过路由配置将每个组件展示到页面上。
在docs目录中使用markdown格式编写示例，每个md(markdown)文件分别对应着一个组件的展示页面。使用这种文档展示方式，需要克服的一个技术难题就是如何把md文件编译成一个组件需要的格式展示在页面上。比如Vue组件的vue文件，React组件的jsx文件等等。
解决思路是编写一个loader，loader是资源和模块的转换器，本身是一个函数，接受源文件为参数，返回转换后的结果。该loader负责将标题、示例组件和示例代码用特殊标识包裹起来。将一个md文件中所有用该标识包裹的内容抽出来并合并，最后生成一个完整的组件。
S3、设计构建流程
构建流程是指从编写脚本、构建指令开始，依次生成项目入口、新建组件开发、开发完成后对项目进行打包并发布的整个过程。
S31、编写自动化生成脚本
组件库的开发会有很多重复性的工作：每编写一个组件，需要在src目录中为组件添加一个对应的文件目录，创建相应的逻辑、样式和测试文件，然后在入口文件中添加引入语句。同时需要在examples目录中为组件添加示例文件，并在其入口文件和路由文件中添加引入语句。
自动化生成是指通过运行指定脚本文件，自动生成或删除一个组件所关联的所有文件。这样做可以简化开发时的重复性工作，并且不会有所遗漏。
本发明中负责完成自动化生成相关的文件有：
(1)components.json文件：该文件需要记录所有组件的路径关系，最终以key-value(键值对)的形式保存在该文件中，方便后续在自动生成src目录下的入口文件时批量导入组件。key-value(键值对)的格式形如：“组件：组件路径”。
(2)new.js文件和delete.js文件：这两个脚本文件放在build目录下，负责生成和删除组件相关的所有文件。它涉及到生成或删除的文件有：
-examples目录下的路由配置文件、docs下的md示例文件。
-src/components目录下的对应组件文件，包含入口文件、测试和样式共四个文件。
-components.json文件中对应的key-value值。
(3)build-entry.js文件：该脚本同样放在build目录下，读取components.json获取所有的组件列表，依次遍历并引入每个组件，用以生成src目录下的入口文件。在开发和打包之前都要执行该脚本以生成最新的入口文件。
S32、构建指令
指令是执行脚本的命令，会放到package.json中的scripts中以及makefile中。一个完整的组件库项目需要以下几个基础指令：
-serve：用来构建开发环境。
-new:自动生成组件关联文件，即执行new.js文件。
-delete：自动删除组件关联文件，即执行delete.js文件。
-build:file：自动生成入口文件，即执行build-entry.js文件。
-build:production：全量打包组件库。
-build:lib：按需打包组件库。
-build:utils：打包所有src下除了components的所有文件，避免引入时的多次打包。
-test:unit：对组件进行单元测试。
-eslint：js代码检测。
-stylelint：样式代码检测。
S33、构建项目入口
运行build:file，即会自动执行build-entry.js文件，以生成src目录的入口文件。在构建开发环境和打包之前都需要更新最新的入口文件。
S34、新建组件开发
运行new.js文件，生成所有组件关联的文件。之后运行serve构建开发环境，serve指令会配置一个dev-server服务器，从examples目录的入口文件进入，后续对组件的编写、调试、运行都在此dev-server服务器下进行。该部分会使用自动生成代码模板的功能。
S35、打包和发布流程
打包包含几个步骤，首先删除之前打包的文件，然后根据components.json生成入口文件，之后使用eslint和stylelint对代码进行检查，根据不同的配置分别进行全量或者按需打包组件和对应样式文件，最后将除了组件之外所用到的工具文件打包。该部分可以实现按需加载。
项目的发布根据实际需要，可以进行git(一个版本控制工具)发布、npm(node.js环境下的软件包管理工具)发布和官网发布。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。
Claims (10)
1.一种通用的前端UI组件库的设计和构建方法，其特征在于，该方法包括如下步骤：
S1、搭建前端脚手架
前端脚手架用于生成一个具备完整文件目录结构的项目样板；
S2、编写目录结构
脚手架初始化完成后，创建一个完备的组件库模版，编写目录结构；
S3、构建前端UI组件库
构建流程从编写脚本、构建指令开始，依次生成项目入口、新建组件开发、开发完成后对项目进行打包并发布；具体包括：
S31、编写自动化生成脚本
通过运行指定脚本文件，自动生成或删除一个组件所关联的所有文件；
S32、构建指令
指令是执行脚本的命令，会放到package.json中的scripts中以及makefile中；
S33、构建项目入口
运行build:file，即会自动执行build-entry.js文件，以生成src目录的入口文件；
S34、新建组件开发
运行new.js文件，生成所有组件关联的文件；之后运行serve构建开发环境，serve指令会配置一个dev-server服务器，从examples目录的入口文件进入，后续对组件的编写、调试、运行都在此dev-server服务器下进行；
S35、打包和发布流程
删除之前打包的文件，生成入口文件，对代码进行检查，根据不同的配置分别进行全量或者按需打包组件和对应样式文件，最后将除了组件之外所用到的工具文件打包。
2.如权利要求1所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S1具体包括如下步骤：
S11、开发者使用命令行工具调用node.js，通过指令的方式快速搭建一个组件库项目；
S12、脚手架本身也是一个项目，首先要初始化该项目，生成package.json，在package.json中添加字段bin，用来存放一个可执行的文件，当项目全局部署后，使用bin字段中设置的cli指令来执行可执行的文件，用以构建一个新的组件库；
S13、使用工具解析命令携带的参数以及配置与开发者进行交互的相关属性，通过命令行携带不同参数和开发者交互的不同选择对组件库进行多样化的配置；
S14、拉取远程或创建本地的组件库模版，该模版是一个完善的组件库架构，包含环境的配置、语法检测的配置、单元测试的配置和持续集成的配置。
3.如权利要求2所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S2中的目录结构至少包括：package.json文件、src目录和examples目录。
4.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述package.json文件包含了项目的版本、入口、脚本和依赖信息，该文件至少需要配置scripts、main、version和files，scripts包含相关脚本，main是目标入口文件，version是项目的版本，files是发布包时需要包含的文件/目录。
5.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述src目录将编写的所有组件做一个统一处理，同时包含每个组件的样式和逻辑、自定义指令、项目整体入口、组件国际化、组件mixins、动画的封装和公共方法。
6.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述examples目录用于展示组件的示例文档，在入口文件中将src目录中编写的所有组件引入，通过路由配置将每个组件展示到页面上。
7.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述examples目录是独立的项目，编写一个loader，loader是资源和模块的转换器，接受源文件为参数，返回转换后的结果；该loader负责将标题、示例组件和示例代码用特殊标识包裹起来，将docs目录中markdown文件中所有用该标识包裹的内容抽出来并合并，最后生成一个完整的组件。
8.如权利要求1-7任一项所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S31自动化生成相关的文件包括：components.json文件、new.js文件和delete.js文件以及build-entry.js文件。
9.如权利要求1-7任一项所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S34对组件的编写时使用自动生成工具，基于node.js的文件操作方式，允许组件开发人员使用自动化脚本，产生结构化的代码模板，自动生成工具将根据组件开发者需求，自动生成JavaScript，CSS，markdown文件与标准的结构化目录。
10.如权利要求1-7任一项所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S35中的按需打包使用多入口打包和代码转换插件来实现对js逻辑文件和css样式文件的按需加载，包括两部分工作：
(1)组件的独立打包，可以利用webpack或是gulp配置多入口的打包方式，在entry项目下配置一个或者多个key-value键值对，key是对应组件名，value是对应组件的js入口文件；将组件库源码中的所有组件文件直接编译写入到目标打包文件夹中，编译后的目录结构和组件源码的目录结构是完全一致的；
(2)引入代码进行转换，代码转换的工具会在编译时完成代码自动转换，在进行ES语法的向前兼容的同时实现对组件按需加载的语法转化。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110770933.9A CN113553035A (zh) | 2021-07-08 | 2021-07-08 | 一种通用的前端ui组件库的设计和构建方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110770933.9A CN113553035A (zh) | 2021-07-08 | 2021-07-08 | 一种通用的前端ui组件库的设计和构建方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113553035A true CN113553035A (zh) | 2021-10-26 |
Family
ID=78131430
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110770933.9A Pending CN113553035A (zh) | 2021-07-08 | 2021-07-08 | 一种通用的前端ui组件库的设计和构建方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113553035A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113986248A (zh) * | 2021-11-03 | 2022-01-28 | 北京字节跳动网络技术有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| CN114444001A (zh) * | 2022-01-29 | 2022-05-06 | 北京达佳互联信息技术有限公司 | 网站生成方法、装置、电子设备、存储介质、计算机产品 |
| CN114461205A (zh) * | 2022-04-13 | 2022-05-10 | 杭州比智科技有限公司 | 数据可视化平台及适用于数据可视化平台的组件管理方法 |
| CN117289930A (zh) * | 2023-11-27 | 2023-12-26 | 杭州比智科技有限公司 | 一种适用于数据大屏自定义主题样式的构建方法及系统 |
| CN117852485A (zh) * | 2024-03-01 | 2024-04-09 | 芯能量集成电路(上海)有限公司 | 一种fpga布局布线方法及系统 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140129173A1 (en) * | 2012-11-07 | 2014-05-08 | Software Development Technologies | Application Component Testing |
| CN110531983A (zh) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | 一种基于多项目构建的前端页面按需打包方法 |
| CN110780853A (zh) * | 2019-09-28 | 2020-02-11 | 同程网络科技股份有限公司 | 前端框架及开发方法、存储介质、电子设备 |
| CN111142847A (zh) * | 2019-12-31 | 2020-05-12 | 杭州涂鸦信息技术有限公司 | 一种系统自动生成方法及系统 |
| CN111427558A (zh) * | 2020-04-10 | 2020-07-17 | 创盛视联数码科技（北京）有限公司 | 基于webpack定制前端自动化开发环境的方法 |
| CN112162729A (zh) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | 一种基于vue的组件开发及展示方法 |
-
2021
- 2021-07-08 CN CN202110770933.9A patent/CN113553035A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140129173A1 (en) * | 2012-11-07 | 2014-05-08 | Software Development Technologies | Application Component Testing |
| CN110531983A (zh) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | 一种基于多项目构建的前端页面按需打包方法 |
| CN110780853A (zh) * | 2019-09-28 | 2020-02-11 | 同程网络科技股份有限公司 | 前端框架及开发方法、存储介质、电子设备 |
| CN111142847A (zh) * | 2019-12-31 | 2020-05-12 | 杭州涂鸦信息技术有限公司 | 一种系统自动生成方法及系统 |
| CN111427558A (zh) * | 2020-04-10 | 2020-07-17 | 创盛视联数码科技（北京）有限公司 | 基于webpack定制前端自动化开发环境的方法 |
| CN112162729A (zh) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | 一种基于vue的组件开发及展示方法 |
Non-Patent Citations (5)
| Title |
|---|
| "vue create 解释", pages 1 - 3, Retrieved from the Internet <URL:《https://www.codenong.com/js72c3da7b013c/》> * |
| DAVID FLANAGAN: "《JavaScript权威指南》", vol. 1, 机械工业出版社, pages: 568 - 576 * |
| SQ-BLOG: "手把手做一个基于vue-cli的组件库（上篇）", pages 1 - 8, Retrieved from the Internet <URL:https://www.cnblogs.com/sq-blogs/p/12822206.html> * |
| SQ-BLOG: "手把手做一个基于vue-cli的组件库（下篇）", pages 1 - 14, Retrieved from the Internet <URL:https://www.cnblogs.com/sq-blogs/p/12822328.html> * |
| 喂她柠檬茶: "如何用上webpack/gulp/rollup，搭建一个基于Vue的UI库脚手架", pages 1 - 22, Retrieved from the Internet <URL:《https://juejin.cn/post/6844904038840926215》> * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113986248A (zh) * | 2021-11-03 | 2022-01-28 | 北京字节跳动网络技术有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| WO2023078053A1 (zh) * | 2021-11-03 | 2023-05-11 | 北京字节跳动网络技术有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| CN113986248B (zh) * | 2021-11-03 | 2023-05-16 | 抖音视界有限公司 | 一种代码生成方法、装置、计算机设备及存储介质 |
| CN114444001A (zh) * | 2022-01-29 | 2022-05-06 | 北京达佳互联信息技术有限公司 | 网站生成方法、装置、电子设备、存储介质、计算机产品 |
| CN114461205A (zh) * | 2022-04-13 | 2022-05-10 | 杭州比智科技有限公司 | 数据可视化平台及适用于数据可视化平台的组件管理方法 |
| CN117289930A (zh) * | 2023-11-27 | 2023-12-26 | 杭州比智科技有限公司 | 一种适用于数据大屏自定义主题样式的构建方法及系统 |
| CN117289930B (zh) * | 2023-11-27 | 2024-02-02 | 杭州比智科技有限公司 | 一种适用于数据大屏自定义主题样式的构建方法及系统 |
| CN117852485A (zh) * | 2024-03-01 | 2024-04-09 | 芯能量集成电路(上海)有限公司 | 一种fpga布局布线方法及系统 |
| CN117852485B (zh) * | 2024-03-01 | 2024-06-07 | 芯能量集成电路(上海)有限公司 | 一种fpga布局布线方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113553035A (zh) | 一种通用的前端ui组件库的设计和构建方法 | |
| Beazley | Automated scientific software scripting with SWIG | |
| Bergel et al. | Deep Into Pharo | |
| KR101099173B1 (ko) | 소프트웨어 스위트를 구축하기 위한 시스템 및 방법 | |
| Bolin | Closure: The definitive guide: Google tools to add power to your JavaScript | |
| CN112835584B (zh) | 基于ReactNative实现组件扩展和管理的方法 | |
| CN115639980A (zh) | 一种低代码平台可拖拽的前端逻辑编排方法及装置 | |
| CN112860260A (zh) | 一种在高校场景下基于web的跨平台应用构建工具及方法 | |
| Thakkar | Building react apps with server-side rendering | |
| CN112162729A (zh) | 一种基于vue的组件开发及展示方法 | |
| García | Hands-On Selenium WebDriver with Java | |
| Dinh et al. | Modern front-end web development: how libraries and frameworks transform everything | |
| CN115794254A (zh) | 基于云计算的组件研发管理平台和方法 | |
| García-Pradales et al. | An s (CASP) In-Browser Playground based on Ciao Prolog. | |
| Bampakos et al. | Learning Angular: A no-nonsense guide to building web applications with Angular 15 | |
| Shute | Advanced JavaScript: Speed up web development with the powerful features and benefits of JavaScript | |
| CN113641351A (zh) | 一种一键式脚手架完成前端基础功能搭建方法 | |
| Roldán | React Design Patterns and Best Practices: Design, build and deploy production-ready web applications using standard industry practices | |
| Roughley | Starting Struts 2 | |
| CN117234529A (zh) | 一种基于dsl解析资源生成api的方法 | |
| Schröpfer et al. | A Generic Projectional Editor for EMF Models. | |
| Lilis et al. | An integrated implementation framework for compile‐time metaprogramming | |
| Jaber et al. | A high-level modeling language for the efficient design, implementation, and testing of Android applications | |
| Åkesson et al. | Jatte: A tunable tree editor for integrated DSLs | |
| Di Francesco et al. | Professional JavaScript: Fast-track your web development career using the powerful features of advanced JavaScript |
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 |