[Electron] 如何手動安裝 Electron

衆所周知, 受 GFW 的影響, 我們有時候並不能很好的訪問海外的一些網站, 比如 Github. 碰巧, 博主今日在學習如何使用 Electron 開發桌面端應用, 遇到的第一個難題就是如何成功安裝 Electron.

官方安裝教程

我們先來看一下官方教程:

現在，您需要安裝electron。 我們推薦的安裝方法是把它作爲您 app 中的開發依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下面的命令：

npm install --save-dev electron
除此之外，也有其他安裝 Electron 的途徑。 請諮詢 安裝指南 來了解如何用代理、鏡像和自定義緩存。

簡簡單單一個 npm install --save-dev electron 就 OK 了.

GFW 爸爸很照顧你, 幫你屏蔽了海外的垃圾內容, 避免了你幼小的心靈受到傷害.

官方安裝指南

幸好我們還有 安裝指南:
自定義鏡像和緩存 中介紹到了可以指定 npm 鏡像以加速 Electron 的安裝:

ELECTRON_MIRROR=“https://cdn.npm.taobao.org/dist/electron/”

趕緊試一試:

Emmm, 阿里爸爸似乎沒有把這個 zip 文件同步到鏡像倉庫裏..

手動安裝

只能手動安裝了. 🙂

仔細觀察前面安裝時控制檯裏輸出的日誌, 可以發現 Electron 在嘗試運行 C:\Users\Admin\AppData\Roming\npm\node_modules\electron\install.js 文件, 那我們就把這個文件打開, 看看能不能得到什麼有用的信息:

#!/usr/bin/env node

const version = require('./package').version // 獲取當前 Electron 版本

const fs = require('fs')
const os = require('os')
const path = require('path')
const extract = require('extract-zip')
const { downloadArtifact } = require('@electron/get')

if (process.env.ELECTRON_SKIP_BINARY_DOWNLOAD) {
  process.exit(0)
}

const platformPath = getPlatformPath() // 獲取當前平臺的可執行文件路徑

if (isInstalled()) { // 避免重複安裝
  process.exit(0)
}

// downloads if not cached
downloadArtifact({
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  platform: process.env.npm_config_platform || process.platform,
  arch: process.env.npm_config_arch || process.arch
})
.then(extractFile) // 下載完成後進行解壓
.catch(err => {
  console.error(err.stack)
  process.exit(1)
})

function isInstalled () {
  try {
  	// 判斷 ${HOME}\AppData\Roming\npm\node_modules\electron\version 文件中的內容與去掉 v 前綴後與當前 Electron 版本是否一致
    if (fs.readFileSync(path.join(__dirname, 'dist', 'version'), 'utf-8').replace(/^v/, '') !== version) {
      return false
    }

	// 判斷 ${HOME}\AppData\Roming\npm\node_modules\electron\path.txt 文件中的內容與可執行文件是否一致
    if (fs.readFileSync(path.join(__dirname, 'path.txt'), 'utf-8') !== platformPath) {
      return false
    }
  } catch (ignored) {
    return false
  }
  
  // 是否有環境變量覆蓋
  const electronPath = process.env.ELECTRON_OVERRIDE_DIST_PATH || path.join(__dirname, 'dist', platformPath)
  
  return fs.existsSync(electronPath)
}

// unzips and makes path.txt point at the correct executable
function extractFile (zipPath) {
  return new Promise((resolve, reject) => {
  	// 將指定文件解壓到 .\dist 文件夾內.
    extract(zipPath, { dir: path.join(__dirname, 'dist') }, err => {
      if (err) return reject(err)

      fs.writeFile(path.join(__dirname, 'path.txt'), platformPath, err => {
        if (err) return reject(err)

        resolve()
      })
    })
  })
}

function getPlatformPath () {
  const platform = process.env.npm_config_platform || os.platform()

  switch (platform) {
    case 'mas':
    case 'darwin':
      return 'Electron.app/Contents/MacOS/Electron'
    case 'freebsd':
    case 'openbsd':
    case 'linux':
      return 'electron'
    case 'win32':
      return 'electron.exe'
    default:
      throw new Error('Electron builds are not available on platform: ' + platform)
  }
}

通過分析這個 install.js 文件, 我們得知:

• 需要將特定的文件解壓到 ${HOME}\AppData\Roming\npm\node_modules\electron\dist 目錄中.
• ${HOME}\AppData\Roming\npm\node_modules\electron\version 文件中的內容爲 v${VERSION}.
• ${HOME}\AppData\Roming\npm\node_modules\electron\path.txt 文件中的內容執行 electron 可執行文件.

通過上面的幾次嘗試, 我們可以推斷出這個待解壓的文件很有可能是 Electron 在 GitHub Release 的附件中包含的文件 electron-v9.0.2-win32-x64.zip.

既然我們沒法直接下載 GitHub Release 中的附件, 那我們就需要想想其他的辦法. 比如具有中國特色社會主義的下載工具迅雷.

迅雷對於熱點文件是有緩存的, 我們可以通過 GitHub Release 附件的下載地址嘗試下載迅雷服務器上的緩存文件:

嗯~~, 果然是有緩存的.

那麼按照我們剛纔分析出的結論, 一步步執行, 再在新的控制檯中調用 electron 可執行文件進行測試:

🎉🎉🎉

終於, Electron 安裝成功了, f感u謝k GFW.

勘誤

Review 文章時發現官方安裝指南中在設置 ELECTRON_MIRROR 時路徑是以 ‘/’ 結尾的, 博主在複製粘貼時漏掉了結尾的斜槓, 導致無法從阿里雲的鏡像上下載正確的文件, 設置正確的環境變量後成功下載到了鏡像中的壓縮包:

感謝阿里巴巴爲國內開發環境的基建貢獻.