likes
comments
collection

简单优雅处理electron安装报错

作者站长头像
站长
· 阅读数 55

一、背景

最近心血来潮,看了下electron的文档,想搭建个demo试试水。

electron官方文档:www.electronjs.org/

本文使用的案例github(官方案例):github.com/electron/el…

于是安装官方的快速启动案例,拉下github的代码,npm inpm start一通操作后,发现怎么都跑不起来,报错信息如下:

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

简单优雅处理electron安装报错

按着上面的提示,删掉 node_modules/electron 重新 npm i 依然一样。

刚开始以为是node版本和npm源问题,也都尝试过了,毫无意外都失败了。

至于什么原因导致electron安装失败,相信大家都知道(由于某些原因,境外文件下载不下来)

二、探索&解决

先百度搜了一圈,发现解决方案都大同小异,虽然可以解决问题,但需要修改node_modules里的代码,显然不够优雅,并且这种方式没法保证团队里也能正常协作。

后来自己粗略研究了下electron安装流程的代码,发现了下面几行代码,眼前一亮:

简单优雅处理electron安装报错

对package.json和nodejs熟悉点的人可能会一眼发现亮点在哪了,第一个红色框框里读取了process.env里的变量(最重要的是支持package.json的字段和npm变量),而这个变量可以从nodejs启动里设置,也可以在package.json里设置。

于是灵机一动,在package.json里添加了下面的配置:

  "scripts": {
    "start": "electron .",
    "postinstall": "node node_modules/electron/install.js"
  },
  "config": {
    "electron": {
      "mirror": "https://registry.npmmirror.com/-/binary/electron/"
    }
  }

再试了一下,终于能正常跑起来了。

简单优雅处理electron安装报错

启动后的界面:

简单优雅处理electron安装报错

package.json完整配置:

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "postinstall": "node node_modules/electron/install.js"
  },
  "config": {
    "electron": {
      "mirror": "https://registry.npmmirror.com/-/binary/electron/"
    }
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^18.0.2"
  }
}

三、结尾

每个人的处理方式可能会不一样,方法是有千万种的,上面只是提供了其中一种思路,其实核心的就2点:

1、把对应的环境变量设置对;

2、触发node_modules/electron/install.js执行安装流程;

其他处理方式:

1、postinstall + 设置.npmrc

electron_mirror=https://registry.npmmirror.com/-/binary/electron/

package.json

  "scripts": {
    "start": "electron .",
    "postinstall": "node node_modules/electron/install.js"
  }

2、直接在 postinstall 里设置环境变量

npm i cross-env

package.json

  "scripts": {
    "start": "electron .",
    "postinstall": "cross-env ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/ node node_modules/electron/install.js"
  }