插件

插件的 id 和 key

每个插件都会对应一个 id 和一个 key,id 是路径的简写key 是进一步简化后用于配置的唯一值

比如插件 /node_modules/@umijs/plugin-foo/index.js,通常来说,其 id 为 @umijs/plugin-foo,key 为 foo

启用插件

插件有多种启用方式,

package.json 依赖

Umi 会自动检测 dependenciesdevDependencies 里的 umi 插件,比如:

  1. {
  2. "dependencies": {
  3. "@umijs/preset-react": "1"
  4. }
  5. }

那么 @umijs/preset-react 会自动被注册,无需在配置里重复声明。

配置

在配置里可通过 presetsplugins 配置插件,比如:

  1. export default {
  2. presets: ['./preset', 'foo/presets'],
  3. plugins: ['./plugin'],
  4. }

通常用于几种情况:

  1. 项目相对路径的插件
  2. 非 npm 包入口文件的插件

注意:

  • 请不要配置 npm 包的插件,否则会报重复注册的错误

环境变量

还可通过环境变量 UMI\_PRESETSUMI\_PLUGINS 注册额外插件。

比如:

  1. $ UMI_PRESETS=/a/b/preset.js umi dev

注意:

  • 项目里不建议使用,通常用于基于 umi 的框架二次封装

检查插件注册情况

通过命令行

可以执行以下命令,

  1. $ umi plugin list
  2. # 顺便看看他们分别用了哪些 key
  3. $ umi plugin list --key

结果通常如下,

  1. Plugins:
  2. - @umijs/preset-built-in [key: builtIn] (preset)
  3. - @@/registerMethods [key: registerMethods]
  4. - @@/routes [key: routes]
  5. - @@/generateFiles/core/history [key: history]
  6. - @@/generateFiles/core/plugin [key: plugin]
  7. - @@/generateFiles/core/routes [key: routes]
  8. - ...

在插件里感知其他插件

可通过 api.hasPlugins(pluginId[])api.hasPresets(pluginId[]) 的方式感知其他插件,详见插件 API。

禁用插件

有两种方式可禁用插件,

配置 key 为 false

比如:

  1. export default {
  2. mock: false,
  3. }

会禁用 Umi 内置的 mock 插件及其功能。

在插件里禁用其他插件

可通过 api.skipPlugins(pluginId[]) 的方式禁用,详见插件 API。

配置插件

通过插件的 key 来配置插件,比如:

  1. export default {
  2. mock: { exclude: ['./foo'] }
  3. }

这里的 mock 是 mock 插件的 key。

再比如我们安装一个插件 umi-plugin-bar,其 key 默认是 bar,就可以这么配置,

  1. export default {
  2. bar: { ...balabala },
  3. }