初次尝试桌面开发框架 Electron，一路上遇到了不少问题和 bug，小记一下。需求很简单，在主进程中创建主窗口，并在渲染进程中创建一个新的窗口。
按照思路，这个时候我会在搜索引擎里找“Electron 如何在渲染进程中打开新窗口？”。果不其然，找到了一篇19年的文章 用 Electron创建跨平台应用多窗口 看了下操作，想着，蛮简单嘛。
首先从 electron 导入 remote，之后再在渲染进程中 new BrowserWindow。
结果发现，好家伙，从第一行就开始报错了。
Jeffrey的博客
const { remote } = require('electron')
这里主要出现了以下的问题：
这个问题对应 StackOverflow 有解答，laravel - BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default - Stack Overflow
但没想到他需要修改 webpack.config.js，我一看项目目录，就没有这玩意啊！
为了找到 webpack.config.js，搜索引擎提示我使用 npm run eject 生成配置。这里要说以下。
原来大部分依赖被 creat-react-app 封装到了 react-scripts 之中，使用 npm run eject 是为了把 creat-react-app 对 webpack、babel 等相关配置的封装全部弹出，之后我们就能对所弹出的配置进行修改。
之后接着上面的问题，先安装path-browserify npm install path-browserify --save，再修改 webpack.config.js。
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
...
fallback: {
...
path: require.resolve("path-browserify")
}
}
}
}
上面的问题解决后，没想到还有新的问题，StackOverflow 还是提示我修改 webpack.config.js。
那就接着改，这里要修改返回的 target 模式，具体参考 'fs' can't be resolved。
return {
target: ['electron-main']
...
}
后来的事情就比较魔幻了，bug 也改，页面也启动了，但发现渲染进程弹出的窗口并没有内容。这就比较郁闷了，bug 修穿了都没有出现想要的效果。
最后回到开始的起点，我在搜索引擎里找“Electron 如何在渲染进程中打开新窗口？”，看到了这篇文章 Electron学习BrowserWindow，发现 remote 已经被废除了，需要使用就需要重新安装 remote。
npm install @electron/remote --save
这下操作下来，果然不在出现之前的问题了，窗口页正常打开了，这里在主进程的代码下一定要做一次初始化。
require('@electron/remote/main').initialize()
require('@electron/remote/main').enable(mainWindow.webContents)
最后写到这里，我发现使用 IPC 的方式实现主进程和渲染进程通讯来打开窗口，也是一种不错的方法，具体做法参考 electron渲染进程与主进程互相通信
或许你遇到了和我同样的问题，以下是我在解决问题时寻找的解决方案链接：