背景
因為搞嵌入式開發的時候，每次燒寫不同版本的固件的時候，經常需要重命名,有時候燒錯版本我也不知道；
因此我認為對固件的管理比較麻煩，所以我希望能夠有一個比較好的工具來做管理，找了一圈沒有發現合適的，因此我決定自己搞。
找了一些界面設計的框架，QT 和 Electron 都不錯。但是因為 搞嵌入式不能總是只會 C/C++，還是要懂點其他語言（哪怕是腳本）。
因此，我決定勇敢地邁出web的第一步。
介紹
總結：Electron是用於跨平台的桌面開發的框架，能夠以web的形式設計界面。
大家感話：
-
Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。
-
Electron相當於一個瀏覽器的外殼，可以把網頁程序嵌入到殼里面，可以運行在桌面上的一個程序，可以把網頁打包成一個在桌面運行的程序（軟件）。
安裝
nodejs
環境要求 v10.0 以上
首先進入node.js官網[https://nodejs.org/en/]下載node.js，並安裝。
因為等待的時間會有點久，因此可以先將官方提供的例程給先clone下來，或者下載：
git clone https://github.com/electron/electron-api-demos
安裝時的路徑最好不要帶有中文或者是空格，node驗證安裝情況：
node -v
v14.15.1
Electron
輸入以下命令安裝：
npm config set registry https://registry.npm.taobao.org/ # 設置npm鏡像源為淘寶鏡像
npm install -g electron # 進行全局安裝
npm install -g electron-packager
輸出結果：
C:\Users\Schips\AppData\Roaming\npm\electron -> C:\Users\Schips\AppData\Roaming\npm\node_modules\electron\cli.js
> core-js@3.7.0 postinstall C:\Users\Schips\AppData\Roaming\npm\node_modules\electron\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> electron@11.0.2 postinstall C:\Users\Schips\AppData\Roaming\npm\node_modules\electron
> node install.js
Downloading electron-v11.0.2-win32-x64.zip: [==================================================] 100% ETA: 0.0 seconds
+ electron@11.0.2
added 87 packages from 98 contributors in 291.206s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New patch version of npm available! 6.14.8 -> 6.14.9 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.9 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
查看electron是否安裝成功可通過命令electron -v查看。
可選的權限配置
reference：https://blog.csdn.net/weixin_38883338/article/details/100054550
注意，因為權限的問題，運行Electron可能會出現以下結果：
electron : 無法加載文件 C:\Users\Schips\AppData\Roaming\npm\electron.ps1，因為在此系統上禁止運行腳本。有關詳細信息，請
參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ electron -v
+ ~~~~~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解決方法：以管理員權限運行cmd或powershell，輸入set-ExecutionPolicy RemoteSigned，按y回車
set-ExecutionPolicy RemoteSigned
執行策略更改
執行策略可幫助你防止執行不信任的腳本。更改執行策略可能會產生安全風險，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 幫助主題所述。是否要更改執行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暫停(S) [?] 幫助 (默認值為“N”): y
PS C:\WINDOWS\system32> get-ExecutionPolicy
RemoteSigned
運行Electron例程
通過運行Electron例程來驗證效果（上文已經提到提前下載）：
git clone https://github.com/electron/electron-api-demos
根據例程提供的文檔，輸入下列的命令：
cd electron-api-demos
npm install
npm start
運行結果如下：
PS C:\cygwin64\home\Schips\electron-api-demos> npm install
> electron-chromedriver@3.0.0 install C:\cygwin64\home\Schips\electron-api-demos\node_modules\electron-chromedriver
> node ./download-chromedriver.js
> husky@0.14.3 install C:\cygwin64\home\Schips\electron-api-demos\node_modules\husky
> node ./bin/install.js
husky
setting up Git hooks
done
> core-js@3.6.5 postinstall C:\cygwin64\home\Schips\electron-api-demos\node_modules\global-agent\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> electron@7.2.4 postinstall C:\cygwin64\home\Schips\electron-api-demos\node_modules\electron
> node install.js
Downloading electron-v7.2.4-win32-x64.zip: [===================================================] 100% ETA: 0.0 seconds
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 952 packages from 1237 contributors in 438.485s
13 packages are looking for funding
run `npm fund` for details
PS C:\cygwin64\home\Schips\electron-api-demos> npm start
> electron-api-demos@2.0.2 start C:\cygwin64\home\Schips\electron-api-demos
> electron .
(electron) 'getName function' is deprecated and will be removed. Please use 'name property' instead.
[08:53:08.854] [info] update-electron-app config looks good; aborting updates since app is in development mode
libpng warning: iCCP: cHRM chunk does not match sRGB
打包
進入你所在的Electron工程，將electron-package包安裝到在項目下面：
npm install --save-dev electron-packager
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ electron-packager@12.2.0
added 3 packages from 5 contributors and updated 14 packages in 7.765s
13 packages are looking for funding
run `npm fund` for details
安裝完成之后，項目根目錄下面的package.json文件里，會多出一條electron-package的版本號配置信息 ：
"devDependencies": {
"@octokit/rest": "^16.3.2",
"chai": "^3.4.1",
"chai-as-promised": "^6.0.0",
"check-for-leaks": "^1.2.1",
"devtron": "^1.3.0",
"electron-packager": "^12.2.0",
"electron-winstaller": "^2.2.0",
"husky": "^0.14.3",
"mocha": "^5.2.0",
"npm-run-all": "^4.0.2",
"request": "^2.70.0",
"rimraf": "^2.5.2",
"signcode": "^0.5.0",
"spectron": "^5.0.0",
"standard": "^8.2.0",
"tap": "^14.10.6"
},
使用electron-builder打包
使用之前需要先安裝yarn：
拓展閱讀：
yarn是什么？簡單來說是和npm一樣的包管理工具，並對npm的一些弊端提供了優化和解決方案
yarn和npm的區別？安裝速度更快，緩存了每個下載過的包，再次使用時無需重復下載。 同時利用並行下載以最大化資源利用率，
運行代碼前會校驗每個安裝包的完整性和統一性，使其在不同系統上也能無差別的工作
官方推薦使用yarn的原因：
1、它可以更好地處理依賴關系。
2、可以使用 yarn clean 幫助減少最后構建文件的大小。
npm install -g yarn
> yarn@1.22.10 preinstall C:\Users\schips.huang\AppData\Roaming\npm\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)
C:\Users\schips.huang\AppData\Roaming\npm\yarnpkg -> C:\Users\schips.huang\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\schips.huang\AppData\Roaming\npm\yarn -> C:\Users\schips.huang\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.10
added 1 package in 2.041s
yarn config set registry https://registry.npm.taobao.org/ # 設置yarn鏡像源為淘寶鏡像
配置打包工具，來到項目所在目錄：
yarn add electron-builder --save-dev
PS E:\electron-api-demos-master> yarn add electron-builder --save-dev
yarn add v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
info There appears to be trouble with your network connection. Retrying...
warning highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest
warning devtron > highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest
warning electron-packager > electron-download > nugget > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning electron-packager > asar > mksnapshot > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning electron-packager > electron-download > nugget > request > har-validator@5.1.5: this library is no longer supported
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
warning mocha > mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
warning request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning spectron > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning spectron > webdriverio@4.14.4: outdated version, please use @next
warning spectron > webdriverio > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning spectron > webdriverio > babel-runtime > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning spectron > webdriverio > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning spectron > webdriverio > css-parse > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning spectron > webdriverio > css-parse > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
info There appears to be trouble with your network connection. Retrying...
warning standard > eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
warning tap > coveralls > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
info There appears to be trouble with your network connection. Retrying...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@octokit/rest > @octokit/plugin-request-log@1.0.2" has unmet peer dependency "@octokit/core@>=3".
success Saved lockfile.
success Saved 562 new dependencies.
info Direct dependencies
├─ @octokit/rest@16.43.2
├─ chai-as-promised@6.0.0
├─ chai@3.5.0
├─ check-for-leaks@1.2.1
├─ devtron@1.4.0
├─ electron-builder@22.9.1
├─ electron-log@2.2.17
├─ electron-packager@12.2.0
...
└─ zip-stream@1.2.0
Done in 1897.57s.
在命令行中執行npm run dist ，執行結果如下：
附錄：打包時遇到的問題
npm run dist
> electron-api-demos@2.0.2 dist E:\electron-api-demos-master
> electron-builder --win --x64
• electron-builder version=22.9.1 os=10.0.18363
• loaded configuration file=package.json ("build" field)
⨯ Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-api-demos@2.0.2 dist: `electron-builder --win --x64`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-api-demos@2.0.2 dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: