【Electron × Vue3】Electron × Vue3 × TypeScript × Vite でツール開発環境を整える

# Vue * TypeScript の雛形を作成
npm init vite@latest
✔ Project name: … electron-vue-ts-template
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

# npmモジュールインストール
cd electron-vue-ts-template/
npm install

npm run dev

npm install --save-dev electron@latest

# Electronメインプロセス用のtsconfigを作成
touch tsconfig.electron.json

{
    /* electron override settings */
    "extends": "./tsconfig.json",
    "compilerOptions": {
      /* commonjs */
      "target": "esnext",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "esModuleInterop": true,
      "lib": ["esnext", "DOM", "DOM.Iterable"],
      "skipLibCheck": true,
      
      /* bundler mode */
      "allowImportingTsExtensions": false,
      "noEmit": false,

      "outDir": "dist/electron"
    },
    "include": ["src/electron/**/*"]
  }

import { app, BrowserWindow } from "electron";
import * as path from "path";

function createWindow() {
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadFile(path.join(__dirname, "../index.html"));

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector: any, text: any) => {
    const element = document.getElementById(selector);
    if (element) {
      element.innerText = text;
    }
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type as keyof NodeJS.ProcessVersions]);
  }
});

<template>
・・・省略・・・

  <!-- electron preload test-->
  <div>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </div>
</template>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './'
})

{
  "name": "electron-vue-ts-sample",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "vite:dev": "vite",
    "vite:build": "vue-tsc && vite build",
    "vite:preview": "vite preview",
    "electron:build": "tsc -p tsconfig.electron.json",
    "electron:dev": "electron .",
    "dev": "npm run build && npm run vite:dev",
    "build": "npm run vite:build && npm run electron:build",
    "app": "npm run build && npm run electron:dev"
  },
  "main": "dist/electron/main.js",
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "electron": "^27.1.3",
    "electron-builder": "^24.9.1",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

# ビルドのみ行う
npm run build

# ブラウザで起動する
npm run dev

# アプリで起動する
npm run app

npm install --save-dev @electron-forge/cli

# forge.config.js生成とpackage.jsonへの追加
npx electron-forge import

"scripts": {
・・・略・・・
    "app:package": "electron-forge package",
    "app:make": "electron-forge make"
  },

# forge.config.jsの設定に基づいて配布可能なパッケージを出力
npm run app:package