最近有个需求需要改动electron项目壳的功能，所谓壳的功能指的是electron套壳应用中前端静态资源自身做不了，需要借助electron应用的能力来实现的功能。

electron应用可以会需要引用npm包，只不过这些包是针对electon应用的。

分析

所以我们现在有这样三类资源可能存在通信

electron壳、electron npm包、前端静态资源，这些“应用”之间通常怎么通信呢？

• electron壳 <--> electron npm包 electron壳直接引用electron npm包即可，类似前端静态资源直接引用对应的npm包。

• electron壳 <--> 前端静态资源 electron壳通过创建BrowserWindow来loadFile加载将前端静态资源，把需要暴露的功能直接挂载前端的window上面，它们就能实现通信了

• electron npm包 -- 前端静态资源 它们属于不同类型的“应用”，它们直接不能直接进行通信，需要借助electron壳，走前面的“electron壳 <--> 前端静态资源”路线

不同类型的应用（比如node应用和C++应用）直接需要通过IPC通信，它们之间通信一般只能通过发送消息传递数据（json或字符串），无法像平时注册回调函数，一般只有同类型的应用才能注册回调函数。

举例

下面以一个electron npm包（自带静态资源，整个包类似一个小electron应用）与前端静态资源通信为例

electron npm包通过创建BrowserWindow来loadFile加载自身的前端资源来实现交互部分，对外暴露接口初始化窗口UI。

index.js

class  Plugin{
    ...
    open(options) {
       const win = new BrowserWindow({
            ...options
            webPreferences: {
                ...
                preload: ('./preload.js')
            }
       });
       win.loadFile('xxx.html');
       win.once('ready-to-show', () => {
            win.webContents.send('init', { list: ['aaa', 'bbb']})
       })
    }
    onClick(options) {
      this.options.onClick && ipcMain.on('Plugin_onClick', this.options.onClick);
    }
} 

preload.js

// 转发electon的消息成前端资源能监听的实践
ipcRenderer.on( 'init', function (event, data) {
    window.dispatchEvent(new CustomEvent('InitNotify', {detail: data}));
});

window.addEventListener('InitNotify', (event) => {
    console.log('InitNotify', event); // handleInit
})

window.addEventListener('onClick', (event) => {
    ipcRenderer.send( 'onClick', event.detail);
})

ui.js

export class UI {
    construct() {
       this.openBtn = new Button('btn');
       this.openBtn.onDidClick(e => {
            window.dispatchEvent(new CustomEvent('onClick', {detail: data}));
       })
    }
}