场景描述
Electron初尝试,遇到莫名问题,此文章仅作为问题解决记录,以便后期查找,并且,我能够按照此方案解决问题,不代表具有通用性。
实现步骤
1. 环境搭建
这部分不做详说,网上很多。这里列出我的环境。
- 操作系统:CentOS 7.7
- node版本:12.13.0
- npm版本:6.14.0
- electron版本:8.0.2
2. 下载electron-quick-start项目
[zhy@vmware workspace]# git clone https://github.com/atom/electron-quick-start
3. 安装依赖
[zhy@vmware workspace]# cd electron-quick-start
[zhy@vmware electron-quick-start]# npm install
由于我使用的是中国移动宽带,导致这一步骤一直无法成功,后通过切换为淘宝的源,且使用cnpm安装依赖,才磕磕绊绊成功。
[zhy@vmware electron-quick-start]# npm install -g cnpm --registry=https://registry.npm.taobao.org
[zhy@vmware electron-quick-start]# cnpm install
使用cnpm安装依赖后,会导致node_modules目录内的依赖结构比较混乱,但不影响使用的
4. 运行
[zhy@vmware electron-quick-start]# npm start
> electron-quick-start@1.0.0 start /workspace_zhy/electron-quick-start
> electron .
[123121:0227/174341.609887:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configure
这个问题说的很明白,是由于文件
/workspace/electron-quick-start/node_modules/_electron@8.0.2@electron/dist/chrome-sandbox
权限导致的,修改权限即可。
[zhy@vmware electron-quick-start]# cd node_modules/electron/dist
[zhy@vmware dist]# sudo chown root:root chrome-sandbox
[zhy@vmware dist]# sudo chmod 4755 chrome-sandbox
[zhy@vmware dist]# cd /workspace/electron-quick-start
[zhy@vmware electron-quick-start]# npm start
效果如果:
5. 打包
打包方式网上介绍有多种,我使用electron-packager。
1) 安装electron-packager依赖
[zhy@vmware electron-quick-start]# npm install electron-packager --save-dev
[zhy@vmware electron-quick-start]# npm install electron-packager -g
2) 编辑项目package.json
"scripts": {
"start": "electron .",
"package-linux": "electron-packager . HelloWorld --platform=linux --arch=x64 --electron-version=8.0.2 --overwrite --ignore=node_modules --ignore=.gitignore"
}
3) 运行打包命令
[zhy@vmware electron-quick-start]# npm run package-linux
> electron-quick-start@1.0.0 packager /workspace_zhy/electron-quick-start
> electron-packager . Helloworld --platform=linux --arch=x64 --electron-version=8.0.2 --overwrite --ignore=node_modules --ignore=.gitignore
Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electron/v8.0.2/electron-v8.0.2-linux-x64.zip
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-quick-start@1.0.0 package-linux: `electron-packager . Helloworld --platform=linux --arch=x64 --electron-version=8.0.2 --overwrite --ignore=node_modules --ignore=.gitignore`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-quick-start@1.0.0 packager 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:
npm ERR! /home/zhy/.npm/_logs/2020-02-27T10_04_05_658Z-debug.log
经过查找,发现地址
https://npm.taobao.org/mirrors/electron/v8.0.2/electron-v8.0.2-linux-x64.zip
错误导致的,淘宝镜像中正确的地址应该是
https://npm.taobao.org/mirrors/electron/8.0.2/electron-v8.0.2-linux-x64.zip
在路径版本号层级处,多了一个“v”,百度之后,通过本文列出的参考资料1中,发现了同样的问题,但很遗憾的是,我按照其解决方案没能解决我的问题,但其解决方案给我提供了很有价值的思路。
通过解读其文中提到的node_modules\electron\install.js
和@electron/get/dist/cjs/index.js
源码,发现在方法 downloadArtifact(_artifactDetails)
被调用时,是没有传入mirrorOptions配置项的,在install.js中配置mirrorOptions项后也是如此。
又通过查看 node_modules\electron-packager\src\index.js
发现electron-packager的配置项,会传递到electron中去,所以通过electron-packager的配置脚本,配置mirrorOptions配置即可。
修改后的脚本:
"scripts": {
"start": "electron .",
"package-linux": "electron-packager . Helloworld --platform=linux --arch=x64 --electron-version=8.0.2 --overwrite --ignore=node_modules --ignore=.gitignore --download.mirrorOptions.customDir=8.0.2"
}
再次运行打包命令
[zhy@vmware electron-quick-start]# npm run package-linux
> electron-quick-start@1.0.0 package-linux /workspace/electron-quick-start
> electron-packager . Helloworld --platform=linux --arch=x64 --electron-version=8.0.2 --overwrite --ignore=node_modules --ignore=.gitignore --download.mirrorOptions.customDir=8.0.2
Packaging app for platform linux x64 using electron v8.0.2
Wrote new app to /workspace/electron-quick-start/Helloworld-linux-x64
至此,打包完成。