Electron：preload文件配置

概述

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调用主进程封装好的能力