ViteでビルドをしながらVSCodeでDebugを行えるようにする (#1221)

* inline sourcemapをserveなどのDebugビルドでは有効にする

* debug launch用のtemplateファイルを追加

* defineConfigから渡されるmodeでsourcemapの出し分けを判定する

* Update .vscode/launch.template.json

Co-authored-by: Nanashi. <[email protected]>

* Update .vscode/launch.template.json

Co-authored-by: Hiroshiba <[email protected]>

* render -> renderer

* Electronの更新機サンプルにあるように、9222にremote portを変更

* READMEにそれとなくVS Codeでデバッグ実行できることを載せておく

* vite関係のimportをまとめる

* Update vite.config.ts

Co-authored-by: Nanashi. <[email protected]>

* developmentとtest環境でのみsourcemapを出力する

---------

Co-authored-by: Nanashi. <[email protected]>
Co-authored-by: Hiroshiba <[email protected]>

Author: 3 people

.vscode/launch.template.json

@@ -0,0 +1,47 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Renderer Process",
+            // NOTE: background.tsで指定しているremote-debugging-port
+            "port": 9222,
+            "request": "attach",
+            "type": "chrome",
+            "webRoot": "${workspaceFolder}",
+            "timeout": 20000, // 20 * 1000 ms程度あればビルド時間は間に合うはず
+        },
+        {
+            "name": "Launch Electron Main Process via NPM",
+            "request": "launch",
+            "runtimeArgs": [
+                "run",
+                "electron:serve"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+        {
+            "name": "Attach by Process ID",
+            // .bin viteを指定するとElectronのMain Processのデバッグが可能
+            "processId": "${command:PickProcess}",
+            "request": "attach",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+    ],
+    "compounds": [
+        {
+            "name": "Launch Electron Main/Renderer",
+            "configurations": ["Attach to Renderer Process", "Launch Electron Main Process via NPM"],
+            "stopAll": true
+        }
+    ]
+}

README.md

@@ -149,6 +149,12 @@ npx openapi-generator-cli generate \
 npm run fmt
 ```
 
+## VS Code でのデバッグ実行
+
+npm scripts の `serve` や `electron:serve` などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。
+
+`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
+
 ## ライセンス
 
 LGPL v3 と、ソースコードの公開が不要な別ライセンスのデュアルライセンスです。

src/background.ts

@@ -49,6 +49,10 @@ type SingleInstanceLockData = {
 const isDevelopment = import.meta.env.DEV;
 const isTest = import.meta.env.MODE === "test";
 
+if (isDevelopment) {
+  app.commandLine.appendSwitch("remote-debugging-port", "9222");
+}
+
 let suffix = "";
 if (isTest) {
   suffix = "-test";

vite.config.ts

@@ -7,19 +7,24 @@ import electron from "vite-plugin-electron";
 import tsconfigPaths from "vite-tsconfig-paths";
 import vue from "@vitejs/plugin-vue";
 import checker from "vite-plugin-checker";
-import { defineConfig } from "vite";
+import { BuildOptions, defineConfig } from "vite";
 import { quasar } from "@quasar/vite-plugin";
 
 rmSync(path.resolve(__dirname, "dist"), { recursive: true, force: true });
 
 const isElectron = process.env.VITE_IS_ELECTRON === "true";
 
 export default defineConfig((options) => {
+  const shouldEmitSourcemap = ["development", "test"].includes(options.mode);
+  const sourcemap: BuildOptions["sourcemap"] = shouldEmitSourcemap
+    ? "inline"
+    : false;
   return {
     root: path.resolve(__dirname, "src"),
     build: {
       outDir: path.resolve(__dirname, "dist"),
       chunkSizeWarningLimit: 10000,
+      sourcemap,
     },
     publicDir: path.resolve(__dirname, "public"),
     css: {
@@ -74,6 +79,7 @@ export default defineConfig((options) => {
             plugins: [tsconfigPaths({ root: __dirname })],
             build: {
               outDir: path.resolve(__dirname, "dist"),
+              sourcemap,
             },
           },
         }),