electron 开发记录

公用环境

切换源

https://registry.npmmirror.com/ 是新的源
npm config set registry https://registry.npmmirror.com/
yarn config set registry https://registry.npmmirror.com/
//  恢复源
npm config set registry https://registry.npmjs.org
yarn config set registry https://registry.yarnpkg.com

Electron源

yarn config set electron_mirror https://npmmirror.com/mirrors/electron/
npm config set electron_config_mirror https://npmmirror.com/mirrors/electron/

报错

Client network socket disconnected before secure TLS connection was established
尝试 npm update

gyp报错
检查~/Library/Caches/node-gyp中，有没有对应的electron版本

electron-builder 无法下载

将npm/yarn源切换为原始源，执行electron-builder时，显示地址，手动下载后，放置对应目录

Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

mac环境

总览

homebrew、zsh、python2、xcode、证书、公证独立密码

homebrew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

// 如果提示 fatal: not in a git directory 
git config --global user.name "yourName"
git config --global user.email "yourName@gmail.com"

ohmyzsh

// 前往地址 https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh
// 将内容另存为 install.sh

chmod +x install.sh
./install.sh

python 2.7

brew install pyenv
pyenv install 2.7.18
export PATH="$(pyenv root)/shims:${PATH}"
pyenv global 2.7.18
python --version

当正确打印版本时，输入sudo vi ~/.bash_profile。增加以下内容

export PATH="$(pyenv root)/shims:${PATH}"

再执行source ~/.bash_profile，立即生效。
如果不生效，则打开~/.zshrc文件，增加source ~/.bash_profile。

证书提示不受信任

前往 https://www.apple.com/certificateauthority/ 下载根证书 Worldwide Developer Relations - G3
根据证书时间选择G几
证书位置必须位于钥匙串里的【系统 - 证书】，如果在【登录 - 证书】则无法打包

打包相关

公证需要安装 xcode
mas提示 unable to build chain to self-signed root for signer ，检查根证书位置是否处于【系统 - 证书】

独立密码

security add-generic-password -a "AC_USERNAME" -w <app_specific_password> -s "AC_PASSWORD"
// AC_USERNAME / AC_PASSWORD 可以修改，但需要和公证脚本对应
// const password = `@keychain:AC_PASSWORD`;

win环境

linux环境

在mac打包时，需要提前安装rpm

brew install rpm  

如果中间报错，例如No such file or directory，可能是依赖没有安装，手动安装依赖，如：

brew install gettext

判断是否开发环境

安装 electron-is-dev npm install electron-is-dev

// main.js
const isDev = require('electron-is-dev')

或者

// electron-is-dev 的源码
const electron = require('electron');

const app = electron.app || electron.remote.app;

const isEnvSet = 'ELECTRON_IS_DEV' in process.env;
const getFromEnv = parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;

const isDev = isEnvSet ? getFromEnv : !app.isPackaged;

集成 vue-cli 开发

开发时主进程加载 http://localhost:8080/
打包时则加载 dist 文件夹下的 index.html

  if (isDev) {
    mainWindow.loadURL('http://localhost:8080')
    mainWindow.webContents.openDevTools()
  } else {
    mainWindow.loadURL(`file://${__dirname}/dist/index.html`)
  }

打包

electron-builder 开箱即用，但是安装包无路径选择等配置

Not allowed to load local resource

electron 有个 issue 有各种情况的解决方案。

但是注意 electron-builder 默认打包到 dist 文件夹下。打包后，也会报错 Not allowed to load local resource。这个是由于路径引用错误导致的。
解决方案是将 electron-builder 的路径修改为其他路径

// package.json
  "build": {
    "directories": {
      "output": "release"
    }
  }

渲染进程找不到 fs 及 path 模块

修改 webpack 的 target

{
    target: 'electron-renderer'
}

mac版无法粘贴复制

// main.js
  if (process.platform === 'darwin') {
    const template = [
      {
        label: "Application",
        submenu: [ { label: "退出", role: 'quit'} ]
      }, 
      {
        label: 'Edit',
        submenu: [
          { label: '撤销', role: 'undo' },
          { label: '恢复', role: 'redo' },
          { type: 'separator' },
          { label: '剪切', role: 'cut' },
          { label: '复制', role: 'copy' },
          { label: '粘贴', role: 'paste' },
          { label: '删除', role: 'delete' },
          { label: '全选', role: 'selectall' }
        ]
      }
    ]
    Menu.setApplicationMenu(Menu.buildFromTemplate(template))
  }