在 Modern.js 中目前可以直接使用两种插件,分别是 Modern.js 框架插件和 Rsbuild 构建插件。
Modern.js 拥有自己的框架插件系统,你可以通过在 modern.config.ts
中配置 plugins
字段来使用 Modern.js 插件。
框架插件可以细分成三类,分别是:
服务端插件和运行时插件即将正式对外开放。
如果你需要开发 Modern.js 框架插件,可以阅读 Modern.js 插件系统 获取更多信息。
Rsbuild 是 Modern.js 底层的构建工具,可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能,包括但不限于:
你可以在 modern.config.ts
中通过 builderPlugins
选项来注册 Rsbuild 插件,详见 builderPlugins 构建插件。
Modern.js 从 2.46.0
起开始将底层的构建工具升级为 Rsbuild.
如果你当前版本低于 2.46.0,可通过执行 npx modern upgrade
进行升级。
可以阅读 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 官方插件:
Image Compress 插件:将项目中用到的图片资源进行压缩处理。
Stylus 插件:使用 Stylus 作为 CSS 预处理器。
UMD 插件:用于构建 UMD 格式的产物。