升级Electron至v5版本

将electron升级到5.0.8版本，原版本1.7.11。当然，仅仅更新electron环境是不够的，相应的其他依赖和Api也需要升级。

• node

  通过n将node环境切换到10.15.3

• Addons

  原生模块需要用新Electron版本的头文件进行重编译。如canvas，sqlite3等

  node-gyp rebuild --target=5.0.8 --runtime=electron --dist-url=https://atom.io/download/electron

  额外提一下sqlite3的升级，因为涉及到利用sqlcipher加密数据库文件，趁此机会将sqlcipher也升级到4.0。

  • 编译

    编译基于sqlcipher的sqlite3需要修改其binding.gyp（指定静态文件路径，默认的动态链接无法分发给Electron用户使用）。主要是将binding.gyp中指定的头文件目录和依赖的静态库路径修改为本地的sqlcipher。

    // binding.gyp
    ["sqlite != 'internal'", {
                "include_dirs": [ "/path-to-sqlcipher/include/sqlcipher" ],
                "libraries": [
                   "path-to-sqlcipher/lib/libsqlcipher.a",
                ],
                "conditions": [ [ "OS=='linux'", {"libraries+":["-Wl,-rpath=<@(sqlite)/lib"]} ] ],
                "conditions": [ [ "OS!='win'", {"libraries+":["path-to-sqlcipher/lib/libsqlcipher.a/lib/libsqlcipher.a"]} ] ],
                'msvs_settings': {
                  'VCLinkerTool': {
                    'AdditionalLibraryDirectories': [
                      '<(sqlite)/lib'
                    ],
                  },
                }
            },
    

  • 升级sqlcipher

    sqlcipher可以通过brew下载到本地，之前我们用到国内作者的cross-sqlcipher，该库安装后会根据系统环境下载依赖的sqlcipher（但已经3年没有更新，这次决定直接用sqlite，去除了代码中对这个库的引用）。

    brew update sqlcipher , 将本地sqlcipher由3.4.x升级到了4.0.x。sqlcipher作者声称v4版本有很大提升，但并不兼容4以前的版本，好在他提供了数据库迁移的命令，只需要第一次运行时执行下就可以：

    Upgrading to SQLCipher 4。

    PRAGMA key = '<key material>';
    PRAGMA cipher_migrate;
    

• node_modules

  ReferenceError: primordials is not defined
      at internal/util/inspect.js:70:20
      at req_ (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:143:24)
      at require (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:116:12)
      at internal/url.js:3:21
      at req_ (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:143:24)
      at require (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:116:12)
      at fs.js:57:29
      at req_ (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:143:24)
      at Object.req [as require] (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/natives/index.js:55:10)
      at Object.<anonymous> (/Users/muzi/Desktop/upchat-v2/upchat-pc/build/mac/src/node_modules/fs-extra/node_modules/graceful-fs/fs.js:1:37)
  

  ReferenceError: primordials is not defined,

  没有找到合理的解释，issue里有人提到node对native这个库支持的不是很好，每次更新都需要重新下载解压。于是，试着重新下载natives，没有解决。

  仔细看错误stack，其实是我们引用的fs-extra库(nodejs自带fs库的封装)引起的，应该是node版本升级到10.15后，旧的fs-extra与新的node库不兼容。

  解决：升级fs-extra

• API

  1.7.x -> 5.x，API有不少变更。

  1. 应用单例控制

     原API：app.makeSingleInstance(）

     修改为应用锁：app.requestSingleInstanceLock()

     const singleLock = app.requestSingleInstanceLock();
       if (!singleLock) {
         app.quit();
       } else {
         app.on('second-instance', (event, argv, cwd) => {
           const curWindow = glb.get(cfg.GLB.MAIN_WINDOW) || glb.get(cfg.GLB.LOGIN_WINDOW);
           if (!!curWindow) {
             if (curWindow.isMinimized) curWindow.restore();
             curWindow.focus();
           }
         })
       }
     

  2. 窗口配置

     新建窗口对象的参数对象，其默认值发生了些变化。

     直接运行会有相关报错：

     Uncaught Reference Error: module is not defined

     Electron 5 doesn't have require available on window

     修改新建窗口的参数：

     loginWindow = new BrowserWindow({
               ...
               webPreferences: {
                 nodeIntegration: true,
               }
             });
     

  3. 自定义页面

     控制页面缩放，原API：webFrame.setZoomLevelLimits(1, 1);

     后面更新了不同层面的缩放控制：webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel) 和 webFrame.setLayoutZoomLevelLimits(minimumLevel, maximumLevel);

4. 页面安全策略

   Electron对页面的安全策略提出了很多要求，尤其是加载远程链接时。项目加载本地页面也会有CSP方面的警告⚠️

   需要在Html的meta标签里添加CSP规则：

   <meta http-equiv="Content-Security-Policy" content="script-src 'self';">

   参考：How to prevent Electron Security Warning (Insecure Content-Security-Policy

• electron-builder

  electron v5.x移除了两个Helper应用：Electron Helper EH/NP， build: remove legacy helpers (Electron Helper EH/NP)

  之前打包使用的electron-builder@19.55.3，打包时会校验Electron各应用的Info.plist，直接使用Electron 5.x进行打包，会报错：

  Error: ENOENT: no such file or directory, open '/Users/muzi/Desktop/upchat-v2/upchat-pc/release/mac/mac/Electron.app/Contents/Frameworks/Electron Helper EH.app/Contents/Info.plist'
      at /usr/local/pnpm-global/1/node_modules/.registry.npmjs.org/electron-builder-lib/19.55.3/node_modules/electron-builder-lib/src/packager/mac.ts:43:215
  

  解决：升级electron-builder至最新（v21.2.0）

  electron-builder对Helper应用的校验逻辑做了更新：会先判断当前打包使用的Electron下是否有指定的Info.plist文件，而不是直接判错。（ps. electron-builder@21.2.0还添加了对electron v6.0新增Helper的处理： Renderer, Plugin, GPU Helper）。

  function getAvailableHelperSuffixes(helperEHPlist: string | null, helperNPPlist: string | null, helperRendererPlist: string | null, helperPluginPlist: string | null, helperGPUPlist: string | null) {
  
    const result = [" Helper"]
    if (helperEHPlist != null) {
      result.push(" Helper EH")
    }
    if (helperNPPlist != null) {
      result.push(" Helper NP")
    }
    if (helperRendererPlist != null) {
      result.push(" Helper (Renderer)")
    }
    if (helperPluginPlist != null) {
      result.push(" Helper (Plugin)")
    }
    if (helperGPUPlist != null) {
      result.push(" Helper (GPU)")
    }
    return result
  }
  

electron-builder升级后的问题

• 在升级的版本稳定前，我们需要保留之前旧版本的环境。也就意味着不能用旧electron-builder的全局命令来一键打包。在package.json中指定新版的electron-builder路径：

  "scripts": {
      "package": "../../node_modules/.bin/electron-builder build --mac"
    },
  

• 打包会提示更新electron-updater（用于应用的自动升级）至4.0.x版本。那就升吧~

• electron-builder现在默认会在打包前对生产依赖（dependencies）的native模块进行重编译，配置npmRebuild的值为false可以跳过这步。

  skipped dependencies rebuild  reason=npmRebuild is set to false