心血來潮想做一個PC端應用，就來學學Electron，以下為學習Electron時的踩坑記錄。
安裝
在國內安裝electron的時候，可能會因為網絡原因遇到卡在Building fresh packages...（yarn）或者是卡在node install.js（npm）這一步上。
在項目的根目錄下創建.yarnrc或.npmrc然后輸入如下內容更改各依賴的源，即可解決該問題。
registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
C++包rebuild
使用electron就避不開要使用一些第三方的C++包，使用這些包的時候需要根據node和electron的版本重新編譯。
手動rebuild
手動編譯要根據electron的版本設置target，然后再根據node的版本設置對應的abi值，（詳見對應表）
$ npm rebuild --runtime=electron --target=6.0.12 --disturl=https://atom.io/download/atom-shell --abi=72
使用electron-rebuild
yarn add electron-rebuild -D # or npm install electron-rebuild --save-dev
下載后使用npx electron-rebuild即可重新編譯，有時候會因為網絡原因構建時下載依賴失敗，因此可以通過-d=http://npm.taobao.org/mirrors/atom-shell切換為淘寶鏡像（好久沒更新了）
注意：Windows環境下安裝electron-rebuild需要先安裝
windows-build-tools
打包
electron常用的打包工具有兩個electron-builder和electron-forge，我使用的是社區活躍度較高的electron-builder，electron打包時會下載一些必要的依賴，因此和安裝依賴、rebuild具有同樣的問題——網絡問題，因此需要更改下載地址，從淘寶鏡像下載
ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
不過我改完鏡像打包依然是顯示網絡超時，因此我選擇了手動添加nsis和winCodeSign
從淘寶鏡像中分別下載所需要版本的nsis和winCodeSign，解壓后將nsis的整個文件夾放到C:\Users\admin\AppData\Local\electron-builder\Cache\nsis中，將winCodeSign的整個文件夾放到C:\Users\admin\AppData\Local\electron-builder\Cache\winCodeSign中，即可成功打包。
白屏問題
簡單解決
- 在ready-to-show的時候再顯示
- 設置窗口底色
win = new BrowerWindow({
width: 600,
height: 300,
webPreferences: {
nodeIntegration: true
},
show: false,
background: '#2e2c29',
});
win.on('ready-to-show', () => {
win.show();
});