2024年如何通过完善的工程化，从0到1手把手建立个人 react 组件库

本文聚焦于快速创建并部署个人的组件库，方便平时开发中将通用的组件抽出，也可用于简历上展示个人的组件成果~

组件库体验地址：components-library

关于以上内容，你是否好奇如何实现的，对于大多数项目，诸如：antd element-plus 等，这些都是通过自己编写 md 表格去自定义的，但是对于个人开发的组件库，这显然是不太行的，因为这需要耗费大量时间去编写不太高频的内容，所以这方面显然是要通过自动化的形式完成，这也是本组件库需要攻克的重点！

关于上图内容其实只需要下面4行内容即可，是不是很震惊 😱

## Disabled Calendar



## Calendar Props

一、快速初始化项目

目前市面上已经有很多项目格式化规范教程，这里就不再赘述了

这里直接可以使用npx @winches/ts-start@latest可以选择 react-components-library模版即可使用该模版

组件库的技术栈为： react + tailwindcss + rspress + vite + tsup

✨ 其次还可以学习到组件库工程化内容/插件/playground的编写

🌟 模版亮点

模版基于 rspress 实现了一套插件自动生成组件预览和组件API文档，只需要注意编写的格式即可

🛠️ 插件系统

通过rspress集成的remark插件系统，开发了组件API自动生成插件，提升个人开发的效率，感兴趣的可以查看源码实现

路径位于：docs/plugins/generate-props.ts

支持：

1. Mdx 文件 Props 组件自动生成组件 API
2. 跳转到组件源码

📻 playground 组件开发

关于组件库的开发肯定少不了组件预览，所以也实现了一套可以快速开发的工程

只需要在开发的组件下创建demo目录，随后在该目录下创建xxx.tsx文件

最后你就可以运行playground下的dev指令，它会自动抓取你demo目录下的文件到plaryground下，随后可以通过浏览器路由的方式查看你正在开发的组件

demo下的组件也可以用于docs中文档的展示，极大减少开发者的工作

关于该内容的实现：

路径：playground/app.init.ts playground/main.tsx

🤖 组件库的详细用法

Note：有需要自取，下面的内容属于组件库的详细用法介绍，以及部署流程

1. 组件开发/预览

Playground 查看并开发组件

一、使用

在 playground 目录下直接运行 pnpm dev，会将 app.example.tsx 生成到 src 目录下

随后可以直接在 src/App.tsx 中修改你想要调试的组件代码

二、添加其他测试组件页面

在 src 目录下，添加新文件 Test.tsx，自动添加该组件到 /test 路由下

通过 http://localhost:/test 路由可以访问到该组件

三、自动获取components/**/demo下的文件到playground

可以通过组件名直接访问并进行开发

http://localhost://

e.g. http://localhost:5173/calendar/usage

2. 自动生成组件文档

一、使用

在 docs 目录下直接运行 dev

二、组件预览

通过下面在mdx中引入code组件即可实现组件预览

代码：


src 相对根目录的路径

三、组件属性预览

通过下面在mdx中引入Props组件即可实现组件属性自动转换成 markdown

代码：


Props 组件属性

1、src 指定要解析的组件文件地址，输入相对根目录的路径

2、hideJumpButton 隐藏跳转到源码按钮，默认false

3、component 默认选择第一个export的组件，若存在多个组件，则需要通过传component指定对应的组件，或者通过组件文件内定义displayName指定组件

// Way 1
// component 指定，当存在多个 export 组件时


//  Calendar.tsx
export const Calendar = memo(CalendarComponent)

// Way 2
//  Calendar.tsx
export const Calendar = memo(CalendarComponent)
// displayName 指定 Calendar 组件
Calendar.displayName = 'Calendar'

组件文档使用演示：

## Disabled Calendar



## Calendar Props

生成的效果图如图：

3. 通过Netlify实现

要实现Netlify的持续集成自动化

1. 登录到你的Netlify帐户，如果你还没有帐户，可以注册一个。

2. 在Netlify的控制面板中，点击"New site from Git"。

3. 选择GitHub作为Git提供商，并授权Netlify访问你的GitHub帐户。

4. 在列出的仓库中，选择你要部署的仓库 “code-jbrc/Awesome-15docs”。

5. 在“Build settings”配置下面的选项：

   • Build command: docs:build
   • Publish directory: dist

6. 为了确保在每次提交到主分支时进行构建，确保“Branch to deploy”设置为主分支（默认应该是 main 或 master）。

7. 点击 “Deploy site”。现在Netlify会自动构建并部署你的站点。

（可选）如果你想要自定义你的站点URL或者使用自定义域名，可以在"Site settings"中进行设置。

现在，每次你向主分支提交更改时，Netlify都会自动构建并部署你的站点。这样，你可以确保你的站点始终保持最新。

通过Github Action实现

使用GitHub Actions实现部署，你需要在你的仓库中创建一个名为.github/workflows/release.yml的文件。

以下是一个示例配置，当你提交到主分支时，它会自动构建你的项目并触发Netlify部署：

name: Build and Deploy to Netlify

on:
  push:
    branches:
      - main # 主分支名称

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm i --no-frozen-lockfile

      - name: Build project
        run: npm run docs:build

      - name: Deploy to Netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=dist --prod

为了使此工作流程正常运行，你需要设置两个GitHub Secrets：NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID。请按照以下步骤操作：

1. 登录到你的Netlify帐户，然后转到"user settings"。
2. 点击"Applications"，然后点击"New access token"以创建一个新的访问令牌。将此令牌保存在一个安全的地方，因为你无法再次查看它。
3. 转到你的Netlify站点设置，然后点击"Site information"以查看你的站点ID。
4. 转到你的GitHub仓库，然后转到"Settings"。
5. 点击左侧菜单中的"Secrets"，然后点击"New repository secret"。
6. 分别添加NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID，并使用第2步和第3步中找到的值填充它们。
7. 完成这些步骤后，每当你将更改推送到主分支时，GitHub Actions都会自动构建你的项目并将其部署到Netlify。

我们使用 Netlify 官方提供的 GitHub Actions for Netlify，这个 Action 可以让我们直接在我们的 workflow 中运行 Netlify CLI，这个 CLI 工具可以将我们的项目部署到 Netlify，我们执行了它的 deploy 命令并且使用了两个标志 --dir 和 --prod，–dir 用来指定我们要部署的文件夹路径，–prod 用来告诉 CLI 将代码提交到 Netlify site 的 production 环境，如果不加 --prod Netlify 会生成一个临时链接让我们来访问部署后的网站。为了让 Netlify 知道我们要把网站部署到具体哪个 site 中，我们还需要提供 NETLIFY_SITE_ID 和 NETLIFY_AUTH_TOKEN 这两个环境变量，我们并没有直接将以上两个值写在 workflow 中，因为如果暴露了这两个密值，任何人都可以操作我们的 Netlify site。解决方法是将这两个值保存在 GitHub 提供的专门保存 secret values 的地方