基于React + dumi + typescript 搭建自己的React组件库

# react+dumi+typescript搭建组件库开发环境


## 参考链接
- [concis从0到1搭建环境](正在上传…重新上传取消https://juejin.cn/post/7115414761646342152)
- [基于duim搭建组件库文档](https://juejin.cn/post/7057365237472690213)
- [dumi官网](https://d.umijs.org/zh-CN/config#menus)



## 搭建环境

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

# or

$ yarn create @umijs/dumi-lib

$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架

# or

$ yarn create @umijs/dumi-lib --site
```

### 运行

```
npm i 
npm run start
```


## 目录介绍
[请看链接](https://d.umijs.org/zh-CN/guide/basic)

## 修改默认配置

>你可以直接复制然后感受一下

.umirc.ts
```js
import { defineConfig } from 'dumi';
export default defineConfig({
  title: 'react-view-design', // 你的组件库名字
  // 你的网站 tabs 图片
  favicon: 'https://pro.upload.logomaker.com.cn/temp24h/logo/e4ed29e0-0890-479b-aba3-06f77f990361.svg',
  // 你的官网logo  
  logo: 'https://pro.upload.logomaker.com.cn/temp24h/logo/e4ed29e0-0890-479b-aba3-06f77f990361.svg',
  outputPath: 'docs-dist',
  mode: 'site',
  apiParser: {
    // 自定义属性过滤配置，也可以是一个函数，用法参考：https://github.com/styleguidist/react-docgen-typescript/#propfilter
    propFilter: {
      // 是否忽略从 node_modules 继承的属性，默认值为 false
      skipNodeModules: true,
      // 需要忽略的属性名列表，默认为空数组
      skipPropsWithName: ['autoFocus', 'form', 'formAction', 'formEncType', 'title'],
      // 是否忽略没有文档说明的属性，默认值为 false
      skipPropsWithoutDoc: true,
    },
  },
  history: {
    type: 'hash',
  },
  // 配置你想配置一级导航
  navs: [
    null,
    {
      title: '作者',
      children: [
        {
          title: 'CSDN',
          path: 'https://blog.csdn.net/CarrreyYan_979292?type=blog',
        },
        {
          title: '掘金',
          path: 'https://juejin.cn/user/1785262616087192',
        },
      ],
    },
    {
      title: 'GitHub',
      path: 'https://github.com/yq979292/Fluent-design0',
    },
  ],
  // styles: [style],
  themeConfig: {
    carrier: 'dumi', // 设备状态栏左侧的文本内容
    hd: true,
  },
});

```

>注意：这里如果启动页面失败，一定是运行环境问题，检查方式如下：
>1：看看node版本
>2：看看npm i 安装依赖是否成功。

>如果页面启动成功，如下图: 恭喜你搭建成功：
> - 请看链接 ： https://d.umijs.org/zh-CN/guide#%E4%BB%80%E4%B9%88%E6%98%AF-dumi



## 第一个组件注意事项

> /src/Foo  为你的第一个组件
>    index.tsx    为组件的源代码
>    index.md    组件的说明文档


参考并复制一下代码，一起感受一下：

%%index.tsx%%
```tsx
import React from 'react';
export default ({ title }: { title: string }) => <h1>{title}</h1>;
```
index.md
```md
---
title: Foo
nav:
  title: 组件
  path: /commponnets
group:
  title: 通用
  mobile: false
---

## FOO
```

>注意事项：每次**创建新组件**应该修改`/src/index.ts`
>  例如：
>   export { default as Foo } from './Foo';



> 我的建议，大家可以阅读官网的基础使用，然后找一个参考说明文档格式，练习编写文档。
> 推荐参考文档如下：
> 1：Concis : http://concis.org.cn/#/common/modal
>       这是一个由个人完成的组件库，适合第一次写组件库的学习


下一篇文章：如何在dumi环境下支持scss语法。