@hz-lib/han-ui-next NPM

组件库开发指南与规范

前言

组件库fork自element-plus。开发语言为vue3和typescript，内部添加了一些自定义的组件，并且封装了一些区块组件，并不包含业务组件。

开发规范已element-plus的为基准，但鉴于element项目开发周期较短，甚至代码内部有些已定义未使用的代码，所以在借鉴其他优秀组件库如antd和开源项目的基础上，制定本指南和规范，并尽量使开发体验与业务项目保持一致。

因组件库的特殊性，架构设计与平时业务项目区别很大，故对组件库的设计进行一个介绍及指南。

开发指南

步骤如下

以caption为例

运行script下的 gc.sh自动在package下新建组件文件夹
在packages/theme-chalk下添加组件scss文件，如captions.scss
在packages/theme-chalk/index.scss内引入上述scss
在packages/han-ui-next/index内引入并注册组件
在packages/han-ui-next/package.json内引入组件依赖
运行yarn bootstrap将新组件引入依赖
运行yarn run website-dev:play 打开模拟测试环境并将代码调试完成
在组件文件夹下的tests下完善测试用例
在website/docs下新建md文件，如caption.md
在nav.config.json内配置上述md文件
运行yarn run website-dev跑起来文档网站
在上述md文件中，完善文档、测试功能。
在vetur下配置vetur自动提示
运行yarn run build打包组件库

如果想了解具体架构，请看下面的章节。不了解也不影响开发。

element源码架构设计

使用的库

rollup

通俗的讲用于打包JavaScript，可以把js多个js文件合并为一个大的文件，并且在这个过程中，可以通过插件进行处理Typescript、提取css等。文档点此，开发ui库入门点此。element-plus用rollup打包组件bundle

webpack

基础-略

gulp

基于node的自动化构建工具，主要就是用于任务自动化，基于stream，可以使用各种插件处理文件。

组件库用于样式文件和字体图标，hanui第一版也使用了用于将css色值处理为css变量。

lerna

把代码库组织成多包储存库，组件库内各个组件都是一个单独的包，都有自己的package.json。主要为了按需引用。我们自己的业务项目也有使用，为了解决多地区与基础产品的组织问题。

目录解析

build：打包相关
- bincomp：扫描packages下所有的包运行build.component.js打包为ems格式
- build-locale：用于国际化
- build-util：rollup打包工具，供sh脚本使用
- build.component：rollup打包组件为bundle
- build.comps：对打包的组件修改名称，供sh脚本使用
- build.entry：打包入口，供sh脚本使用
- build：定义基础的rollup打包方法
- common：略
- gen-type：通过node的fs把组件库内部定义的typescript类型文件拷贝到打包后的库
- gen-version：略
- getCpus：略
- getPkgs：略
- rollup.config.bundle：打包packages/element-plus/index.ts
- rollup.config：没发现被使用
- webpack.config：TODO
packages：组件与样式
sripts：sh脚本
- build：下载依赖并打包
- gc：自动在packages新建标准的组件
- pulish：提交脚本
- update-versions：略
typings：定义了全局的类型
vetur：给vetur提供了自动提示
website：文档项目
- demo-styles：md内的demo需要的样式
- docs
  - zh-CN：这里写md文档
- play：在此可以随意测试，已经自动导入所有组件

build时发生了什么

yarn bootstrap
yarn clean:lib
yarn build:esm-bundle
yarn build:lib
yarn build:lib-full
yarn build:esm
yarn build:utils
yarn build:locale
yarn build:locale-umd
yarn build:theme