打包

resource

1. 快速生成 mac 下不同尺寸的 icns 图标，Mac 系统使用 iconutil 生成 App 图标
   1. iconutil -c icns icons.iconset -o Icon.icns

签名

1. mac下自己创建签名
   1. 钥匙串 -> 创建签名

打包

1. pnpm add electron-builder cross-env electron-builder-squirrel-windows -S

项目中有原生模块 robotjs 需要编译

1. 使用 electron-builder 需要移除 electron-rebuild ，npm remove electron-rebuild
   1. electron-rebuild not required if you use electron-builder
2. 脚本
   1. pkg 加上 "postinstall": "electron-builder install-app-deps" 打包时编译原生模块
   2. 安装 prebuild-install ，用于执行编译原生模块
   3. 除了常规的 build 打包配置，特别注意，需要加上

   
   "build":{
       "extraMetadata": {
         "main": "./app/main/index.js" // 入口文件
       },
       "extends": null, // https://github.com/electron-userland/electron-builder/issues/2030
   }
   
   

• 脚本配置

"scripts": {
    "start": "concurrently \"npm run start:render\" \"npm run start:main\" ",
    "start:main": "electron .",
    "start:render": "cd app/renderer/src/main && npm start",
    "build": "cd app/renderer/src/main && npm run build",
    "pack:mac": "npm run build && NPM_CONFIG_ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ electron-builder build --mac",
    "pack:wi": "npm run build && cross-env NPM_CONFIG_ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ electron-builder build --win --ia32",
    "pack:win": " cross-env NPM_CONFIG_ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ electron-builder build --win --ia32",
    "postinstall": "electron-builder install-app-deps"
  },

• 完整 pkg 中 build 配置

"build": {
    "appId": "com.electron.control",
    "productName": "Control",
    "files": "app",
    "asar": false,
    "extraMetadata": {
      "main": "./app/main/index.js"
    },
    "extends": null,
    "extraFiles": [
      "app/renderer/**/src"
    ],
    "directories": {
      "buildResources": "resource",
      "output": "release"
    },
    "copyright": "Copyright © 2023 Jerome",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "resources/icon.icns",
      "category": "public.app-category.productivity",
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "dmg": {
      "background": "resources/background.png",
      "window": {
        "width": 540,
        "height": 380
      },
      "contents": [
        {
          "x": 410,
          "y": 180,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 180,
          "type": "file"
        }
      ],
      "iconSize": 128
    },
    "win": {
      "icon": "resources/icon.ico",
      "target": [
        "squirrel",
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "language": "2052",
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    },
    "squirrelWindows": {
      "iconUrl": "https://raw.githubusercontent.com/dengyaolong/geektime-electron/master/img/icon.ico"
    }
  }

集成 C++ 能力

N-API

1. npm install -g node-gyp (generator your project)
2. npm i bindings node-addon-api -D
   • bindings 方便查找路径
3. pkg 中 加入 “gypfile ”:true 别人引入你的包就会编译

node-ffi

优化白屏

1. 可以在主window渲染dom之前，加一个loading页面

const mainWindow = new BrowserWindow({
    xxx,
    show:false
})

const view = new BrowserView()
mainWindow.setBrowserView(view)
view.setBounds({x:0,y:0,width:800,height:600})
view.webContents.loadFile('loading.html')
view.webContents.on('dom-ready',()=>{
    mainWindow.show()
})

ipcMain.on('stop-loading-main',()=>{
    mainWindow.removeBrowserView(view)
})

安全

1. 渲染进程 - 远程内容 preload 阶段