圆~圈

CentOS下Electron初尝试

CentOS electron electron-packager node npm 打包

场景描述

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

至此,打包完成。