主进程调试
Node.js — Debugging Node.js
访问 chrome://inspect 选择设备——配置，增加域名端口号
npm run dev 启动后就会将数据发送到 chrome 浏览器这里
对于调试主进程监听非常方便，但是初始化时断点，目前还没探索出来
询问 ChatGPT,说是--inspect-brk=5858
brk 的确可以从开头进行调试，nice，控制台启动后 npm run dev，会等待 chrome 这边连接后，才开始下一步，在代码的初始点启动
npm run dev 时缓存配置
虽然配置了，但是 webpack dev server 打包启动还是很慢，不知道配置的意义是什么
cache: {type: 'filesystem', // 使用文件系统缓存cacheDirectory: path.resolve(__dirname, '.webpack-cache'), // 自定义缓存路径buildDependencies: {config: [__filename]},compression: 'gzip', // 压缩缓存数据name: 'main-renderer-cache', // 自定义缓存名称},关掉远程调用开关
开启后，如果引用 electron-log 库， webview 控制台那边会莫名其妙报 electron-log 错误，原因不详，反正关掉后，那边就不提醒了，目前我们的开发基本用不到这玩意
remindWindow = new BrowserWindow({width: 400,height: 150,x: width - 400,y: 16,title: 'Remind',// transparent: true,frame: false,show: false,webPreferences: {// devTools: false,// enableRemoteModule: true,hardwareAcceleration: false,webviewTag: true,nodeIntegration: true,contextIsolation: false,webSecurity: false,},skipTaskbar: true,})如何让 webstorm 支持 @ 路径
只要把主渲染的 webpack 配置文件选中，那么主渲相对根目录的 src/renderer 就等于 @ 路径，
这里设置的唯一好处是开发器可以按住 ctrl 键点击路径了，以后路径不会搞错，如果想其他那几个配置路径可以用，建议这里统一配置，比如主进程的为 @@ 方式，根目录为#等
electron 可以直接引 node_modules 中的库
之前没有看懂 externals 这个配置，现在懂了，意思是除了 vue 和 element-ui 直接打包到 renderer.js，其他的库都直接放在 node_modules 即可，理论上我想 vue，element-ui 不打包进去也是可以的吧
事实证明不把 vue 打包进来，也是可以用的，照样能打包，因为整个 node_modules 都打包进去了，根本不需要在 render.js 里面塞太多东西
牛逼的 CopyWebpackPlugin
以前真没觉得这玩意牛逼，因为主渲进程的 require 引入方式会从 node_modules 引进代码，而这里的代码自带 map，不过用 webpack dev server 启动后，则在代码的根目录是找不到这些 map 的， 我就把 node_modules 都拷贝到主渲打包后的根目录，的确解决了 map 的问题，下面是配置，注意要放在 dev 环境中，生产环境可不需要考虑 map 过去
借助 AI 和官网可以很好的掌握这个插件的各种灵活使用
CopyWebpackPlugin | webpack
new CopyWebpackPlugin({patterns: [{from: '**/*.map',context: path.join(__dirname, '../../node_modules'),// 使用函数返回最终目标路径，将所有文件平铺到 dist 根目录filter: (absoluteFilename) => {const filename = path.basename(absoluteFilename); // 获取原始文件名const lowerCaseFilename = filename.toLowerCase(); // 转为小写以去重if (seenFiles.has(lowerCaseFilename)) {return false; // 跳过重复文件}seenFiles.set(lowerCaseFilename, true); // 记录文件名return true; // 允许拷贝文件},to: ({absoluteFilename}) => {const filename = path.basename(absoluteFilename); // 原始文件名return path.join(__dirname, `../../dist/electron/${type}/pages/${processType}`, filename);},noErrorOnMissing: true},],})
不排除 node_modules 可以更好地提高 webstorm 对 electron-vue 框架的各种提醒
当然更耗费内存和性能，一旦将node_modules作为源码对待，基本所有函数和对象都有提醒，且长按ctrl+鼠标左键都可以快速找到，通过ctrl+alt+←/→键可以快速来回切换历史修改，非常方便开发
