plugins 插件

  • 类型: CliPlugin[]
  • 默认值: []

用于配置自定义的 Modern.js 框架插件。

自定义插件的编写方式请参考 如何编写插件

注意事项

该选项用于配置框架插件,如果你需要配置其他类型的插件,请选择对应的配置方式:

插件类型

Modern.js 中内置了三种不同的框架插件:

  • CLI 插件,适用于本地开发、编译构建阶段,可以在命令行和编译阶段扩展各种能力。
  • Server 插件,适用于服务端。
  • Runtime 插件,适用于前端运行时。

目前 Modern.js 开放了自定义 CLI 插件的能力,Server 插件和 Runtime 插件会在后续开放。

插件执行顺序

默认情况下,自定义插件会按照 plugins 数组的顺序依次执行,Modern.js 内置插件的执行时机早于自定义插件。

当插件内部使用了控制顺序的相关字段,比如 prepost 时,会基于声明的字段对执行顺序进行调整,详见 插件之间的关系

示例

下面是 CLI 插件的使用示例。

使用 npm 上的插件

使用 npm 上的插件,需要通过包管理器安装插件,并通过 import 引入。

modern.config.ts
import { myPlugin } from 'my-plugin';

export default defineConfig({
  plugins: [myPlugin()],
});

使用本地插件

使用本地代码仓库中的插件,直接通过相对路径 import 引入即可。

modern.config.ts
import { myPlugin } from './config/plugin/myPlugin';

export default defineConfig({
  plugins: [myPlugin()],
});

插件配置项

如果插件提供了一些自定义的配置项,可以通过插件函数的参数传入配置。

modern.config.ts
import { myPlugin } from 'my-plugin';

export default defineConfig({
  plugins: [
    myPlugin({
      foo: 1,
      bar: 2,
    }),
  ],
});