如何编写一个插件用来实现一个全局组件？

[zhangfisher]

前言

dumi用来编写React组件库非常棒，我用来制作了SpeedForm的官网.

我发现dumi内置的树组件虽然比较实用，但是形式比较单一，并且声明树结构时需要使用大量冗余的ul/li，虽说有降级显示考量，但是在官网中我还是需要更具表现力和更方便的树组件呈现，所以开发lite-tree

lite-tree包含@lite-tree/react和@lite-tree/vue两个包，分别用在React和Vue场景下，其最大的特点在编写md文件时能更方便地声明树结构，如下：

<LiteTree data=`
- A公司
  行政中心
      总裁办
      [checked]人力资源部
      [unchecked]{.blue}财务部   //[yes]{color:red;}
      行政部        //+  负责行政管理
      法务部        //+  打官司等
      [airplane]审计部        //+  审计财务[保存:tag](sss) [连接](sss)
      信息中心      // 重点[保存](www.baidu.com)[连接:tag](www.baidu.com)
      [star]安全保卫部    //x   保密工作
  + 市场中心    
      市场部({#error}出错,"{#warning}警告")  
      销售部            //-
      客服部            //-
      {#blue}品牌部            //   this is cool
      市场策划部    //!  重点
      市场营销部        // {.blue}this is cool
  研发中心
      移动研发部      //!
      平台研发部({success}Java,{error}Go)
      {.success}测试部  //x
      运维部
      产品部            //*
      设计部            //*
      项目管理部        //*
`></LiteTree>

lite-tree除了支持解析json，还自定义了一种采用缩进的格式来声明树。并且丰富的特性，如显示diff，自定节点样式，节点图标自定义等。

显示效果如下：

问题

目前使用全局组件官方推荐方式是在.dumi/theme/builtins/创建组件，如果是第三方组件还得再重导出一次，我希望能编写一个插件

需要在theme里面创建组件，然后使用时在.dumirc.ts.中配置，

import { defineConfig } from 'dumi';
import LiteTreePlugin from "dumi-plugin-lite-tree"

export default defineConfig({
  outputPath: 'docs-dist',
  themeConfig: {
    name: 'lite-tree-dumi-demo',
  },
  plugins:[
    "dumi-plugin-lite-tree"
  ]
});

按照插件API文档，我的dumi-plugin-lite-tree的代码是这样的:

import { IApi } from 'dumi';
export default (api: IApi) => {
  api.addEntryImportsAhead(() => ({
    source: '@lite-tree/react',
    specifier: '{ LiteTree }'
  }))
};

我想是在render前导入{ LiteTree }组件，但不能生效，提示LiteTree not defined

希望能得到指点，能否在现有插件API下实现安装插件后自动注册一个LiteTree的全局组件，谢谢

[xiaohuoni]

可以把组件写成 dumi 主题，在需要的项目中安装使用
https://d.umijs.org/theme

主题加载

dumi 的主题系统中，一共有 3 种主题加载的来源，优先级从低到高分别是：

内置的默认主题包，通过 dumi/theme-default/xx 可以访问到默认主题的产物
用户安装的主题包，在 package.json 中以 dumi-theme- 或 @org/dumi-theme- 开头的包会被自动加载为主题
用户的本地主题包，在 .dumi/theme 目录下放置的主题文件，通常用于对默认主题或安装主题包的局部覆盖及扩展

[PeachScript]

如果只加一个全局组件的话新建主题包有点重，插件可以使用 api.modifyTheme 修改 builtins 增加全局组件：https://d.umijs.org/plugin/api#modifytheme

[zhangfisher]

能举个例子吗？

我的设想，如果要使用LiteTree组件，只需要安装dumi-plugin-lite-tree即可

dumi-plugin-lite-tree代码很简单:

import { IApi } from 'dumi';

export default (api: IApi) => {
  //@ts-ignore
  api.modifyTheme((memo:any) => {
    memo.builtins['LiteTree'] = {
      source: '@lite-tree/react',
      specifier: '{ LiteTree }'
    }
  });
}

但是无效，会提示Error: ENOENT: no such file or directory, open '@lite-tree/react'，用法有问题？

另外，使用 api.modifyTheme,好像还会有一个问题，使用时除了安装dumi-plugin-lite-tree，还得安装@lite-tree/react，这就比较不可接受了。