概述

preload是electron的預(yù)加載機(jī)制，可以理解為在electron創(chuàng)建時(shí)將nodejs`環(huán)境加載到渲染進(jìn)程中使用。

程序的進(jìn)程是相互獨(dú)立的，electron中渲染進(jìn)程和主進(jìn)程的協(xié)同工作一般采用IPC進(jìn)程通信或者在渲染進(jìn)程中集成node環(huán)境，還有早期比較低效的remote模塊方式使用node環(huán)境。除非保證渲染進(jìn)程的JavaScript都是可信安全的，否則不推薦在渲染進(jìn)程集成node環(huán)境。

使用preload的目的是在electron中不開啟node環(huán)境集成情況下使用node的模塊，避免不安全的JavaScript代碼隨意使用node環(huán)境。

preload的工作是在創(chuàng)建窗體時(shí)預(yù)加載需要node模塊到渲染進(jìn)程，然后以API方式暴露給渲染進(jìn)程調(diào)用，preload共享渲染進(jìn)程的window、document對(duì)象，因此preload可以輕松操作DOM，而渲染進(jìn)程不共享preload的global對(duì)象。

非preload的方式

非preload的方式的時(shí)候需要在主進(jìn)程中打開window時(shí)，設(shè)置一些屬性

webPreferences: {
  nodeIntegration: true, // 是否允許web端使用node
  contextIsolation: false, // 是否允許自定義preload腳本
}

渲染進(jìn)程中，直接使用electron，并修改webpack target屬性

'use strict';

import { ipcRenderer } from 'electron';

// channel
const channel = 'ipc-to-index';

/**
 * ipc to index
 */
export function ipcToIndex(){
  ipcRenderer.send (channel);
}

target: 'electron17.1-renderer',

• 優(yōu)點(diǎn)：可以在渲染進(jìn)程直接使用nodejs和electron能力
• 缺點(diǎn)：安全性降低，并且渲染進(jìn)程不能單獨(dú)調(diào)試

preload的方式

preload的方式是在打開窗口前先預(yù)加載一段腳本，不需要修改webPreferences中的nodeIntegration和contextIsolation屬性，主進(jìn)程中，打開窗口時(shí)添加preload腳本

webPreferences: {
  preload: path.join(__dirname, 'preload.js')
}

preload.js

// preload.js

const { contextBridge, ipcRenderer} = require('electron');
const fs = require('fs'); 

contextBridge.exposeInMainWorld('fsApi', {
  writeFile: (filename, text, callback) => {
    fs.writeFile(filename, text, callback);
  },
  readFile: (filename, encode,  callback) => {
    fs.readFile(filename, encode, callback);
  },
  unlink: (filename, callback) => {
    fs.unlink(filename, callback);
  }
});

contextBridge.exposeInMainWorld('ipcRendererApi', {
  send: (channel, args) => ipcRenderer.send(channel, args),
  once: (channel, listener) => ipcRenderer.once(channel, listener),
  on: (channel, listener) => ipcRenderer.on(channel, listener),
});

渲染進(jìn)程中，通過window.xxx使用注入的能力

'use strict';
 
// import { ipcRenderer } from 'electron';
 
// channel
const channel = 'ipc-to-index';
 
/**
 * ipc to index
 */
export function ipcToIndex(){
  window.ipcRendererApi.send('close', args);
}

• 優(yōu)點(diǎn)：安全性高，渲染進(jìn)程項(xiàng)目可以單獨(dú)調(diào)試部分功能
• 缺點(diǎn)：所有渲染進(jìn)程想使用的能力，都需要通過preload腳本注入

實(shí)際開發(fā)中建議使用preload的方式，盡量將需要nodejs和electron能力的抽離到主進(jìn)程中，渲染進(jìn)程通過ipc調(diào)用主進(jìn)程封裝好的能力