手动搭建 electron 构建环境

官方文档

掌握 electron 源码编译的能够获得2个好处：

1. 为将来裁剪源码做准备；
2. 为学习 CEF 的环境搭建积累一些相关的经验

使用 @electron/build-tools 搭建环境

官方提供的工具，仓库以及文档

初始化环境

工具所提供的命令是e init <name>, 运行过程中遇到了2个问题:

• 问题1：连接不上google的仓库，报错如下

username@usernamedeMacBook-Pro code % sudo e init main-test

Cloning "depot_tools" into /Users/username/.electron_build_tools/third_party/depot_tools

fatal: unable to access 'https://chromium.googlesource.com/chromium/tools/depot_tools.git/': Failed to connect to chromium.googlesource.com port 443 after 75004 ms: Couldn't connect to server

ERROR Error: Command failed: git clone -q https://chromium.googlesource.com/chromium/tools/depot_tools.git /Users/username/.electron_build_tools/third_party/depot_tools

    at checkExecSyncError (node:child_process:885:11)

    at Object.execFileSync (node:child_process:921:15)

    at Object.ensureDepotTools [as ensure] (/Users/username/.electron_build_tools/src/utils/depot-tools.js:31:18)

    at runGClientConfig (/Users/username/.electron_build_tools/src/e-init.js:79:9)

    at ensureRoot (/Users/username/.electron_build_tools/src/e-init.js:109:5)

    at Command.<anonymous> (/Users/username/.electron_build_tools/src/e-init.js:179:7)

    at Command.listener [as _actionHandler] (/Users/username/.electron_build_tools/node_modules/commander/lib/command.js:480:17)

    at /Users/username/.electron_build_tools/node_modules/commander/lib/command.js:1234:65

    at Command._chainOrCall (/Users/username/.electron_build_tools/node_modules/commander/lib/command.js:1151:12)

原因：git拉取https的源码是没有走VPN的 解决方法：设置git工具的http和https代理，主机为本机，端口为VPN工具提供的端口

git config --global http.proxy "localhost:<VPN_PORT>"
git config --global https.proxy "localhost:<VPN_PORT>"

• 问题2：克隆 depot_tools 时出现 connection reset

username@usernamedeMacBook-Pro code % sudo e init main-test                            

Cloning "depot_tools" into /Users/username/.electron_build_tools/third_party/depot_tools

fatal: unable to access 'https://chromium.googlesource.com/chromium/tools/depot_tools.git/': error:02FFF036:system library:func(4095):Connection reset by peer

ERROR Error: Command failed: git clone -q https://chromium.googlesource.com/chromium/tools/depot_tools.git /Users/username/.electron_build_tools/third_party/depot_tools

    at checkExecSyncError (node:child_process:885:11)

    at Object.execFileSync (node:child_process:921:15)

    at Object.ensureDepotTools [as ensure] (/Users/username/.electron_build_tools/src/utils/depot-tools.js:31:18)

    at runGClientConfig (/Users/username/.electron_build_tools/src/e-init.js:79:9)

    at ensureRoot (/Users/username/.electron_build_tools/src/e-init.js:109:5)

    at Command.<anonymous> (/Users/username/.electron_build_tools/src/e-init.js:179:7)

    at Command.listener [as _actionHandler] (/Users/username/.electron_build_tools/node_modules/commander/lib/command.js:480:17)

    at /Users/username/.electron_build_tools/node_modules/commander/lib/command.js:1234:65

    at Command._chainOrCall (/Users/username/.electron_build_tools/node_modules/commander/lib/command.js:1151:12)

原因可能是网络相关的，暂时没找到解决办法，于是尝试了手动搭建环境

手动搭建

安装 ninja 和 gn

electron 源码使用 gn 工具构建，两个工具都比较成熟，可以在文档上找到下载安装的方法 (gn是基于 ninja 的)

ninja 文档

ninja 可以在 homebrew 上直接安装使用

gn 文档

gn 可以在官网上直接下载二进制可执行程序，随后添加环境变量到系统上/etc/paths

安装 depot_tools

depot_tools 文档

用于拉取 Chromium 源码及其依赖的工具 从git仓库 clone 源码

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

将本地目录设置到环境变量，随后即可使用 gclient 命令

export PATH=/path/to/depot_tools:$PATH

获取 electron 源码

gclient config

首先运行 gclient config --name "src/electron" --unmanaged https://github.com/electron/electron，遇到的几个问题：

Failed to connect to chrome-infra-packages.appspot.com port 443

原因：curl 请求时没有走代理 解决方案：将 http 代理地址设置为环境变量

# ~/.zshrc
export http_proxy=http://127.0.0.1:${VPN_PORT}
export https_proxy=http://127.0.0.1:${VPN_PORT}

PermissionError: [Errno 13] Permission denied: './.gclient'

原因：gclient 命令运行过程中会在 electron 目录下创建了.gclient这个目录，其所有者为 root 用户 解决方案：修改.gclient的所有者为当前用户即可

gclient sync

随后就是漫长的下载过程，执行 gclient sync --with_branch_heads --with_tags 因为要下载十几G的资源，中途可能会失败

遇到的问题：

dugite 安装失败

可能会遇到不同网络原因引起的报错，比如443段口 ECONNRESET、

Downloading Git from: https://github.com/desktop/dugite-native/releases/download/v2.39.1/dugite-native-v2.39.1-6e9b509-macOS-x64.tar.gz

Error raised while downloading https://github.com/desktop/dugite-native/releases/download/v2.39.1/dugite-native-v2.39.1-6e9b509-macOS-x64.tar.gz Error: Client network socket disconnected before secure TLS connection was established

    at connResetException (node:internal/errors:717:14)

    at TLSSocket.onConnectEnd (node:_tls_wrap:1595:19)

    at TLSSocket.emit (node:events:525:35)

    at endReadableNT (node:internal/streams/readable:1359:12)

    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {

  code: 'ECONNRESET',

  path: null,

  host: 'github.com',

  port: 443,

  localAddress: undefined

}

原因：dugite 这个包在安装过程中会执行 script/download-git.js 这个脚本，而 VPN 无法代理 nodejs 脚本所请求的下载地址 解决方法：通过翻阅 dugite (script/config.js) 源码可知，脚本本身已经考虑到了下载失败这个问题，在下载执行前，脚本会先访问系统变量 process.env.DUGITE_CACHE_DIR ，检查目录下有没有已下载好的压缩包，所以只要手动下载好，然后将压缩包的目录设置成 DUGITE_CACHE_DIR 这个系统变量即可解决

export DUGITE_CACHE_DIR=/path/to/dugite/cache/dir

pythone3运行 update.py 失败

________ running 'python3 src/tools/clang/scripts/update.py' in '/Users/username/Code/electron'

Downloading https://commondatastorage.googleapis.com/chromium-browser-clang/Mac/clang-llvmorg-18-init-12938-geb1d5065-1.tar.xz 

<urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1002)>

原因：Python在尝试建立一个安全的HTTPS连接时，无法验证服务器的SSL证书 解决方法：相关的方法有很多，参照 stackoverflow 这个问答，在写这篇笔记时用的是 Mac 系统的解法

git 仓库配置

cd src/electron
git remote remove origin
git remote add origin https://github.com/electron/electron
git checkout main
git branch --set-upstream-to=origin/main
cd -

到这里为止，所有环境搭建的过程均已完成