手把手搭建基于React的前端UI库（一）-- 项目初始化

站长

2023年02月08日 00:26 · 阅读数 64

前言

写作背景

为什么要自己写UI库

现在优秀的前端开源UI库已经很多了，比如antd、Material UI、element UI等等，这些UI库生态都比较完善，文档也写得很好，你在项目中直接用不就行了，可为什么还要自己写呢？借用一句老话，租不如买，买不如造，从这个角度也能知道老用别人的总觉得有点缺陷，这里作者个人认为坚持写自己的UI库主要有这么几个原因：

1. 会受制于人。

虽然是开源的库，但是遍观市面上大多数产品，都没有用这些组件库，相反的是企业内部的项目用的比较多。我想更多的原因是不想受制于人，如果哪一天UI库的作者想要收专利费了，你的项目要不要迁移到别的组件库？还是说乖乖交钱呢？另一方面，如果你公司所有的产品都用了antd，日积月累，你就会天然的依赖阿里的开发习惯，选择新产品的时候就会更倾向于阿里同系的，所以说，免费的代价是失去自主权。

2. 升级产品需要看脸色。

举个例子，你的产品所使用的框架，Vue要从2升3，Angular要从9升12，React要升级18了，而你所依赖的第三方UI组件库还不支持新版本框架，或者对新版本框架或其他的依赖部分兼容，这就会使得你的开发非常的难受。

3. 不好维护。

使用别人的组件库，如果出了Bug怎么修呢？难道要在Github上提Issue嘛😂，这样抱怨的是你的客户，受损的是你的产品。第三方进行的开源，是个双刃剑，免费给你用，但是出了问题人家也不负责。

有了这些原因，应该不会再质疑为什么要做自己的UI库了吧。拥有自己全套的产品体系，对于企业，是一个拿回自主权的重要一步，对于我们开发者，也是锤炼自己基本功的过程，何乐而不为？

基于React

这里记录我现在正在搭建的企业项目，一边搭建一边记录，其乐融融，可以称得上手把手教学本学了[doge]。

1、使用dumi创建

dumi是一个开源的负责组件开发及组件文档生成的工具，这里仅为了方便组件库文档展示使用。在最后打包发布时，dumi不参与打包，所以这里使用dumi是可以的。

接下来就开始记录实操步骤。

首先安装 node，并确保node >= 10.13 && node < 17.6.0。这里作者亲测，node 17.6.0是不兼容的，而作者本地使用的v16.14.2可以完全兼容。

在空白的地方新建文件夹

mkdir dux-ui && cd ./dux-ui

然后执行安装命令，这里我选择站点式的创建方式

$ 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 install
npm run dev

然后项目就跑起来了！（盗用官网的图，仅供参考）

手把手搭建基于React的前端UI库（一）-- 项目初始化

2、文件目录

脚手架搭建起项目后，可以看到初始文件目录

手把手搭建基于React的前端UI库（一）-- 项目初始化

这里为了开发方便，我们把自定义的组件放在单独的components文件夹下：

手把手搭建基于React的前端UI库（一）-- 项目初始化

然后修改src下的index文件中组件的导入路径：

export { default as Foo } from './components/Foo';

修改dumi配置文件.umirc.ts，新增menu展示路径：

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'test-dumi',
  favicon:
    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  logo: 'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  outputPath: 'docs-dist',
  mode: 'site',
  
  // 新增
  menus: {
    // 需要自定义侧边菜单的路径，没有配置的路径还是会使用自动生成的配置
    '/components': [
      {
        title: '组件',
        path: '/components',
        children: [
          // 菜单子项（可选）
          'components/Foo/index.md',
        ],
      },
    ],
  },
});