进行electron开发要经常参考github上的优秀代码,亦或者需要使用npm、cnpm、yarn这些包管理工具来管理项目,在开发过程中会有很多坑需要填,这篇博客就综合记录下这些知识点

1、github速度慢的解决方法

首先,在www.ipaddress.com中查看github.com以及github.global.ssl.fastly.net映射地址。
然后,在hosts中进行对应的配置,这里根据当前的映射地址进行配置,需要注意的是这个映射地址经常都在变,当发现速度变慢后,建议再次更新地址。
最后,执行ipconfig/flushdns刷新dns,如果不行的话,就重启。

140.82.114.4 github.com
199.232.69.194   github.global.ssl.fastly.net

配置后,使用ping github.com后应该能明显看到速度变快

2、npm、cnpm以及yarn包管理工具的配置

这里就不介绍怎么安装了,需要说明的是由于国内网络问题,npm下载速度很慢可以通过配置淘宝镜像来管理包工具,cnpm以及yarn都是可以配置成淘宝镜像的,以下以cnpm为例来说明,yarn也是一样的配置。

cnpm config set registry https://registry.npm.taobao.org
cnpm config set disturl https://npm.taobao.org/dist

3、electron 开发遇到的坑

在electron桌面开发中遇到很多坑,这里一一总结下

坑1: electron桌面无法使用react-devtools
在具体package.json中使用electron-devtools-installer来管理devtools,但是当配置electron为9.xx版本后,无法正常的显示react-devtools,这个对于使用reactjs来进行桌面应用开发是相当痛苦的,经过各种尝试,发现以下配置是能够正常加载出react-devtools的

"electron-devtools-installer": "^2.2.4",
"electron": "^8.0.1",
"react-dom": "^16.3.1",
"react": "^16.3.1",

坑2:ajax网络访问提示NET::ERR_CERT_AUTHORITY_INVALID
这种情况实际上表示当前访问的网络是不安全,没有对应的证书,客户端解决的办法可以参考electron私有部署webview加载不安全的https网址,我通过添加如下代码解决问题

app.commandLine.appendSwitch('--ignore-certificate-errors', 'true')

坑3:yarn install时候 一直提示electron waiting
这个可以参考安装Electron的时候,卡住问题 ,我是用的yarn来管理package,所以实在.yarnrc文件中进行对应的配置

electron_mirror="https://npm.taobao.org/mirrors/electron/"(填上这句话即可)

坑4:ffi-napi在typescript中使用提示No native build was found
这个坑太大了,我是基于github上的tagspaces项目来修改的,由于项目需要调用c/c++的dll所以考虑采用ffi-napi来调用dll(ffi已经out了),但是在编译过程中一直都报以下错误

renderer.dev.js:113102 Uncaught Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=76 uv=1 libc=glibc
    at Function.module.exports../node_modules/node-gyp-build/index.js.load.path (renderer.dev.js:113102)
    at load (renderer.dev.js:113067)
    at Object../node_modules/ref-napi/lib/ref.js (renderer.dev.js:184979)
    at __webpack_require__ (renderer.dev.js:771)
    at fn (renderer.dev.js:131)
    at Object../node_modules/ffi-napi/lib/ffi.js (renderer.dev.js:89883)
    at __webpack_require__ (renderer.dev.js:771)
    at fn (renderer.dev.js:131)
    at Module.<anonymous> (renderer.dev.js:26630)
    at Module../app/services/webdav-io.ts (renderer.dev.js:27293)

一开始以为是node版本问题,后面发现electron项目中国electron版本不一样对应的node版本会自动调整,所以不是本地node版本问题。花了几天时间来解决这个问题,最后在一边文章中看到希望,No native build was found in electron #725 ,这篇文章最后有提到
electron-leveldown-pouchdb-webpack,这里提到通过webpack.config.js中添加下插件

const webpack = require("webpack");
{
   ...
   plugins: [new webpack.ExternalsPlugin("commonjs", ["leveldown"])]
}

由于报错的的是ffi-napi模块,所以进行对应的修改

const webpack = require("webpack");
{
   ...
   plugins: [new webpack.ExternalsPlugin("commonjs", ["ffi-napi"])]
}

再次编译问题解决

坑5、ChunkLoadError: Loading chunk 11 failed问题
在生产环境中报如下错误

react-dom.production.min.js:209 ChunkLoadError: Loading chunk 11 failed.
(error: file:///D:/code/safebox/app/dist/11.renderer.prod.js)
    at Function.o.e (file:///D:/my/safebox/resources/app/dist/renderer.prod.js:1:723)

这个在webpack的生产环境配置中output.publicPath位置没找对引起的,我这边是需要根据安装路径来动态决定,所以在entry对应的启动页中添加如下代码

__webpack_public_path__ = path

这里的path对应你的动态路径,问题完美解决

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐