优化打包electron项目流程

.gitignore

@@ -22,4 +22,7 @@
 
 # 
 /logs
-/文档
+/文档
+/electron/dist
+/electron/electron_dist
+/electron/node_modules

.umirc.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   history: {
     type: 'hash',
   },
+  outputPath: isBuildingElectron ? 'electron/dist' : 'dist',
   // routes: [
   //   { path: '/', component: '@/pages/index' },
   // ],

electron/main.js

@@ -43,8 +43,8 @@ function createWindow() {
     //生产环境
     // 加载html文件
     // 这里的路径是umi输出的html路径，如果没有修改过，路径和下面是一样的
-    mainWindow.webContents.openDevTools();
-    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
+    mainWindow.loadFile(path.join(__dirname, './dist/index.html'));
+    // mainWindow.webContents.openDevTools();
     // mainWindow.loadURL(
     //   url.format({
     //     pathname: path.join(__dirname, '../dist/index.html'),

electron/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "locking-box",
+  "version": "1.0.0",
+  "description": "locking-box",
+  "main": "main.js",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development electron ./main.js",
+    "pack": "electron-packager . --platform=win32 --arch=x64 --out ./electron_dist --overwrite"
+  },
+  "repository": {
+    "type": "git"
+  },
+  "keywords": [
+    "locking-box"
+  ],
+  "build": {
+    "mac": {
+      "icon": "logo.ico"
+    },
+    "win": {
+      "icon": "logo.ico",
+      "target": ["portable"]
+    },
+    "linux": {
+      "icon": "logo.ico"
+    }
+  },
+  "author": "yiyun",
+  "license": "ISC",
+  "dependencies": {
+    "electron-store": "^8.0.0"
+  },
+  "devDependencies": {
+    "electron": "^13.1.6",
+    "electron-packager": "^15.2.0"
+  }
+}

package.json

@@ -1,12 +1,14 @@
 {
+  "name": "locking-box",
+  "version": "1.0.0",
+  "description": "locking-box",
   "private": true,
+  "main": "electron/main.js",
   "scripts": {
     "start": "umi dev",
-    "electron": "electron ./electron/main.js",
-    "electron:dev": "cross-env NODE_ENV=development electron ./electron/main.js",
     "build": "umi build",
     "build:electron": "cross-env BUILD_TYPE=electron umi build",
-    "pack": "electron-packager . --platform=win32 --out=release --arch=x64 --out ./electron_dist --overwrite",
+    "pack:electron": "node ./scripts/pack-electron",
     "postinstall": "umi generate tmp",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "test": "umi-test",
@@ -24,6 +26,20 @@
     ]
   },
   "homepage": "./",
+  "build": {
+    "mac": {
+      "icon": "electron/logo.ico"
+    },
+    "win": {
+      "icon": "electron/logo.ico",
+      "target": [
+        "portable"
+      ]
+    },
+    "linux": {
+      "icon": "electron/logo.ico"
+    }
+  },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@ant-design/pro-layout": "^6.5.0",
@@ -35,12 +51,8 @@
     "antd": "^4.16.5",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.5",
-    "electron": "^13.1.4",
-    "electron-packager": "^15.2.0",
-    "electron-store": "^8.0.0",
     "lodash": "^4.17.21",
-    "umi": "^3.4.25",
-    "ws": "^7.5.2"
+    "umi": "^3.4.25"
   },
   "devDependencies": {
     "@types/ali-oss": "^6.0.8",

scripts/pack-electron.js

@@ -0,0 +1,20 @@
+const exec = require('child_process').exec;
+
+function execAsync(...args) {
+  return new Promise((r) => {
+    exec(...args, function (err, stdout, stderr) {
+      if (stdout) console.log(stdout);
+      if (stderr) console.log(stderr);
+      if (!err) {
+        r();
+      }
+    });
+  });
+}
+
+async function main() {
+  await execAsync('npm run build:electron');
+  await execAsync('npm run pack', { cwd: './electron' });
+}
+
+main();

src/app.ts

@@ -35,10 +35,10 @@ const errorHandler = (error: ResponseError) => {
     const errorText = codeMessage[response.status] || response.statusText;
     const { status, url } = response;
     if (response.status === 401) {
-      notification.error({
-        message: '登录超时',
-        description: '登录状态超时，请重新登录',
-      });
+      // notification.error({
+      //   message: '登录超时',
+      //   description: '登录状态超时，请重新登录',
+      // });
       logout(false);
       return {
         code: response.status,

src/components/FileIcon/FileIcon.tsx

@@ -20,14 +20,13 @@ export default memo(function FileIcon(props: FileIconProps) {
         fallback={fileIconSrc('default')}
       />
     </div>
-  )
+  );
 });
 
-
 const fileIconSrc = memoize((extension: string) => {
   const fixedExtension = matchFileImage(extension);
-  return `/assets/file_icon/${fixedExtension}.svg`;
-})
+  return `assets/file_icon/${fixedExtension}.svg`;
+});
 
 export function matchFileImage(extension: string) {
   switch (extension) {
@@ -44,4 +43,3 @@ export function matchFileImage(extension: string) {
       return extension;
   }
 }
-