插件

在 Modern.js 中目前可以直接使用两种插件,分别是 Modern.js 框架插件和 Rsbuild 构建插件。

Modern.js 框架插件

Modern.js 拥有自己的框架插件系统,你可以通过在 modern.config.ts 中配置 plugins 字段来使用 Modern.js 插件。

插件类型

框架插件可以细分成三类,分别是:

  1. CLI 插件:用于在应用执行 Modern.js 命令时,提供额外的功能。例如,添加命令、修改配置、监听文件等。大多数构建相关的能力都可以通过 CLI 插件来实现。
  2. 服务端插件:用于在应用接受请求时,提供额外的功能。例如,添加中间件、修改请求响应等。
  3. 运行时插件:用于在应用运行 React 代码时,提供额外的功能。例如,执行初始化行为,包裹 React 高阶组件等。
NOTE

服务端插件和运行时插件即将正式对外开放。

开发插件

如果你需要开发 Modern.js 框架插件,可以阅读 Modern.js 插件系统 获取更多信息。

Rsbuild 构建插件

Rsbuild 是 Modern.js 底层的构建工具,可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能,包括但不限于:

  • 修改 Rsbuild 配置
  • 处理新的文件类型
  • 修改或编译文件
  • 部署产物

你可以在 modern.config.ts 中通过 builderPlugins 选项来注册 Rsbuild 插件,详见 builderPlugins 构建插件

TIP

Modern.js 从 2.46.0 起开始将底层的构建工具升级为 Rsbuild.

如果你当前版本低于 2.46.0,可通过执行 npx modern upgrade 进行升级。

INFO

可以阅读 Rsbuild 官网 - 插件 来了解更多 Rsbuild 插件体系的内容。

官方插件

内置插件

以下是已在 Modern.js 中内置的 Rsbuild 官方插件,无需安装,即可启用:

插件 介绍 Modern.js 链接
React 插件 提供对 React 的支持 -
SVGR 插件 支持将 SVG 图片转换为一个 React 组件使用 output.disableSvgr
output.svgDefaultExport
Styled Components 插件 提供对 styled-components 的编译时支持 tools.styledComponents
Assets Retry 插件 用于在静态资源加载失败时自动发起重试请求 output.assetsRetry
Type Check 插件 用于在单独的进程中运行 TypeScript 类型检查 output.disableTsChecker
tools.tsChecker
Node Polyfill 插件 用于注入 Node 核心模块在浏览器端的 polyfills output.disableNodePolyfill
Source Build 插件 用于 monorepo 场景,支持引用其他子目录的源代码,并完成构建和热更新 experiments.sourceBuild
Check Syntax 插件 用于分析产物的语法兼容性,判断是否存在导致兼容性问题的高级语法 security.checkSyntax
CSS Minimizer 插件 用于自定义 CSS 压缩工具,切换到 cssnano 或其他工具进行 CSS 压缩。 tools.minifyCss
Pug 插件 提供对 Pug 模板引擎的支持 tools.pug
Rem 插件 用于实现移动端页面的 rem 自适应布局 output.convertToRem
YAML 插件 用于引用 YAML 文件,并将其转换为 JavaScript 对象 YAML 文件
TOML 插件 用于引用 TOML 文件,并将其转换为 JavaScript 对象 TOML 文件

未内置的插件

以下是未在 Modern.js 中内置的 Rsbuild 官方插件: