如何使用 dumi 开发移动端组件库

众所周知，（假设众所周知）dumi 是一款基于 Umi 打造、为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。它以易用美观的特点吸引了数百万的用户使用（我吹的）。

可惜在当前的版本上，还不太支撑移动端的组件库开发。其中有两个问题

1. 移动端页面的解析和文档页面的解析，共用一套的 umi 配置，导致鱼与熊掌不可兼得。
   
2. 文档 demo 的展示还是偏向 pc 组件，对移动端组件的展示，不太友好。

针对第一点，我最开始的想法是，通过指定路由的方式，让部分路由走 hd 插件，而剩余路由保持现有的解析方式，最后发现这个方案，不管从理论上还是实际上都无法实现。

针对第二点，最开始的想法是，通过全局覆盖样式重写 __dumi-default-previewer-demo 的样式，使得移动端组件展示时，能够规定父级容器的宽度，以致于组件不变形太多。后来发现官方的某一个尝试方案就是这么实现的，而且效果他们很不满意。

另启一个服务来编译移动端页面

后来，项目临时需要，所以我又有了一个小的想法。既然需要两套 umi 的配置来实现，那干脆就启两个 umi 服务吧。

文档部分，依旧保持着 dumi 的约定，在项目中新建文件夹 demo 并在其下面生成一个 umi 的 h5 应用，即 umi-preset-react 加 @alitajs/hd（我的私包，不知道官方为什么一直不发。）

然后在 package.json 中配置启动命令。

"scripts": {
    "start:docs": "dumi dev",
    "start:demo": "cross-env PORT=1123 APP_ROOT=demo umi dev"
  },

为预览和开发是同时启动的，所以我希望能够执行一个命令就能启动两个服务，于是用上了 concurrently。

scripts": {
    "start": "concurrently \"npm:start:docs\" \"npm:start:demo\""
  },

umi 项目如何引用 APP_ROOT 之外的组件

这里遇到的第一个问题是，umi 项目如何引用 APP_ROOT 之外的组件。因为 umi 的特性，一般只编译 APP_ROOT 下的 src 目录，和可选择的编译 node_modules 。当你引入 APP_ROOT 上层目录下的组件时，就会提示组件未编译。并且通过 ../../../ 这样的相对方式引入，也不太符合真实的项目使用场景，我们期望的是 import {} from 'lib-name'

//demo 移动端组件渲染页面
import { Foo } from '../../src';
//  组件开发
export { default as Foo } from './Foo';

其实这个问题处理起来也很简单，只需要在 demo/config 里面配置就可以了。

import { join } from 'path';
export default {
  chainWebpack: (config: any) => {
    config.module
      .rule('js')
      .test(/\.(js|mjs|jsx|ts|tsx)$/)
      .include.add(join(__dirname, '..', '..', 'src')).end()
      .exclude.add(/node_modules/).end()
      .use('babel-loader')
  },
  alias: {
    'dumi-theme-alita': join(__dirname, '..', '..', 'src')
  }
};

dumi 中如何展示自定义的组件

由于我们不对 dumi 做侵入式的修改，于是我们能够控制和编辑的就只有页面部分的内容了。好在 dumi 提供了 inline 来直接显示我们自定义的组件。因此我们可以自定义一个展示组件，用它来打开我们的 demo 页面。

// 这里为了md 冲突，使用了注释，实际上不需要使用注释
// ```ts
import React from 'react';
import { Device } from 'dumi-theme-alita';
export default () => <Device url="https://mobile.ant.design/kitchen-sink/" source="https://github.com/alitajs/dumi-theme-alita/tree/master/src/Device" />;
// ```

Device 的具体实现，看源码，效果大致如下。为了截取全部，页面做了缩放处理，组件有一点点变形。这里只是为了演示，他被包裹在 dumi 的 demo previewer组件中的效果。

这也是 dumi 有魅力的地方，md 里面直接写组件，就能看到演示效果。但是现在它不是我们需要的，我们只是要这个预览窗口，于是我们给它加上 ts | inline。它就会以一般页面组件的方式展示在页面上。可以通过给它加一个 div ，添加上如 position: absolute; 等样式，让他定位到页面的右侧。

// ```ts | inline
import React from 'react';
import { Device } from 'dumi-theme-alita';
export default () => <Device url="https://mobile.ant.design/kitchen-
sink/" source="https://github.com/alitajs/dumi-theme-alita/tree/master/src/Device" />;

最终我们得到需要的效果如下

你可以通过修改 Device 组件的 src 属性，打开本地开发的服务，来试试预览和修改你的组件库。

效果如下：

此次方案，只是为了实现我的又一点小想法，而进行的实践。它也确实可行。如果你觉得又要改这又要改那的太麻烦了。那你可以关注一下 dumi 即将推出的 主题和实验室。

届时你就可以很轻易的找到 dumi 的 mobile 主题。并获得 dumi 官方支撑最好的方案。

[Device 源码] https://github.com/alitajs/dumi-theme-alita/tree/master/src/Device

[dumi主题和实验室] https://d.umijs.org/lab