pvmed/pv-design

柏视组件库

注意：

1. 确保组件的向下兼容性，不要破坏现有功能：不缩减 API，不改变旧 API 的定义，如有必要，请提供迁移方案。
2. 保证组件增量更新。
3. 保证组件的类型声明正确性。

介绍

技术栈说明

• 框架: React-ts(swc*) ○ 采用 ts 的原因是打包版本中可以继承 antd-design 的 type 定义，简化组件的类型声明，提高使用时的便利性 ○ eslint
• 打包工具: Vite(ESBuild) ○ 快速、简单 ○ 并且打包时，cssToJS 的功能可以直接使用 esbuild 的插件来实现
• 样式: less
• API 文档生成: typedoc
• 组件 demo：HTML(需要 gitlab pages 的支持)或 MD
• 组件展示：Storybook

使用准备动作

1. yarn install / npm install (建议开发前都执行一次)

开发流程（新增组件）

组件本地预览

1. 创建组件：在  /components  目录下创建组件文件夹和文件。
2. 组件命名约束：使用 Pv 拼接组件名，如：PvTabs
3. 编写文档：在  /src/template  目录下为每个组件编写使用文档（目录名称与 components 下的一致），并在统计的 index.ts 中引入新增的组件。
4. 编译组件：npm run build:watch，确保组件库的实时更新。
5. 运行组件： npm run start，查看组件的效果。

storybook 预览

1. 创建组件 stories：在  /stories  目录下为每个组件编写 stories（目录名称为 xxx.stories.ts）。
2. 运行 storybook：npm run storybook，查看组件的效果。

组件发布流程

发布组件库如下： cd components npm run build npm publish

本地调试 link

1. 为了确保开发过程中可能会更新组件，所以先在终端执行 npm run build:watch，确保组件库的实时更新。
2. 进入 components 目录：cd components
3. 链接组件库：npm link
4. 在其他项目中使用组件库：npm link pv-design
5. 后续正常的使用组件库和开发即可
6. 当需要取消使用组件库时，执行：npm unlink pv-design
7. 现在面临的问题，由于组件库更新了，应用组件库的项目引用的还是旧的代码，需要在应用组件库的项目中重新 build，才能够解决，这个问题待解决。