简单优雅处理electron安装报错

一、背景

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

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

本文使用的案例github（官方案例）：github.com/electron/el…

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

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

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

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

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

二、探索&解决

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

后来自己粗略研究了下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/"
    }
  }
复制代码

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

启动后的界面：

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"
  }
复制代码