etcher编译构建指导及相关问题总结

编译

代码地址：https://github.com/balena-io/etcher

          branch：master

tag：v1.5.121

                     commit id：8b3f37102d2c86b111ee1d21449be8de15280644

 

内部开源代码地址：https://codehub-y.huawei.com/mindx_edge/PreResearchProject/DK/home

（altas_flasher，此代码地址只提交了新增的功能业务代码）

 

官方文档：https://github.com/balena-io/etcher/blob/master/docs/CONTRIBUTING.md

执行机：Windows 10 安全PC  黄区网络

 

1、环境

根据官方文档安装相应的依赖

 

 

1.1    参考

华为开源镜像仓：

https://mirrors.tools.huawei.com/home

 

 

Node.js 11.15.0：

https://nodejs.org/zh-cn/download/releases/

 

npm 6.7.0:

 

 

C:\Users\{UserName}\.npmrc文件配置：

 

 

npm config set sass_binary_site http://mirrors.tools.huawei.com/node-sass

npm config set phantomjs_cdnurl http://mirrors.tools.huawei.com/phantomjs

npm config set chromedriver_cdnurl http://mirrors.tools.huawei.com/chromedriver

npm config set operadriver_cdnurl http://mirrors.tools.huawei.com/operadriver

npm config set disturl http://mirrors.tools.huawei.com/nodejs

npm config set electron_mirror http://mirrors.tools.huawei.com/electron/

npm config set python_mirror http://mirrors.tools.huawei.com/python

npm config set msvs_version 2019

npm config set strict-ssl false

npm config set python C:\\Python27\\python.exe

 

 

Python 2.7.15：

安装并添加环境变量

pip install -r requirments.txt下载python依赖

 

jq 1.6:

https://stedolan.github.io/jq/

下载Windows (64-bit)，并改名为jq.exe，将路径添加到环境变量。cmd执行jq -V显示版本则安装成功。

 

curl：

Win10自带工具，无需安装，使用curl -V查看信息

 

 

NSIS v2.51：

将路径添加到环境变量

 

MinGW：

安装MingGW，设置环境变量C:\MinGW\bin，将mingw32-make.exe改名为make.exe

使用MinGW Installation Manager安装以下package

msys-make

msys-unzip

msys-zip

msys-bash

msys-coreutils

 

Microsoft Visual Studio:

官网下载Microsoft Visual Studio Community 2019并添加环境变量

https://my.visualstudio.com/Downloads

 

安装Visual C++ Common Tools等工具。.npmrc文件中的msvs_version值设置为对应版本，若2019版本有问题可以尝试安装2017版本和2015版本或者通过npm直接安装windows-build-tools组件。

 

npm install --global --production windows-build-tools --vs2017

 

 

相关环境变量配置：

 

 

 

PATH：

 

 

 

2、编译

下载代码

git clone --recursive https://github.com/balena-io/etcher

cd etcher

 

安装依赖，无error则安装成功

npm install

 

编译

make electron-develop

 

编译成功如上图所示，若有任意error报错，则编译失败，需要定位处理，通常都是环境问题导致。

 

执行 npm start 或者 ./node_modules/.bin/ . 启动程序(可参考package.json)

 

 

 

 

3、相关问题处理

3.1 gyp ERR! This is a bug in ‘node-gyp’

 

解决：

node-gyp没有下载成功，一般是Visual Studio相关工具组件缺失，可以尝试切换VS版本或者参考

https://stackoverflow.com/questions/50286109/getting-node-gyp-working-on-windows-10

 

 

3.2 Module not found: Error: Can't resolve XXXXX

 

解决：

临时处理方案

npm uninstall <module_name>                          卸载

删除项目下node_modules/<module_name>  文件夹

npm install <module_name@version>             下载特定版本

 

 

3.3 npm ERR! Cannot read property 'match' of undefined

 

解决：

删除npm-shrinkwrap.json、shrinkwrap.new.tmp、shrinkwrap.old.tmp或者package-lock.json

 

 

3.4 白屏

ctrl + shift + i打开Developer Tools

报错XXX was compiled against a different Node.js version using XXX

 

解决：

node相关依赖安装不正确，删除generated和node_modules文件夹，执行npm cache clean -f

再执行npm install 重新安装依赖编译。

 

 

3.5 黑屏

npm start启动程序时，是黑屏状态，可能是缺失前端文件导致。检查使用make electron-develop命令编译时，webpack是否编译成功，不存在error，如下图所示：

 

解决：

编译出的generated文件夹缺少index.css和index.js文件，检查编译过程中的错误或者临时解决办法是使用发布包的文件放入此目录

  

 

3.6 显示图片

源码使用的都是svg矢量图片，若需要使用png格式的图片需要先在代码中声明相关模块再在使用处引用。

 

 

在typings目录下新增png文件夹，声明相关模块。

 

 

 

webpack.config.ts -> module -> rules 中，图片项添加png

 

 

3.7 编译无法下载npm依赖

scripts -> resin -> shared -> npm-install.sh

export npm_config_registry= http://registry.npmjs.org

 

将值修改为华为源：

http://mirrors.tools.huawei.com/npm/

 

构建

1、 Windows构建打包exe

执行make electron-build

 

 

无error则构建成功，可执行文件exe在新生成的dist文件夹下面

 

 

2、 相关问题处理

An attempt was made to access a socket in away forbidden by its access permissions.

网络问题导致部分依赖包下载失败

 

2.1下载electron相关依赖包失败

 

解决：

1、手动下载electron-v12.0.2-win32-x64.zip及sha256文件，将sha256文件改名，如图所示

https://github.com/electron/electron/releases/download/v12.0.2/electron-v12.0.2-win32-x64.zip

 

https://github.com/electron/electron/releases/download/v12.0.2/SHASUMS256.txt

 

 

2、将文件放在C:\Users\{UserName}\AppData\Local\electron\Cache 目录下

 

 

 

3、使用相同的方式下载electron-v12.0.2-win32-ia32.zip并放在对应路径下：

https://github.com/electron/electron/releases/download/v12.0.2/electron-v12.0.2-win32-ia32.zip

 

 

2.2 下载其他依赖包失败

winCodeSign-2.6.0.7z

nsis-3.0.4.1.7z

nsis-resources-3.4.1.7z

 

 

解决：

1、手动下载包winCodeSign-2.6.0.7z

https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

 

2、将文件放在C:\Users\{UserName}\AppData\Local\electron-builder\Cache\winCodeSign下，并使用7z解压文件

 

 

3、使用相同的方式下载：

nsis-3.0.4.1.7z

https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z

 

 

nsis-resources-3.4.1.7z

https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

 

重复2步骤