react hook+typescript+storybook搭建前端公共業務組件庫

原文鏈接： https://www.cnblogs.com/yalong/p/14703242.html

背景:

1. 公司內部系統眾多，如此眾多的系統中，有好多業務組件是相同，或者類似的，前端同學如果每次重寫，或者copy過來代碼，其實都比較低效
2. 不同的UI或者產品同學，設計相同功能的時候，可以設計的都不一樣，導致前端同學重寫新的組件，其實好多情況下，UI 或者產品同學，可以復用現有的組件。

出於以上背景 就需要一種方案，既可以降低前端同學的開發成本，又可以統一公司內部的公共業務組件， 所以產生了公共業務組件庫一說

希望組件庫支持的功能

1. 技術棧統一，公司目前使用的是reat hook + typescript， 希望組件庫也是這套技術方案
2. 自動生成注釋、組件參數，並可以演示代碼，調試代碼
3. 組件庫支持treeshaking，不會導致使用組件庫，就極大的增加代碼體積

所以就產生了business-component-library（組件庫的npm名字叫yd-business-library）

組件庫源碼地址： https://github.com/YalongYan/business-component-library
相關注釋， 解釋都寫在代碼里了。

組件庫展示圖如下：

公共業務組件庫

yd-business-library

安裝方法

npm i yd-business-library -S

使用方法

import { Expression } from 'yd-business-library'

技術棧

• react hook
• typescript
• storybook
• gulp
• scss

發布 npm 流程

• npm run build
• npm publish (沒登錄的先 npm login)

機器上啟動靜態 storyBook 站點

• git pull 拉取代碼
• npm run server
  如果本地起來靜態站點，直接本地ip + 7751端口訪問，比如：
  http://127.0.0.1:7751/index.html

主要文件目錄如下

|_ _ _  .storybook // storybook 相關配置
|       |
|       |_ _ _ _  addons.ts // 插件注冊文件
|       |
|       |_ _ _ _  config.tsx // 配置文件
|       |
|       |_ _ _ _  webpack.config.js // 讓stroybook 支持ts,自動生成參數
|
|_ _ _  dist // 打包后的文件
|
|_ _ _  server // 服務相關
|       |
|       |_ _ _ pm2.json
|       |
|       |_ _ _ server.js
|       |
|       |
|_ _ _  src
|       |_ _ _ components
|       |
|       |_ _ _ styles
|       |
|       |_ _ _ index.tsx
|       |
|       |_ _ _ welcome.stories.tsx
|       |
|       |
|_ _ _ storybool-static // storybook打包的靜態文件
|
|_ _ _ gulpfile.js // gulp配置，用來編譯scss
|
|_ _ _ tsconfig.build.json // ts 配置， 用來編譯src下的ts文件

package.json scripts說明

1. start -- 啟動storybook
2. clean -- 刪除 dist 文件
3. build -- 整體構建
4. build-ts -- 編譯ts
5. build-css -- 編譯scss
6. story-book -- 啟動storybook
7. server -- 啟動storybook的靜態服務站點
8. build-storybook -- 打包storybook為靜態資源
9. story-server -- 啟動storybook的pm2進程

組件庫分析（以SpSelect組件為例說明）

1. 組件源碼存放在stc/components/SpSelect目錄下
2. 該目錄下利用index.tsx統一導出
3. 該目錄下spSelect.stories.tsx,是storybook的源代碼
4. 樣式統一放在src/styles下
5. src/styles 下新建專屬的spSelect.scss 樣式文件
6. src/styles 先新建index.scss 使用 @import 統一樣式文件入口
7. storybook啟動的站點，引入的是全部樣式，使用組件庫的時候,可以選擇使用專屬的樣式文件
8. gulp.file.js 是編譯src/styles 下的scss文件
9. tsconfig.build 是編譯src下ts文件

組件庫亮點

1. 技術棧統一，使用react hook + typescript 跟日常開發技術棧是一樣的，最快可以把項目中封裝好的代碼移植過來用
2. 通過 storybook 自動生成文檔，包括屬性文檔，組件展示，代碼展示，在線調試
3. 最小依賴， 每個組件都是獨立的， 通過treeshaking， 不會導致主體項目代碼體積龐大， 只會導入使用到的組件代碼

相關鏈接

storybook官網
gulp官網
npm官網
package.json 中的module, main等字段的區別