移动端三级联动组件_如何使用 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 冲突，使用了注释，实际上不需要使用注释// ```tsimport React from 'react';import { Device } from 'dumi-theme-alita';export default () => ;// ```

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

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

// ```ts | inlineimport React from 'react';import { Device } from 'dumi-theme-alita';export default () => ;

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

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

效果如下：

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

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

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

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