指南
配置
插件
指南
配置
插件
简体中文

总览

插件系统基于 rsbuild，请参考 rsbuild 插件部分实现

使用插件

electron-rsbuild 提供插件，允许用户在不安装整套配置情况下，可用rsbuild启动 electron 项目。

安装以下插件：

pnpm add -D @electron-rsbuild/plugin-main @electron-rsbuild/plugin-preload @electron-rsbuild/plugin-renderer

在 rsbuild.config.ts 中配置：

import { resolve } from 'path';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mainPlugin } from '@electron-rsbuild/plugin-main';
import { preloadPlugin } from '@electron-rsbuild/plugin-preload';
import { rendererPlugin } from '@electron-rsbuild/plugin-renderer';

export default defineConfig({
  root: resolve(__dirname, '.'),
  environments: {
    // main
    main: {
      plugins: [mainPlugin()],
    },
    // preload
    preload: {
      plugins: [preloadPlugin()],
    },

    // renderer
    renderer: {
      plugins: [pluginReact(), rendererPlugin()],
    },
  },
});

plugin-main 插件

处理 electron main 模块，可以导出默认配置：

import { mainConfig } from '@electron-rsbuild/plugin-main';

plugin-preload 插件

处理 electron preload 模块，可以导出默认配置：

import { preloadPlugin } from '@electron-rsbuild/plugin-preload';

plugin-renderer 插件

处理 electron renderer 模块，可以导出默认配置：

import { rendererPlugin } from '@electron-rsbuild/plugin-renderer';

插件入参

注意

当前，仅在以 plugin-* 作为纯插件在你的 rsbuild 项目中生效。

electron-rsbuild >=0.0.12 允许用户传入自定义的插件参数。

export interface EnvironmentConfig {
  /**
   * Options for local development.
   */
  dev?: Pick<DevConfig, AllowedEnvironmentDevKeys>;
  /**
   * Options for HTML generation.
   */
  html?: HtmlConfig;
  /**
   * Options for the low-level tools.
   */
  tools?: ToolsConfig;
  /**
   * Options for module resolution.
   */
  resolve?: ResolveConfig;
  /**
   * Options for input source code.
   */
  source?: SourceConfig;
  /**
   * Options for build outputs.
   */
  output?: OutputConfig;
  /**
   * Options for Web security.
   */
  security?: SecurityConfig;
  /**
   * Options for build performance and runtime performance.
   */
  performance?: PerformanceConfig;
  /**
   * Options for module federation.
   */
  moduleFederation?: ModuleFederationConfig;
  /**
   * Configure Rsbuild plugins.
   */
  plugins?: RsbuildPlugins;
}

在你的 rsbuild.config.ts 中做如下变更：

import { resolve } from 'node:path';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mainPlugin } from '@electron-rsbuild/plugin-main';
import { preloadPlugin } from '@electron-rsbuild/plugin-preload';
import { rendererPlugin } from '@electron-rsbuild/plugin-renderer';

export default defineConfig({
  root: resolve(__dirname, '.'),
  environments: {
    // main
    main: {
-      plugins: [mainPlugin()],
+      plugins: [mainPlugin({
+         html: { title: "hello world by @electron-rsbuild"},
+   })],
    },
    // preload
    preload: {
      plugins: [preloadPlugin()],
    },

    // renderer
    renderer: {
      plugins: [pluginReact(), rendererPlugin()],
    },
  },
});

参数需要符合 @rsbuild/core 中的 EnvironmentConfig 类型定义，用户传入的参数将会被合并到其中。

目录