Simple and elegant handling of electron installation errors

1. Background

Recently, on a whim, I read the documentation of electron and wanted to build a demo to test the water.

electron official documentation: www.electronjs.org/

The case github used in this article (official case): github.com/electron/el…

So I installed the official quick start case, pulled down the github code, npm iand npm startafter one operation, I found that it couldn't run, and the error message was as follows:

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

According to the above tips, delete  node_modules/electronand re- npm istill the same.

At first I thought it was a problem with the node version and npm source, and I tried all of them, and they all failed without any accident.

As for the reasons for the failure of the electron installation, I believe everyone knows (due to some reasons, the overseas files cannot be downloaded)

2. Explore & Solve

First Baidu searched around, and found that the solutions are similar, although the problem can be solved, but node_modulesthe code needs to be modified, which is obviously not elegant, and this method cannot guarantee the normal cooperation in the team.

Later, I roughly studied the code of the electron installation process, and found the following lines of code, which brightened my eyes:

Those who are familiar with package.json and nodejs may find the bright spot at a glance. The first red box reads the process.envvariables in it (the most important thing is to support the fields of package.json and npm variables), and this variable It can be set from nodejs startup or in package.json.

So I had an idea and added the following configuration to package.json:

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

Tried it again, and finally it can run normally.

The interface after startup:

package.jsonFull configuration:

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

3. The end

Everyone's processing method may be different. There are thousands of methods. The above is just one of the ideas. In fact, the core is 2 points:

1. Set the corresponding environment variables;

2. Trigger node_modules/electron/install.js to execute the installation process;

Other processing methods:

1. postinstall + settings.npmrc

electron_mirror=https://registry.npmmirror.com/-/binary/electron/
复制代码

package.json

  "scripts": {
    "start": "electron .",
    "postinstall": "node node_modules/electron/install.js"
  }
复制代码

2. Set environment variables directly in 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"
  }
复制代码