Моят проект беше специално с Vue, но този подход за отстраняване на грешки ще работи и с други рамки.

За училищен проект Turing School аз и партньор създаваме основно приложение за бележки. Нищо сложно, но също така не е твърде изтъркано за изучаване на Vue, sqlite, knexJs и ElectronJS.

Предлага се като приложение на компютъра със собствена проста икона, създаваща локална sqlite3 db в пакета за всеки потребител. За да се стигне от Electron/VueJs до тази точка, беше необходим пакет за електрони, но пакетаторът връщаше производствен пакет, който би или:

  1. отворете и покажете празен екран или
  2. грешки при отваряне на подкана (без моето лого не по-малко), позоваващи се на модули, които не са намерени, или грешки в препратки към пътя на файла.

Първата стъпка към решаването на този проблем беше да попитаме Стив Кини, който управлява нашата предна програма в Turing. Той ми помогна да отстраня грешки и ми предостави тези указания по пътя.

Трябва да можете да видите какви грешки се връщат, така че първо включете инструментите за разработчици за производствената компилация. След като установите точно проблема, преопаковайте без него. Във вашия първичен електронен файл, ако все още не сте го направили (повечето хора имат това само в разработка с оператор if), добавете реда с удебелен шрифт вашия loadURL някъде, за да отворите тези инструменти за разработка.

function createWindow () {
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    minWidth: 600,
    minHeight: 500,
    titleBarStyle: 'hidden-inset',
    title: 'Notes',
    show: true,
  });
mainWindow.loadURL(config.url);
  mainWindow.openDevTools();

Сега стартирайте отново вашия електронен пакет. Отворете отново новосъздадения пакет и започнете да четете грешки. Започвам да виждам грешки при неоткрити файлове, грешки при неоткрити модули и грешки при неоткрита база данни, които препращат към неправилни пътища. Не можах да разбера как да накарам тези пътища да работят, независимо къде е този пакет, защото доколкото приложението знаеше, той беше в основата (на компютъра, а не на директорията).

process.cwd() //  this returns this file path '/'
__dirname     //  this returns this file path '/'

Това не е добро. Как да намеря модули и файлове, ако това нещо дори не знае къде се намира?

Освен това, ние все още искаме да използваме тези инструменти за разработка, тъй като използването на това с path е удобен начин за безболезнено препращане към файлове. За да приложим тази логика, ние добавихме прост троичен код, присвоен на променлива, за да идентифицираме пътя на директорията.

//create a function which returns true or false to recognize a development environment
const isDev = () => process.env.NODE_ENV === 'development';
//use that function to either use the development path OR the production prefix to your file location
const directory = isDev() ? process.cwd().concat('/app') : process.env.APP_PATH;
//This requires an environment variable, which we will get to in a moment.
//require files joining that directory variable with the location within your package of files
const mainProcess = remote.require(path.join(directory, '/electron.js'));
const database = remote.require(path.join(directory, '/database.js'));

Това реши нашия проблем с разработката/производството, но първоначалният проблем беше, че __dirname върна корена на компютъра, който не работи за производствен пакет.

За щастие, мисля, че някой от electron знаеше, че това може да е проблем, и ни предложи страхотен метод, който можем да извикаме в нашето приложение electron.

process.env['APP_PATH'] = app.getAppPath();

Можем да използваме изхода, който е местоположението на работещото приложение, и да зададем променлива на средата на процеса. Използването на променливи на обкръжението на процеса ни помага да избегнем проблемите с рефериращите файлове. Поставих горния фрагмент в долната част на моя първичен електронен файл.

Ако все още получавате грешки, започнете да проверявате пътищата на файловете. Това е болка, но всъщност понякога е най-добрият начин да търсите файловете сами. Ако не можете да намерите файла, компютър със сигурност няма да може.

Все още имах още един проблем за решаване, но това е мястото, където моето елегантно решение свършва и започва тромавото нека просто да накараме това шибано да работи решение.

Използвах също CLI, който имаше пакет, обвиващ пакет, така че имах 2 отделни папки с модули на възли. Моделът, който работи за мен, беше стартиране на електронен пакет с — asar=false. Отваряне на производственото приложение чрез щракване с десен бутон, намиране на папката на приложението, заровена в ресурсите (пътят от вашите грешки ще ви помогне) и копиране на папката с външни възлови модули във вътрешното приложение. Това беше единствената папка с модули на възли в този пакет.

Също така взе моя вече раздут пакет от 100mb до абсурдните 500mb, но това е проблем за друг ден.

Връзка към проекта github: https://github.com/kerrd89/electron-project