記打造你的第一個electron的坑

按照electron官方文檔，開始了打造你的第一個 Electron 應用

index.js,index.html，package.json一切都準備就緒，而後敲下了命令

npm run start

而後報錯了。。報錯信息以下

> your-app@1.0.0 start F:\work\front-end\electron\demo
> electron .

F:\work\front-end\electron\demo\node_modules\electron\index.js:14
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
    ^

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
    at getElectronPath (F:\work\front-end\electron\demo\node_modules\electron\index.js:14:11)
    at Object.<anonymous> (F:\work\front-end\electron\demo\node_modules\electron\index.js:18:18)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (F:\work\front-end\electron\demo\node_modules\electron\cli.js:3:16)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! your-app@1.0.0 start: `electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the your-app@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2019-12-27T09_00_14_091Z-debug.log

納尼，第一個應用就一馬當先了？！！那怎麼繼續下去？
因而我打開了報錯的代碼，以下

var fs = require('fs')
var path = require('path')

var pathFile = path.join(__dirname, 'path.txt')

function getElectronPath () {
  if (fs.existsSync(pathFile)) {
    var executablePath = fs.readFileSync(pathFile, 'utf-8')
    if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
      return path.join(process.env.ELECTRON_OVERRIDE_DIST_PATH, executablePath)
    }
    return path.join(__dirname, 'dist', executablePath)
  } else {
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
  }
}

module.exports = getElectronPath()

能夠看出是由於沒有找到path.txt文件，我看了下目錄，果真沒有這個文件，那這個文件是原本就有的麼，我去github查了一下，github上也沒有啊，在源碼搜了一下，發如今install.js中有建立這個文件，那這個install.js是何時運行的呢，咱們來看下package.json，發現script中有個postinstall命令，這個命令是指裝完包運行，因此是裝完包運行這個命令報錯了？
咱們進這個目錄運行下命令node install，發現報錯以下

PS F:\work\front-end\electron\electron-quick-start\node_modules\electron> node install
(node:10024) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, lstat 'C:\Users\LIUXIU~1\AppData\Local\Temp\electron-download-CEvWd4\electron-v7.1.7-win32-x64.zip'
(node:10024) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting
a promise which was not handled with .catch(). (rejection id: 1)
(node:10024) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

嗯？怎麼沒有權限？趕忙用管理員權限打開命令行，運行上面的命令，仍是同樣的報錯。。
繼續輸入命令npm config ls -l,輸出如下內容

tmp = "C:\\Users\\admin\\AppData\\Local\\Temp"

tmp爲npm安裝模塊時的臨時目錄，若該目錄有權限問題，則npm在安裝其餘模塊時，也會報出operation not permitted錯誤，npm可正常安裝其餘模塊，故可排除目錄權限的問題
讓咱們仔細看下代碼

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((zipPath) => extractFile(zipPath)).catch((err) => onerror(err))

能夠看到以下下載異常會拋出錯誤，繼續看downloadArtifact這個方法，能夠看到有個輸出url的地方

function downloadArtifact(_artifactDetails) {
    return __awaiter(this, void 0, void 0, function () {
        var artifactDetails, fileName, url, cache, cachedPath;
        var _this = this;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    artifactDetails = _artifactDetails.isGeneric
                        ? __assign({}, _artifactDetails) : __assign({ platform: process.platform, arch: utils_1.getHostArch() }, _artifactDetails);
                    utils_1.ensureIsTruthyString(artifactDetails, 'version');
                    artifactDetails.version = utils_1.normalizeVersion(artifactDetails.version);
                    fileName = artifact_utils_1.getArtifactFileName(artifactDetails);
                    url = artifact_utils_1.getArtifactRemoteURL(artifactDetails);
                    cache = new Cache_1.Cache(artifactDetails.cacheRoot);
                    if (!!artifactDetails.force) return [3 /*break*/, 2];
                    d("Checking the cache for " + fileName + " (" + url + ")");
                    return [4 /*yield*/, cache.getPathForFileInCache(url, fileName)];

把這裏的url輸出看看,url值以下

https://github.com/electron/electron/releases/download/v7.1.7/electron-v7.1.7-win32-x64.zip

把這個url放到瀏覽器回車，果真訪問不了，能夠設置環境變量改變這個url，能夠看@electron/get/dist/cjs/artifact-utils.js文件中的url的值會取環境變量的值

function mirrorVar(name, options, defaultValue) {
    // Convert camelCase to camel_case for env var reading
    var lowerName = name.replace(/([a-z])([A-Z])/g, function (_, a, b) { return a + "_" + b; }).toLowerCase();
    return (process.env["NPM_CONFIG_ELECTRON_" + lowerName.toUpperCase()] ||
        process.env["npm_config_electron_" + lowerName] ||
        process.env["npm_package_config_electron_" + lowerName] ||
        process.env["ELECTRON_" + lowerName.toUpperCase()] ||
        options[name] ||
        defaultValue);
}
function getArtifactRemoteURL(details) {
    var opts = details.mirrorOptions || {};
    var base = mirrorVar('mirror', opts, BASE_URL);
    if (details.version.includes('nightly')) {
        base = mirrorVar('nightly_mirror', opts, NIGHTLY_BASE_URL);
    }
    var path = mirrorVar('customDir', opts, details.version);
    var file = mirrorVar('customFilename', opts, getArtifactFileName(details));
    return "" + base + path + "/" + file;
}

在package.json的script中加上

"install": "set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ && node ./node_modules/electron/install.js",

運行npm run install，仍是報錯，如今url輸出的是
https://npm.taobao.org/mirrors/electron/v7.1.7/electron-v7.1.7-win32-x64.zip
在瀏覽器打開，果真是404，這個url往前面幾級翻一下，發現https://npm.taobao.org/mirrors/electron是能夠訪問的，可是版本號沒有v,把url改成https://npm.taobao.org/mirrors/electron/7.1.7/electron-v7.1.7-win32-x64.zip就能夠下載zip包了，要解決這個問題須要改下代碼，在@electron/get/dist/cjs/artifact-utils.js文件的getArtifactRemoteURL方法中path後面添加一句

path = path.replace("v","");

從新運行npm run install，成功安裝~
運行npm run start，成功啓動electron應用~