# zp-bee

`zp-bee`，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。如果你也想学习组件开发，欢迎加入或提供意见，该项目会长期更新，欢迎你的 start⭐

## ✨ 特性

- 🌈 提炼组件库设计良好的视觉风格
- 📦 渐进式探索高质量的前端代码的实现
- 🛡 使用 TypeScript 开发，提升开发体验
- ✅ 组件内部使用 antd 风格，以及 antd 内部颜色
- 📖 提供开发过程的文档思路，助力你学习组件开发
- 🔖 该项目会长期维护，并不断探索最佳实践

## 安装

### 使用 npm 或 yarn 安装

**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

```js
npm install zp-bee --save
```

```js
yarn add zp-bee
```

### 按需加载

`zp-bee`默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 `import { BeeInput } from 'zp-bee'` 就会有按需加载的效果。

使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)帮助我们引入样式

```js
[
  'import',
  { libraryName: 'zp-bee', libraryDirectory: 'lib', style: true },
  'zp-bee',
];
```

### TypeScript[#](https://ant.design/docs/react/introduce-cn#TypeScript)

`zp-bee`使用 TypeScript 进行书写并提供了完整的定义文件。

## 本地联调（宿主工程更方便快捷）

强烈建议优先用 **`yalc`** 来联调组件库（比 `yarn link` 更稳定，基本不会踩到“双 React / 双 antd / 双 rc-table 导致 Context 为 null”的坑）。

### 方案 A：yalc（推荐）

1. 全局安装 yalc（一次即可）：

```bash
npm i -g yalc
```

2. 在组件库工程（本仓库）开两个终端：

```bash
# 终端 1：TS/JS 构建 watch（输出到 lib/es）
yarn build:js:watch
```

```bash
# 终端 2：样式构建 watch（输出 index.css 到 lib/es）
yarn build:css:watch
```

3. 在组件库工程执行一次发布到本地 yalc 仓库：

```bash
yalc publish --push
```

4. 在宿主工程安装并使用本地包：

```bash
yalc add zp-bee
yarn
```

5. 后续开发时，每次改动你可以在组件库工程执行：

```bash
yalc publish --push
```

宿主工程会自动更新到最新的本地包内容（通常配合宿主 dev server 即可热更新/刷新）。

### 方案 B：继续 yarn link（不推荐，但可用）

如果你必须用 `yarn link`，请确保宿主工程和组件库工程 **只使用同一份 react/react-dom（必要时 antd/rc-table）**：

- 宿主工程执行：`yarn link react && yarn link react-dom`
- 组件库工程执行：`yarn link react && yarn link react-dom`

并在宿主工程配置打包器做 dedupe/alias（按你的宿主工程技术栈配置：Vite/Next/CRA/Webpack）。

### 流程步骤建议

- 在 master 分支下切出新分支,分支命名为即将发布的版本号,例: `v0.1.80`
- 修改代码内容
- 运行`yarn v-release`更新 package.json 中的`version`字段
- 运行`yarn release`把包发布到 npm 上,也可自己手动 build 后 publish
- 代码推至远程之后,发起 mr 到 master 分支上,指派给代码库管理员 review

**_发包之前要慎重,最好的方式还是代码合并到 master 之后由管理员进行发包,目前管理员可能并无过多精力做此内容,遂适当赋能 developer_**