Electron 的安装

背景

因为搞嵌入式开发的时候，每次烧写不同版本的固件的时候，经常需要重命名,有时候烧错版本我也不知道；

因此我认为对固件的管理比较麻烦，所以我希望能够有一个比较好的工具来做管理，找了一圈没有发现合适的，因此我决定自己搞。

找了一些界面设计的框架，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工程，将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:

posted @ 2020-11-21 09:03 schips 阅读(2806) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

黄树超

非典型嵌入式行业从业者；C/C++，Linux/Android

Electron 的安装

背景

介绍

安装

nodejs

Electron

可选的权限配置

运行Electron例程

打包

使用electron-builder打包

附录：打包时遇到的问题

黄树超

非典型嵌入式行业从业者；C/C++，Linux/Android

Electron 的 安装

背景

介绍

安装

nodejs

Electron

可选的权限配置

运行Electron例程

打包

使用electron-builder打包

附录：打包时遇到的问题

Electron 的安装