ElectronでMainとRendererから共通ファイルを使う設定方法

環境

electron + vite + react + typescript

共通ディレクトリを作る

src/
├─ main/
├─ renderer/
├─ common/ ← 追加

tsconfig.jsonを設定する

tsconfig.node.jsonを以下のように設定します。 (Mainプロセス用)

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
  "include": [
    "electron.vite.config.*",
    "src/main/**/*",
    "src/preload/**/*",
    "src/common/**/*" // 追加
  ],
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "paths": {
      "@main/*": ["src/main/*"],
      "@common/*": ["src/common/*"] // 追加
    }
  }
}

tsconfig.web.jsonを以下のように設定します。 (Rendererプロセス用)

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
    "src/common/**/*", // 追加
    "src/common/**/*.tsx", // 追加
    "src/preload/*.d.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@renderer/*": ["src/renderer/src/*"],
      "@common/*": ["src/common/*"] // 追加
    }
  }
}

Viteの設定にエイリアスを追加

electron.vite.config.ts を以下のように設定します。

import { resolve } from "path";
import { defineConfig, externalizeDepsPlugin } from "electron-vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  main: {
    resolve: {
      alias: {
        "@common": resolve("src/common"), // 追加
      },
    },
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    resolve: {
      alias: {
        "@common": resolve("src/common"), // 追加
      },
    },
    plugins: [externalizeDepsPlugin()],
  },
  renderer: {
    resolve: {
      alias: {
        "@renderer": resolve("src/renderer/src"),
        "@common": resolve("src/common"), // 追加
      },
    },
    plugins: [react(), tailwindcss()],
  },
});

✅ importして使う

設定が完了すると、以下のように共通ファイルをimportできるようになります。

import { commonFunction } from "@common/utils";