写点什么

每个前端都值得拥有自己的组件库,就像每个冬天都拥有春秋裤⛄️

作者:速冻鱼
  • 2021 年 12 月 13 日
  • 本文字数:2540 字

    阅读完需:约 8 分钟

每个前端都值得拥有自己的组件库,就像每个冬天都拥有春秋裤⛄️

大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲<br/>欢迎小伙伴们加我微信sudongyuer拉你进群<br/>关注我的公众号:前端速冻鱼一起进步,期待与大家共同成长🥂

阅读本文📖

1.您将了解到如何超快速 0-1 快速搭建并上线一个组件库🦑


2.您将了解到什么是 storybook🦧


3.您将了解到如何使用 storybook 搭建组件库 🦓


4.您将了解到如何使用 Chromatic 部署我们的组件库🦩


3.您将了解到如何使用 GitHub Action 完成 CI 操作🐇


本文 GitHub 仓库地址:taskbox


组件库在线地址:taskbox

前言🌵

为什要造前端组件库呢,更多的是抽离业务组件,实现复用,但是往往现实是残酷的,一个优秀的组件库是非常庞大就具有难度的,但是通过这篇文章我们还是能从开发到上线完成一个简单的组件库,让你了解整个流程

什么是 StoryBook🐇


Storybook 是一个UI组件开发环境。它允许你浏览组件库,并查看每个组件的不同状态,并交互地开发和测试组件,非常简单快捷,而且很多公司在使用,而且你可以开发不同技术栈的组件库,相当方便,而且拥有一套成熟的CIDI方案


用我的话来说就是 Storybook 是一个可以让你专注于编写组件,而无需去关注文档的一个强大的组件开发环境,想试验,或者尝试组件开发的小伙伴都可以值得一试,成本极低,可以快速上线。


Storybook 提供了一个沙箱来独立构建 UI,因此您可以开发难以到达的状态和边缘情况。


强大的 CIDI



开发步骤~⭐

初始化 Storybook(Rect 组件库为例)☄️

# Create our application:npx create-react-app taskbox
cd taskbox
# Add Storybook:npx -p @storybook/cli sb init
复制代码

介绍目录结构🌞

  • .storybook/main.js相当于我们组件库的入口



  • stories表示我们的组件所在目录,Storybook 会将这个数组目录下的文件加载到我们看见的组件库 Index 首页

  • addons表示我们使用到的插件



开始编写一个简单的组件🌻

将我们的组件写在刚刚配置好的stories数组中的任一目录即可



以最常见的Button组件为例子



Button.jsx



button.css



Button.stories.jsx


使用Butto.stories.jsx作为我们组件的载体,这样Storybook就能很好的生成组件相关文档,将组件展示在页面中



使用 export 导出不同状态的 Button 组件,这样组件就算写好了


看看效果😊


部署我们的组件库💥

1.创建远程 Github 仓库并 push 代码⚡️

2.为项目安装 Storybook 强大的工具链工具 Chromatic✨


yarn add -D chromatic
复制代码

3.去Chromatic网站关联我们 github 组件库项目🌼

什么是Chromatic呢?


Chromatic 是一个基于云的工具链,用于 Storybook这有助于团队更快地发布 UI 组件,使用它我们可以超快的完成 CIDI,而且还可以很方便的管理我们的组件库项目,可以去官网了解更多https://www.hellogithub.com/


<img src="https://tva1.sinaimg.cn/large/008i3skNgy1gwdxugikzng30om0gutlz.gif" alt="Kapture 2021-11-13 at 17.28.20" style="zoom:50%;" />

4.部署上线🌸

关联好项目后,我们会得到一个token


使用这个token执行以下命令就能很好的构建并部署我们的Storybook


yarn chromatic --project-token=<project-token>
复制代码


5.获得项目 URL🌴

在执行完上面的构建命令后,我们就会在命令行得到一个 URL,这个 URL 就是我们的组件库部署之后的在线地址,这样你就可以把你的这个链接分享给你同事,或者朋友,让他们看看你的组件库啦!!!👍

6.添加 GitHub Action 部署 Storybook🌲

现在我们的项目托管在 Github 仓库,我们能够使用持续集成 CI 服务完成 Storybook 自动化部署。GitHub Actions 是一个免费的 CI 服务,内置在 Github 中,轻松实现自动发布。


在项目根文件夹下创建一个新目录命名为 .github 并在其中创建另一个 workflows 目录。



像下面的一样,创建一个新文件命名为 chromatic.yml。将 project-token 替换为你项目的 project token


chromatic.yml


# .github/workflows/chromatic.yml
# Workflow namename: 'Chromatic Deployment'
# Event for the workflowon: push
# List of jobsjobs: test: # Operating System runs-on: ubuntu-latest # Job steps steps: - uses: actions/checkout@v1 - run: yarn #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action with: #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it projectToken: ${{ XXXXXXXX }} token: ${{ secrets.GITHUB_TOKEN }}
复制代码


然后提交我们本次修改到远程仓库就行了,设置了GitHub action后,当推送代码时,你的 Storybook 将部署到 Chromatic 上。你可以在 Chromatic 的构建屏幕中找到所有已发布的 Storybook



并且可以查看本次提交修改了什么代码,能不能合并,很多功能,这里就不一一讲解了,大家感兴趣可以自己去探索一下



总结 🍁

🌈这就样我们的组件库终于从零到编写一个Button组件,从构建到发布,再通过GitHub ActionStorybook以及Chromatic的梦幻联动实现了方便的持续集成。当然这篇短文只是帮助大家有个全面的认识,要想开发一个优秀的组件库是非常难的,要涉及很多东西,从代码规范各种插件再到测试都是需要花费很多精力的,但是有了Storybook可以让我们很快的搭建起来属于我们自己的组件库,希望每个小伙伴都能有所收获,去编写一个属于自己风格组件库吧🍄。


源代码仓库地址:taskbox👣


组件库在线地址:taskbox

结束语🦚


那么我的每个前端都值得拥有自己的组件库,就像每个冬天都拥有秋裤⛄️这篇文章结束了,每个前端都值得拥有自己的组件库,希望这个冬天你不缺秋裤穿😂,文章的目的其实很简单就是对日常工作的总结和输出,不管菜不菜输出总是有意义的,也希望通过文章认识更多志同道合的朋友,如果你也喜欢折腾,欢迎加我好友,一起沙雕,一起进步。


github🤖:sudongyu


个人博客👨‍💻:速冻鱼blog


vx👦:sudongyuer


写在最后


伙伴们,如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。


加我微信:sudongyuer,邀你进群,一起学习前端,成为更优秀的工程师~(群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论,我会把最新的二维码放在评论区,当然也可以加我微信我拉你进群,毕竟我也是有趣的前端,认识我也不赖🌟~

发布于: 2 小时前阅读数: 5
用户头像

速冻鱼

关注

Talk is cheap,show me your code 2021.08.30 加入

大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲 欢迎小伙伴们加我微信:sudongyuer拉你进群, 公众号: 前端速冻鱼,欢迎一起讨论,期待与大家共同成长🥂

评论

发布
暂无评论
每个前端都值得拥有自己的组件库,就像每个冬天都拥有春秋裤⛄️