浅尝一下dumi组件库带来的快乐

臧小半
902 阅读6分钟

前言：从事前端工作的同学肯定都是知道UI组件库的，市面上很多，针对不同的前端框架就会衍生出不同的组件库，它们的目的一样都是为了前端开发提供便捷以及现成的漂亮组件。切入正题

1. dumi是什么？

首先dumi，是一款为组件开发场景而生的文档工具。中文发音 嘟米，用过Umi的人就大概知道这个dumi算是Umi的衍生物，它是基于Umi库产生的

2. 和dumi类似的有哪些？

dumi呢其实是一个文档工具，对于组件库的文档个人知道市面上有其他几种分别是：docz，storyBook，这样就会产生对比，首先从风格上来看一下它们的区别：

1.docz

它的风格更接近于我们常用的Ant Design的简约风格，

docz 是一个高效、零配置的事件记录工具。

docz 基于 MDX ，有许多内置的组件可以帮助你记录你的事情。

它同时支持添加插件，以便于通过 docz 流程和数据管控很多事情

image.png

代码风格：

// Button.mdx 

import { Playground } from 'docz' 
import { Button } from './Button' 

# Button 

## Basic usage 

<Playground> 
    <Button>Click me</Button> 
    <Button kind="secondary">Click me</Button> 
</Playground>

2.storyBook

storyBook 提供了一套UI组件的开发环境,它的风格视觉上更丰富一些，

它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件， 目前支持 react、vue、angular 等前端类库和框架。

image.png

它在自身的一套UI风格视觉上给人呈现出来效果比docz和dumi丰富很多

代码风格

从风格来开storyBook有自身的一套语法，相对于docz和dumi来说复杂许多，很难开箱即用


// Button.stories.tsx 

import React from 'react'; 
import { Story } from '@storybook/react'; 

// We create a “template” of how args map to rendering 

const Template: Story<ButtonProps> = (args) => <Button {...args} />; 

export const Primary = Template.bind({}); 

Primary.args = { 
    primary: true, 
    label: 'Primary', 
};

3.dumi

做到开箱即用的还得是dumi，基于 TypeScript 类型定义，自动生成组件 API、移动端组件库编写及多语言支持。

image.png

代码风格

从文档写法，以及组件写法都沿用了react的一套，针对react开发者来说十分友好。短板也十分明显就是dumi只支持react，所以如有vue或者angler的开发者就需要去使用其它2种文档了

export interface setting{
    /**
     * 
     * @description 这是一个按钮的名称
     * 
     * @default 默认是string类型 ；
     */
    title?:string
    /**
     * 
     * @description 这是一个按钮的类型
     * 
     * @default 默认是default；
     */
    type?:any
  /**
     * 
     * @description 点击操作
     * 
     * @default 默认是(event)=>{}
     */
    onClick: (event: any) => void
}

const Index:React.FC<setting> = ({title,type,onClick})=>{
    return <Button onClick={onClick} type={type}>{title}</Button>
}
export default Index;

image.png

doczstory bookdumi
支持编写的组件库类型所有前端框架所有前端框架目前只支持React
轻量级 / 开发者友好❌❌✅
文档内嵌在组件目录中❌✅✅
将引入模块写在代码示例中❌❌✅
自动生成组件库 API❌❌✅

接下来就开始简单讲一下dumi的使用，直接上干货开箱即用

本次针对web为例

先上下官方文档链接：d.umijs.org/zh-CN/guide

环境准备（官方文档）

首先得有 node，并确保 node 版本是 10.13 或以上。我的版本是v14.18.2

$ node -v
v10.13.0

脚手架初始化

$ mkdir dumiTools && cd dumiTools

注意：这里有一个坑，用npx生成的文件，在引入问题会有报错导致无法在md文件中读取运行，官方给出的回答是后续版本会修复，所以这里采用yarn，如果没有yarn，可以通过npm i yarn -g来安装

$ npx @umijs/create-dumi-lib

# 初始化一个文档模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib

目录结构如下图

image.png

我们在src目录下新建一个Button文件夹，文件夹中包含2个文件，一个是index.tsx,另外的一个是index.md

在index.tsx里加入代码

import React from "react";

const Index = ()=>{
   return <div>这是个按钮</div>
}

export default Index

同时在根目录下index.js 暴露出去

//index.js
export { default as Button } from './Button';

然后在index.md里写入说明文档,如图

image.png

这时候启动项目出现这个展现方式

image.png

为了效果明显我们这边采用Ant Design的按钮，安装依赖并引入环境

npm install antd --save 在根目录index.js引入css样式

//index.js
import 'antd/dist/antd.css';

针对按钮类型大小等等功能做这样的改动,在Button下修改

//index.js
import React from "react";
import { Button } from 'antd';
const Index = ({ children, type, size, danger }: { children: string, type: "link" | "text" | "ghost" | "default" | "primary" | "dashed" | undefined, size: "small" | "middle" | "large" | undefined, danger: boolean }) => {
   return <Button size={size} danger={danger} type={type}>{children}</Button>
}
export default Index

同时修改index.md文件

image.png

这时候来看一下效果

image.png

这时候实现一下按钮的点击效果 加入onClick函数，修改index.tsx

import React from "react";
import { Button } from 'antd';
const Index = ({ children, type, size, danger, onClick }: { children: string, type: "link" | "text" | "ghost" | "default" | "primary" | "dashed" | undefined, size: "small" | "middle" | "large" | undefined, danger: boolean, onClick: (event: any) => void }) => {
   return <Button onClick={onClick} size={size} danger={danger} type={type}>{children}</Button>
}
export default Index

修改index.md

image.png

image.png

这样就完成一部分了。

有人会说为啥没有文档，这时候开始新增文档，dumi自己提供了Api

直接在md文件中加入<API></API>即可

image.png

上效果图

image.png

然后我们把API改成中文的 那就需要修改根目录下的配置.umirc.ts新增locales:[['zh-CN', '中文'],['en-US', 'English']]即可

image.png

这时候会有人说为什么有些描述不太对，这时候我们就要手动去干预修改它

定义接口类型的方式去写，

//index.tsx
import React, { ReactNode } from "react";
import { Button } from 'antd';

export interface Button {
   /**
    * @description 这是个按钮内容
    * 
    * @default ''
    * 
    */
   children: ReactNode
   /**
    * @description 这是个按钮的点击事件
    * 
    * @default  (event: any) => void 
    * 
    */
   onClick?: (event: any) => void
   /**
   * @description 这是个按钮的大小
   * 
   * @default  middle
   * 
   */
   size?: "small" | "middle" | "large" | undefined
   /**
   * @description 是否是危险按钮
   * 
   * @default  false
   * 
   */
   danger?: boolean
   /**
   * @description 是否是危险按钮
   * 
   * @default  default
   * 
   */
   type: "link" | "text" | "ghost" | "default" | "primary" | "dashed" | undefined
}
const Index: React.FC<Button> = ({ onClick, size, danger, type, children }) => {
   return <Button onClick={onClick} size={size} danger={danger} type={type}>{children}</Button>
}

// const Index = ({ children, type, size, danger, onClick }: { children: string, type: "link" | "text" | "ghost" | "default" | "primary" | "dashed" | undefined, size: "small" | "middle" | "large" | undefined, danger: boolean, onClick: (event: any) => void }) => {
//    return <Button onClick={onClick} size={size} danger={danger} type={type}>{children}</Button>
// }
export default Index

index.md文件无需变动

image.png

到这就完成了所有代码相关的内容这时候开始在自身项目中引用。 先打个包 执行npm run build

image.png 这个就是我们要上传到npm 的包

修改package.json

image.png

在发布之我们需要在npm官方注册自己的账户 同时我们要确认我们的包名是否唯一

当以上都准备好我们开始登录自己的账号 (这里拿之前项目的截图为例)

image.png

执行npm login 来登录自己的账户 如果出现上面的问题是因为我们要把镜像转成淘宝的

image.png 像这样再执行登录我们就可以了把你的信息填入

最后执行npm publish

image.png 这样子就是成功了 我们现在去访问一下我们的包

image.png 发现已经上传成功了

初始化一个项目用来做引用

执行npm install dumi_tools

image.png

image.png

效果如下

image.png

好的 ，到这步一个基础的组件库搭建完成了

avatar
文章
阅读
粉丝