升级Electron至v5版本

2019-09-17 本文已影响0人 charles0427

将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);

页面安全策略

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
```

升级Electron至v5版本

猜你喜欢

热点阅读