Electron-Vue 主进程远程调试 & Webpack/Webstorm 打包配置细节记录

主进程调试

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+←/→键可以快速来回切换历史修改，非常方便开发