24年写了个适合校招生，快速上手工程化的组件库
本文聚焦于快速创建并部署个人的组件库，方便平时开发中将通用的组件抽出，也可用于简历上展示个人的组件/工程成果，如果能全部吃透还是很加分的~
组件库体验地址：components-library
关于以上内容，你是否好奇如何实现的，对于大多数项目，诸如：antd, element-plus 等，这些都是通过自己编写 md 表格去自定义的，但是对于个人开发的组件库，这显然是不太行的，因为这需要耗费大量时间去编写不太高频的内容，所以这方面显然是要通过自动化的形式完成，这也是本组件库需要攻克的重点！
关于上图内容其实只需要下面4行内容即可，是不是很震惊 😱
## Disabled Calendar <code src="src/compoents/Calendar/demo/index.tsx" /> ## Calendar Props <Props src="src/compoents/Calendar.tsx" />
一、快速初始化项目
目前市面上已经有很多项目格式化规范教程，这里就不再赘述了
这里直接可以使用npx @winches/ts-start@latest可以选择 react-components-library模版即可使用该模版
组件库的技术栈为： react + tailwindcss + rspress + vite + tsup
✨ 其次还可以学习到组件库工程化内容/插件/playground的编写
🌟 模版亮点
模版基于 rspress 实现了一套插件自动生成组件预览和组件API文档，只需要注意编写的格式即可
🛠️ 插件系统
通过rspress集成的remark插件系统，开发了组件API自动生成插件，提升个人开发的效率，感兴趣的可以查看源码实现
路径位于：docs/plugins/generate-props.ts
支持：
Mdx 文件 Props 组件自动生成组件 API- 跳转到组件源码
📻 playground 组件开发
关于组件库的开发肯定少不了组件预览，所以也实现了一套可以快速开发的工程
只需要在开发的组件下创建demo目录，随后在该目录下创建xxx.tsx文件
最后你就可以运行playground下的dev指令，它会自动抓取你demo目录下的文件到plaryground下，随后可以通过浏览器路由的方式查看你正在开发的组件
demo下的组件也可以用于docs中文档的展示，极大减少开发者的工作
关于该内容的实现：
路径：playground/app.init.tsplayground/main.tsx
🤖 组件库的详细用法
Note：有需要自取，下面的内容属于组件库的详细用法介绍，以及部署教程
1. 组件开发/预览
Playground 查看并开发组件
一、使用
在 playground 目录下直接运行 pnpm dev，会将 app.example.tsx 生成到 src 目录下
随后可以直接在 src/App.tsx 中修改你想要调试的组件代码
二、添加其他测试组件页面
在 src 目录下，添加新文件 Test.tsx，自动添加该组件到 /test 路由下
通过 http://localhost:<port>/test 路由可以访问到该组件
三、自动获取components/**/demo下的文件到playground
可以通过组件名直接访问并进行开发
http://localhost:<port>/<component>/<demoName>
e.g.http://localhost:5173/calendar/usage
2. 自动生成组件文档
一、使用
在 docs 目录下直接运行 dev
二、组件预览
通过下面在mdx中引入code组件即可实现组件预览
代码：<code src="src/Calendar/demo/index.tsx />
src相对根目录的路径
三、组件属性预览
通过下面在mdx中引入Props组件即可实现组件属性自动转换成 markdown
代码：<Props src="src/Calendar/Calendar.tsx" />
Props 组件属性
1、src 指定要解析的组件文件地址，输入相对根目录的路径
2、hideJumpButton 隐藏跳转到源码按钮，默认false
3、component 默认选择第一个export的组件，若存在多个组件，则需要通过传component指定对应的组件，或者通过组件文件内定义displayName指定组件
// Way 1 // component 指定，当存在多个 export 组件时 <Props src="src/compoents/Calendar.tsx" component="Calendar" /> // Calendar.tsx export const Calendar = memo(CalendarComponent) // Way 2 // Calendar.tsx export const Calendar = memo(CalendarComponent) // displayName 指定 Calendar 组件 Calendar.displayName = 'Calendar'
组件文档使用演示：
## Disabled Calendar <code src="src/compoents/Calendar/demo/index.tsx" /> ## Calendar Props <Props src="src/compoents/Calendar.tsx" />
生成的效果图如图：
3. Netlify 自动部署
通过Netlify实现
要实现Netlify的持续集成自动化
- 登录到你的Netlify帐户，如果你还没有帐户，可以注册一个。
- 在Netlify的控制面板中，点击"New site from Git"。
- 选择GitHub作为Git提供商，并授权Netlify访问你的GitHub帐户。
- 在列出的仓库中，选择你要部署的仓库 "code-jbrc/Awesome-15docs"。
- 在“Build settings”配置下面的选项：
- Build command: docs:build
- Publish directory: dist
- 为了确保在每次提交到主分支时进行构建，确保“Branch to deploy”设置为主分支（默认应该是 main 或 master）。
- 点击 "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。请按照以下步骤操作：
- 登录到你的Netlify帐户，然后转到"user settings"。
- 点击"Applications"，然后点击"New access token"以创建一个新的访问令牌。将此令牌保存在一个安全的地方，因为你无法再次查看它。
- 转到你的Netlify站点设置，然后点击"Site information"以查看你的站点ID。
- 转到你的GitHub仓库，然后转到"Settings"。
- 点击左侧菜单中的"Secrets"，然后点击"New repository secret"。
- 分别添加NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID，并使用第2步和第3步中找到的值填充它们。
- 完成这些步骤后，每当你将更改推送到主分支时，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 的地方
CVTE公司福利 309人发布
查看13道真题和解析