window搭建基于Electron的hyper开发环境踩坑

背景

个人需要在hyper终端基础上做一些二次开发，记录搭建开发环境中遇到的问题；
hyper官网：https://hyper.is/
在hyper github页面中，对个人开发环境的介绍如下：

步骤可以简单分为：

1. 安装windows-build-tools；
2. yarn （安装依赖库）；
3. yarn run dev;
4. 在新窗口中 yarn run app；

安装windows-build-tools

如上述描述，在终端（管理员权限）执行yarn global add windows-build-tools ，出现长时间加载后仍未响应的问题，网上一些回答表示就是需要较长时间，但用时超过12H后仍未加载成功，显然是不合理的。
此问题猜测为windows-build-tools会主动安装Visual Studio环境，且使用安装源为国外源，导致无法成功安装；
解决方案：执行命令更换为yarn global add windows-build-tools@4.0.0 指定此版本可以安装成功，用时预计2~3分钟；

安装依赖库

执行yarn 安装依赖库时，主要遇到以下问题：

• 下载依赖文件提示连接超时（Connection Timeout）：

  • 首先是众所周知的镜像源地址问题，通过yarn config set registry http://registry.npm.taobao.org/ 命令设置镜像源地址为国内镜像即可；
  • 若执行上述操作后仍提示连接超时，且连接路径仍为默认镜像源（设置镜像源未生效），检查目录下是否存在 .yarnrc 文件，将其删除即可；

• visualstudio编译相关异常报错，如找不到头文件、编译器版本不正确（MSBuild相关异常提示）等

   C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\node-addon-api\napi.h(4,10): fatal error C1083:
    ????????: �node_api.h�: No such file or directory [C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\native-process-working-directory\build\native-process-working-directory.vcxproj]
  

  此类异常现象与windows-build-tools安装有关系，首先确保windows-build-tools成功安装（visual stadio可自行安装，如我使用的2022版本），安装后通过以下命令配置msvs版本：

  yarn config set msvs_version 2022
  yarn config set msbuild_path "C:\\Program Files\\Microsoft Visual Studio\\2022\\Community\\MSBuild\\Current\\Bin\\MSBuild.exe"
  

  若仍出现原报错，则需要执行yarn clean 将环境清空并重新编译依赖库；

• node-gyp编译node-pty时提示 Completed: 0Error: Could not find any Visual Studio installation to use ，如下所示:

  / Building module: node-pty, Completed: 0Error: Could not find any Visual Studio installation to use
  	at VisualStudioFinder.fail (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
      at C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:72:14
      at VisualStudioFinder.findVisualStudio2015 (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:367:14)
      at C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:68:12
      at VisualStudioFinder.parseData (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:240:5)
      at C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\node-gyp\lib\find-visualstudio.js:146:14
      at ChildProcess.exithandler (node:child_process:394:7)
      at ChildProcess.emit (node:events:513:28)
  
  × Rebuild Failed
  
  An unhandled error occurred inside electron-rebuild
  node-gyp failed to rebuild 'C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\node-pty'
  
  Error: node-gyp failed to rebuild 'C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\node-pty'
      at ChildProcess.<anonymous> (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\node_modules\@electron\rebuild\lib\module-type\node-gyp\node-gyp.js:118:24)
      at ChildProcess.emit (node:events:513:28)
      at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
  error Command failed with exit code 4294967295.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  error Command failed with exit code 4294967295.
  info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
  

  此问题为node-pty获取visualstudio可用版本身时出现异常导致，具体原因此处不做分析，解决办法如下：
  找到目录下 node_modules\node-gyp\lib\find-visualstudio.js 文件，将校验visualstudio版本函数逻辑判断代码注释；
  
  当然，执行此操作的前提条件是确认本地visualstudio已正确安装，且正确执行前文所述操作设置msvc版本及编译器路径；

开启Electron调试运行环境

首先执行 yarn run dev 开启服务，此步骤未出现问题；
随后执行 yarn run app ，此处应当开启UI窗口，但实际出现下述异常：

yarn run v1.22.19
$ cross-env ELECTRONMON_LOGLEVEL=error electronmon --inspect target

Debugger listening on ws://127.0.0.1:9229/355d8f08-e256-49c0-be21-bb5a87c9635c
For help, see: https://nodejs.org/en/docs/inspector
Disabling Chromium GPU blacklist
running in dev mode electron will open file://C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\index.html
(node:22276) UnhandledPromiseRejectionWarning: Error: Git returned with status 128: fatal: not a git repository (or any of the parent directories): .git
    at handleProcessResult (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\git-describe\lib\git-describe.js:77:19)
    at wrapper (C:\Users\xxx\Desktop\TEMP\hyper-canary\hyper-canary\target\node_modules\lodash\lodash.js:5255:19)
    at ChildProcess.exithandler (node:child_process:417:5)
    at ChildProcess.emit (node:events:513:28)
    at maybeClose (node:internal/child_process:1093:16)
    at Socket.<anonymous> (node:internal/child_process:451:11)
    at Socket.emit (node:events:513:28)
    at Pipe.<anonymous> (node:net:757:14)
(Use `electron --trace-warnings ...` to show where the warning was created)
(node:22276) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodej
s.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Error while loading devtools extensions Error: net::ERR_CONNECTION_TIMED_OUT
    at SimpleURLLoaderWrapper.<anonymous> (node:electron/js2c/browser_init:2:49386)
    at SimpleURLLoaderWrapper.emit (node:events:513:28)
    at SimpleURLLoaderWrapper.callbackTrampoline (node:internal/async_hooks:130:17)
Failed to fetch extension, trying 0 more times
[29184:0119/175902.525:ERROR:gpu_init.cc(523)] Passthrough is not supported, GL is disabled, ANGLE is

前面git相关告警不管，看后面的 ERR_CONNECTION_TIMED_OUT ，根据其异常提示，此处是尝试连接某个地址失败，随后抛出此异常；
在代码中搜索相关告警，最终确定是 app\node_modules\electron-devtools-installer\dist\downloadChromeExtension.js 文件中，尝试从谷歌地址下载谷歌插件，而因为众所周知的原因导致连接失败；
此处给出我的解决方案：

1. 在异常处加上谷歌插件ID，得知实际需要下载的插件是哪个
   
2. 在国内镜像网站通过此ID，手动下载对应插件，我使用的是这个镜像网站 https://crxdl.com/ ；
3. 下载成功后，将其中的.crx文件取出，放到某目录下，并将其版本信息删除，仅保留chromeStoreID.crx形式
   
4. 在该目录下开启http服务，我使用的方法是执行以下python命令 python -m http.server 1900 ；
5. 将downloadChromeExtension.js 文件中下载链接修改为本地地址，如下所示：
   
6. 重新执行 yarn run app 命令，此时应当不再提示连接异常，若仍提示连接异常或404 not found等异常，检查上述步骤是否正确；

若执行上述操作后，成功出现UI界面，但界面卡死无响应，并提示 Permision 相关异常，请使用管理员权限打开CMD终端，并重新执行 yarn run app 命令；
如下，成功打开调试状态 hyper 终端窗口：