指南
指南

快速上手

1. 初始化项目

方式一：通过脚手架创建

你可以通过 Rspress 脚手架命令来创建项目:

npm
yarn
pnpm
bun
npm create electron-rs@latest

然后按照提示输入项目名称，即可创建一个 electron-rs 项目。

方式二：手动创建

首先，你可以通过以下命令创建一个新目录：

npm
yarn
pnpm
bun
npm create rsbuild@latest

安装 bytenode:

npm
yarn
pnpm
bun
npm install bytenode

安装 electron-rs:

npm
yarn
pnpm
bun
npm install electron-rs -D

安装 @rsbuild/plugin-node-polyfill:

npm
yarn
pnpm
bun
npm install @rsbuild/plugin-node-polyfill -D

在 package.json 中加上如下的内容:

{
  "main": "dist/electron/main.cjs",
  "build": {
    "directories": {
      "output": "build-electron"
    },
    "extraResources": [],
    "files": [
      "dist"
    ]
  }
}

然后修改配置文件 rsbuild.config.ts:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
import { electronRs } from 'electron-rs';

export default defineConfig({
  plugins: [pluginReact(), electronRs(), pluginNodePolyfill()]
});

2. 启动 Dev server

通过如下命令启动本地开发服务:

npm run dev

这样 Rsbuild 将启动开发服务。

提示

对于 dev 命令，你可以通过 --port 或 --host 参数来指定开发服务的端口号或 host，例如 rsbuild dev --port 8080 --host 0.0.0.0。

3. 生产环境构建

通过如下命令构建生产环境的产物:

npm run build

默认情况下，Rsbuild 将会把产物打包到 build-electron 目录。

目录