electron-trpc 项目教程

electron-trpc 项目教程

electron-trpc Build type-safe Electron inter-process communication using tRPC 项目地址: https://gitcode.com/gh_mirrors/el/electron-trpc

1. 项目的目录结构及介绍

electron-trpc/
├── .github/
│   └── workflows/
├── examples/
│   └── basic-react/
├── packages/
│   └── electron-trpc/
├── www/
├── .envrc
├── .gitignore
├── .node_version
├── .npmrc
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── package.json
├── playwright.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── renovate.json
└── shell.nix

目录结构介绍

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
• examples/basic-react/: 包含一个基本的 React 示例项目。
• packages/electron-trpc/: 包含 electron-trpc 的核心代码。
• www/: 可能包含项目的静态文件或前端代码。
• .envrc: 环境变量配置文件。
• .gitignore: Git 忽略文件配置。
• .node_version: 指定 Node.js 版本。
• .npmrc: npm 配置文件。
• .prettierignore: Prettier 忽略文件配置。
• .prettierrc.js: Prettier 配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• playwright.config.ts: Playwright 配置文件。
• pnpm-lock.yaml: pnpm 锁定文件。
• pnpm-workspace.yaml: pnpm 工作区配置文件。
• renovate.json: Renovate 配置文件。
• shell.nix: Nix shell 配置文件。

2. 项目的启动文件介绍

启动文件

• packages/electron-trpc/src/main.ts: 这是 Electron 主进程的入口文件。它负责初始化 Electron 应用并设置 electron-trpc 的 IPC 处理程序。

代码示例

import { app } from 'electron';
import { createIPCHandler } from 'electron-trpc/main';
import { router } from './api';

app.on('ready', () => {
  const win = new BrowserWindow({
    webPreferences: {
      // 替换为你的 preload 文件路径
      preload: 'path/to/preload.js',
    },
  });

  createIPCHandler({ router, windows: [win] });
});

3. 项目的配置文件介绍

配置文件

• .prettierrc.js: Prettier 配置文件，用于代码格式化。
• package.json: 项目依赖和脚本配置文件。
• playwright.config.ts: Playwright 配置文件，用于端到端测试。
• pnpm-workspace.yaml: pnpm 工作区配置文件，用于管理多个包。
• renovate.json: Renovate 配置文件，用于自动更新依赖。
• shell.nix: Nix shell 配置文件，用于配置开发环境。

代码示例

.prettierrc.js

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
};

package.json

{
  "name": "electron-trpc",
  "version": "0.6.1",
  "main": "src/main.ts",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^19.0.0",
    "electron-trpc": "^0.6.1"
  }
}

playwright.config.ts

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    browserName: 'chromium',
  },
};

export default config;

pnpm-workspace.yaml

packages:
  - 'packages/*'
  - 'examples/*'

renovate.json

{
  "extends": ["config:base"],
  "schedule": ["before 3am on Monday"]
}

shell.nix

{ pkgs ? import <nixpkgs> {} }:

pkgs.mkShell {
  buildInputs = [
    pkgs.nodejs
    pkgs.yarn
  ];
}

electron-trpc Build type-safe Electron inter-process communication using tRPC 项目地址: https://gitcode.com/gh_mirrors/el/electron-trpc