Skip to content

Commit

Permalink
docs: describe how to create plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
PeachScript committed Dec 26, 2022
1 parent fdab0bd commit 0932d49
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 1 deletion.
3 changes: 2 additions & 1 deletion docs/plugin/api.md
@@ -1,8 +1,9 @@
---
group: 开发
order: 1
---

# API
# 插件 API

<embed src="../.upstream/plugin-api.md#RE-/<!-- core api[^]+ core api end -->/"></embed>

Expand Down
47 changes: 47 additions & 0 deletions docs/plugin/new.md
@@ -0,0 +1,47 @@
---
group: 开发
---

# 创建插件

如果你希望在 dumi 里使用插件,有 3 种方式:

1. 本地插件:创建 `.dumi/theme/plugin.ts` 即可,适用于对本地项目做定制,且不需要与其他项目共享的场景
2. 主题插件:在主题包内创建 `src/plugin.ts``src/plugin/index.ts`,适用于插件和主题包结合使用的场景
3. 独立插件(集):发布到 NPM 并在 dumi 项目中通过 `plugins`/`presets` 配置启用,适用于插件(集)独立运行且希望与其他项目共享的场景

如果是创建独立插件,请在给 NPM 包命名时遵循以下原则:

1. 如果是 Umi/dumi 通用型插件,建议以 `umi-plugin-``@org/umi-plugin-` 开头命名
2. 如果是 dumi 专用插件,例如用到了 [插件 API - 重点方法](./api.md#重点方法),或者其他 dumi 特有能力,建议以 `dumi-plugin-``@org/dumi-plugin-` 开头命名

如果是创建独立插件集,将上述命名规则中的 `plugin` 换成 `preset` 即可,例如 `dumi-preset-bar`

## 快速上手

### 本地插件

创建 `.dumi/theme/plugin.ts` 后根据需要编写逻辑即可,不需要做任何配置,该插件文件会被 dumi 自动挂载。

### 主题插件

使用主题包脚手架初始化的项目中已经包含 `src/plugin/index.ts` 文件,根据需要编写逻辑即可,该插件文件会跟随主题包自动被加载。更多主题包开发相关内容可参考 [主题开发](../theme/index.md) 文档。

### 独立插件(集)

推荐使用 father 脚手架初始化插件项目:

```bash
$ npx create-father
```

上述命令会询问项目的目标运行平台,如果是纯 Node.js 插件,请选择『Node.js』,如果插件还包含一些浏览器端的模块,例如 React 组件,可以选择『Both』,初始化完成后根据需要编写逻辑即可。

可参考 [father - 开发](https://github.com/umijs/father/blob/master/docs/guide/dev.md) 文档了解如何实时编译插件源码并 link 到项目中做调试,link 完成后请将插件配置到测试项目的 `.dumirc.ts` 中做验证:

```ts
// .dumirc.ts
export default {
plugins: ['dumi-plugin-bar'],
};
```

0 comments on commit 0932d49

Please sign in to comment.