feat: fix some bugs and main process esm default is mjs

tomjs · Dec 13, 2023 · ea71f45 · ea71f45
1 parent 839cd35
commit ea71f45
Show file tree

Hide file tree

Showing 19 changed files with 265 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -126,14 +126,12 @@ Take using `esm` as an example, but it requires Electron>=28
 
 - `package.json`
 
-Electron `preload process` must use the `.mjs` suffix, otherwise an error will be reported, see [official documentation](https://www.electronjs.org/zh/docs/latest/tutorial/esm). So the default output of `esm` of `preload` uses the `.mjs` suffix.
-
-When the suffix of Electron `main process` is `.mjs` or `.cjs`, vscode breakpoint debugging cannot work, so the suffix defaults to `.js`.
+Electron `preload process` must use the `.mjs` suffix, otherwise an error will be reported, see [official documentation](https://www.electronjs.org/zh/docs/latest/tutorial/esm). So the default output of `esm` of `preload` uses the `.mjs` suffix. For consistency, `main process` also ends with `.mjs`
 
 ```json
 {
   "type": "module",
-  "main": "dist/main/index.js"
+  "main": "dist/main/index.mjs"
 }
 ```
 
@@ -330,16 +328,7 @@ app.whenReady().then(() => {
 });
 ```
 
-### Main thread debugging
-
-#### Turn on debugging
-
-Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
-
-- Enable by setting `APP_ELECTRON_DEBUG=1` in `.env.development` file
-- `vite.config.js` configures `electron({ debug: true })` to be turned on
-
-#### VSCODE
+### Main Process Debug
 
 Run `Debug Main Process` through `vscode` to debug the main thread. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)
 
@@ -351,6 +340,7 @@ Run `Debug Main Process` through `vscode` to debug the main thread. For debuggin
   "configurations": [
     {
       "name": "Debug Main Process",
+      "preLaunchTask": "npm:debug",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -359,8 +349,52 @@ Run `Debug Main Process` through `vscode` to debug the main thread. For debuggin
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
       "args": ["."],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
+      ],
       "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
     }
   ]
 }
 ```
+
+`tasks.json` is configured as follows:
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm:debug",
+      "type": "npm",
+      "script": "debug",
+      "detail": "cross-env APP_ELECTRON_DEBUG=1 vite",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[@tomjs:electron\\] startup electron*$"
+        }
+      }
+    }
+  ]
+}
+```
+
+### Preload process Debug
+
+Use `DevTools` to debug the `preload process`.
diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -126,14 +126,12 @@ app.whenReady().then(createWindow);
 
 - `package.json`
 
-Electron `preload process` 必须使用 `.mjs` 后缀，否则报错，查看[官方文档](https://www.electronjs.org/zh/docs/latest/tutorial/esm)。所以 `preload` 的 `esm` 默认输出使用 `mjs` 后缀。
-
-当 Electron `main process` 的后缀为 `.mjs`或`.cjs` 时， vscode 断点调试无法起到作用，所以后缀默认为`.js`。
+Electron `preload process` 必须使用 `.mjs` 后缀，否则报错，查看[官方文档](https://www.electronjs.org/zh/docs/latest/tutorial/esm)。所以 `preload` 的 `esm` 默认输出使用 `mjs` 后缀。为了保持一致性，`main process` 也以 `.mjs` 结尾。
 
 ```json
 {
   "type": "module",
-  "main": "dist/main/index.js"
+  "main": "dist/main/index.mjs"
 }
 ```
 
@@ -329,16 +327,7 @@ app.whenReady().then(() => {
 });
 ```
 
-### 主线程调试
-
-#### 开启调试
-
-通过如下配置或者 `ELECTRON_DEBUG=1 vite dev` 启动代码编译
-
-- 通过 `.env.development` 文件设置 `APP_ELECTRON_DEBUG=1` 开启
-- `vite.config.js` 配置 `electron({ debug: true })` 开启
-
-#### VSCODE
+### Main Process 调试
 
 通过 `vscode` 运行 `Debug Main Process` 调试主线程，调试工具参考 [官方文档](https://code.visualstudio.com/docs/editor/debugging)
 
@@ -350,6 +339,7 @@ app.whenReady().then(() => {
   "configurations": [
     {
       "name": "Debug Main Process",
+      "preLaunchTask": "npm:debug",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -358,8 +348,52 @@ app.whenReady().then(() => {
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
       "args": ["."],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
+      ],
       "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
     }
   ]
 }
 ```
+
+`tasks.json` 配置如下：
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm:debug",
+      "type": "npm",
+      "script": "debug",
+      "detail": "cross-env APP_ELECTRON_DEBUG=1 vite",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[@tomjs:electron\\] startup electron*$"
+        }
+      }
+    }
+  ]
+}
+```
+
+### Preload Process 调试
+
+使用 `DevTools` 调试 `preload process`.
diff --git a/examples/react/.env.development b/examples/react/.env.development
@@ -1 +1 @@
-APP_ELECTRON_DEBUG=1
+# APP_ELECTRON_DEBUG=1
diff --git a/examples/react/.vscode/launch.json b/examples/react/.vscode/launch.json
@@ -6,6 +6,7 @@
   "configurations": [
     {
       "name": "Debug Main Process",
+      "preLaunchTask": "npm:debug",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -14,7 +15,13 @@
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
       "args": [
-        "."
+        ".",
+      ],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
       ],
       "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
     },

diff --git a/examples/react/.vscode/tasks.json b/examples/react/.vscode/tasks.json
@@ -0,0 +1,31 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm:debug",
+      "type": "npm",
+      "script": "debug",
+      "detail": "cross-env APP_ELECTRON_DEBUG=1 vite",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[@tomjs:electron\\] startup electron*$"
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/react/electron/main/index.ts b/examples/react/electron/main/index.ts
@@ -1,11 +1,9 @@
-import { homedir, release } from 'node:os';
+import { release } from 'node:os';
 import { join } from 'node:path';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
-import fs from 'fs-extra';
 
 console.log('Electron Main Process!');
-
-console.log(fs.pathExistsSync(homedir()));
+console.log('Electron Main Process!');
 
 const isDev = process.env.NODE_ENV == 'development';
 process.env.DIST = join(__dirname, '../renderer');

diff --git a/examples/react/electron/preload/index.ts b/examples/react/electron/preload/index.ts
@@ -1 +1,5 @@
+import os from 'node:os';
+import fs from 'fs-extra';
+
 console.log('Electron Preload Process!');
+console.log(os.homedir(), fs.pathExistsSync(os.homedir()));
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -8,6 +8,7 @@
   "main": "./dist/main/index.js",
   "scripts": {
     "dev": "vite",
+    "debug": "cross-env APP_ELECTRON_DEBUG=1 vite",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -25,6 +26,7 @@
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "cross-env": "^7.0.3",
     "electron": "^28.0.0",
     "typescript": "~5.2.2",
     "vite": "^5.0.7",

diff --git a/examples/vue/.vscode/launch.json b/examples/vue/.vscode/launch.json
@@ -6,6 +6,7 @@
   "configurations": [
     {
       "name": "Debug Main Process",
+      "preLaunchTask": "npm:debug",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -14,7 +15,13 @@
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
       "args": [
-        "."
+        ".",
+      ],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
       ],
       "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
     },

diff --git a/examples/vue/.vscode/tasks.json b/examples/vue/.vscode/tasks.json
@@ -0,0 +1,31 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm:debug",
+      "type": "npm",
+      "script": "debug",
+      "detail": "cross-env APP_ELECTRON_DEBUG=1 vite",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[@tomjs:electron\\] startup electron*$"
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/vue/electron/main/index.ts b/examples/vue/electron/main/index.ts
@@ -3,7 +3,6 @@ import { release } from 'os';
 import { join } from 'path';
 import '../polyfills';
 
-console.log('Electron Main Process!');
 console.log('Electron Main Process!');
 
 const isDev = process.env.NODE_ENV == 'development';

diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -6,9 +6,10 @@
   "engines": {
     "node": ">=18"
   },
-  "main": "./dist/main/index.js",
+  "main": "./dist/main/index.mjs",
   "scripts": {
     "dev": "vite",
+    "debug": "cross-env APP_ELECTRON_DEBUG=1 vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
@@ -20,6 +21,7 @@
     "@tomjs/vite-plugin-electron": "workspace:^",
     "@types/node": "^18.19.3",
     "@vitejs/plugin-vue": "^4.5.2",
+    "cross-env": "^7.0.3",
     "electron": "^28.0.0",
     "electron-builder": "^24.9.1",
     "typescript": "~5.2.2",

diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
@@ -4,5 +4,5 @@ import electron from '@tomjs/vite-plugin-electron';
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-  plugins: [vue(), electron({ builder: false }), renderer()],
+  plugins: [vue(), electron({ builder: true }), renderer()],
 });
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "kolorist": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
+    "shelljs": "^0.8.5",
     "tree-kill": "^1.2.2",
     "tsup": "7.2.0"
   },
@@ -68,6 +69,7 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^18.19.3",
+    "@types/shelljs": "^0.8.15",
     "eslint": "^8.55.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",