概述
preload是electron的预加载机制，可以理解为在electron创建时将nodejs`环境加载到渲染进程中使用。程序的进程是相互独立的，
electron中渲染进程和主进程的协同工作一般采用IPC进程通信或者在渲染进程中集成node环境，还有早期比较低效的remote模块方式使用node环境。除非保证渲染进程的JavaScript都是可信安全的，否则不推荐在渲染进程集成node环境。使用
preload的目的是在electron中不开启node环境集成情况下使用node的模块，避免不安全的JavaScript代码随意使用node环境。
preload的工作是在创建窗体时预加载需要node模块到渲染进程，然后以API方式暴露给渲染进程调用，preload共享渲染进程的window、document对象，因此preload可以轻松操作DOM，而渲染进程不共享preload的global对象。
非preload的方式
非
preload的方式的时候需要在主进程中打开window时，设置一些属性
webPreferences: {
nodeIntegration: true, // 是否允许web端使用node
contextIsolation: false, // 是否允许自定义preload脚本
}
渲染进程中，直接使用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',
- 优点：可以在渲染进程直接使用nodejs和electron能力
- 缺点：安全性降低，并且渲染进程不能单独调试
preload的方式
preload的方式是在打开窗口前先预加载一段脚本，不需要修改webPreferences中的nodeIntegration和contextIsolation属性，主进程中，打开窗口时添加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),
});
渲染进程中，通过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);
}
- 优点：安全性高，渲染进程项目可以单独调试部分功能
- 缺点：所有渲染进程想使用的能力，都需要通过preload脚本注入
实际开发中建议使用preload的方式，尽量将需要nodejs和electron能力的抽离到主进程中，渲染进程通过ipc调用主进程封装好的能力
