Как создать установщик Windows для приложения, созданного с помощью Electron Framework

Как разработчик, вы, возможно, знаете, что в Linux есть менеджеры пакетов, поэтому разработчикам «не нужно» делать установщики. Разработчикам просто нужно предоставить пакет для дистрибутива, тогда у каждого дистрибутива есть способ установить этот пакет, и этот путь может быть в терминале (apt-get) или через графический интерфейс, например Ubuntu Software Center. Тем не менее, Windows не Linux.

1. Подготовьте свою рабочую зону

И с этим, мы не имеем в виду, что вы должны чистить свой компьютер. Чтобы сделать этот урок легким для понимания, мы собираемся создать папку на рабочем столе с именем electron-workspaceэта папка будет находиться внутри папки, содержащей исходный код вашего Electron Project:

Исходный код проекта электрон

В этом случае папка будет расположена по адресу C:\Users\sdkca\Desktop\electron-workspace и исходный код электронного проекта будет внутри него (myapp-source).

2. Установите электронный модуль Winstaller

Теперь нам нужно установить модуль, который поможет нам создать установщик, в этом случае мы будем использовать электронно-winstaller. Этот модуль NPM создает установщики Windows для приложений Electron, использующих Squirrel. Запустите командную строку NodeJS и перейдите в рабочую область, используя (обратите внимание, что модуль должен быть установлен в рабочей области, а не в вашем проекте):

cd C:\Users\sdkca\Desktop\electron-workspace

А затем установите модуль с помощью:

npm install electron-winstaller

После установки модуля наше рабочее пространство будет иметь 2 папки:

Электронная папка с исходным кодом и модули узлов

3. Управление ярлыками на рабочем столе (установка, обновление и удаление событий)

Приложение, которое можно установить, но не удается найти исполняемый файл, чтобы запустить его после его закрытия, не работает даром. Поэтому мы собираемся использовать модуль запуска электронов, который поможет вам достичь нашей цели. Он обрабатывает наиболее распространенные команды, такие как управление ярлыками на рабочем столе (событие установки, событие обновления и событие удаления).

Этот модуль должен быть установлен внутри вашего проекта, а не в рабочей области, поэтому перейдите в папку исходного кода вашего проекта Electron с помощью командной строки NodeJS, в этом случае мы будем использовать:

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

А затем установите модуль, используя:

npm install electron-squirrel-startup

После установки модуля нам нужно указать в некотором коде, что мы собираемся делать. Мы собираемся добавить некоторый код, особенно в main.js файл вашего электронного проекта. В начале вашего файла (после объявления переменной app) добавьте следующие строки:

// Module to control application life. (this variable should already exist)
const app = electron.app
// this should be placed at top of main.js to handle setup events quickly
if (handleSquirrelEvent(app)) {
// squirrel event handled and app will exit in 1000ms, so don't do anything else
return;
}

handleSquirrelEvent Функция ожидает в качестве первого аргумента переменную приложения, эта функция может быть добавлена ​​в конце вашего main.js файл:

Заметка

Следующий код будет выполняться только в том случае, если приложение находится в установщике, поэтому этот код не будет выполняться во время работы над проектом.

function handleSquirrelEvent(application) {
if (process.argv.length === 1) {
return false;
}
const ChildProcess = require('child_process');
const path = require('path');
const appFolder = path.resolve(process.execPath, '..');
const rootAtomFolder = path.resolve(appFolder, '..');
const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
const exeName = path.basename(process.execPath);
const spawn = function(command, args) {
let spawnedProcess, error;
try {
spawnedProcess = ChildProcess.spawn(command, args, {
detached: true
});
} catch (error) {}
return spawnedProcess;
};
const spawnUpdate = function(args) {
return spawn(updateDotExe, args);
};
const squirrelEvent = process.argv[1];
switch (squirrelEvent) {
case '--squirrel-install':
case '--squirrel-updated':
// Optionally do things such as:
// - Add your .exe to the PATH
// - Write to the registry for things like file associations and
//   explorer context menus
// Install desktop and start menu shortcuts
spawnUpdate(['--createShortcut', exeName]);
setTimeout(application.quit, 1000);
return true;
case '--squirrel-uninstall':
// Undo anything you did in the --squirrel-install and
// --squirrel-updated handlers
// Remove desktop and start menu shortcuts
spawnUpdate(['--removeShortcut', exeName]);
setTimeout(application.quit, 1000);
return true;
case '--squirrel-obsolete':
// This is called on the outgoing version of your app before
// we update to the new version - it's the opposite of
// --squirrel-updated
application.quit();
return true;
}
};

Предыдущий код должен обрабатывать основные вещи, которые происходят, когда в вашей системе установлено новое приложение, например, ярлык будет добавлен в меню «Пуск» и на рабочем столе, и он удалит ярлык при запуске деинсталлятора, кроме того, он должен работать без каких-либо изменений. , Не стесняйтесь добавлять больше кода, если вам нужно.

4. Создайте свое приложение

Необходимые изменения для выполнения основных задач установленных приложений были внесены, теперь приступайте к сборке приложения. Мы предполагаем, что вы знаете, как создать свое приложение, используя такие инструменты, как электронно-упаковщик.

После того, как вы знаете, как создать свое приложение, приступайте к этому. Перейдите к рабочему пространству (чтобы построить внутри него проект):

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

И построить проект, например, мы собираемся построить наш проект, используя следующую команду:

electron-packager C:\Users\sdkca\Desktop\electron-workspace\myapp-source --platform=win32 --arch=x64 myapp-source-built

Это создаст myapp-source-built-win32-x64 папка внутри electron-workspace папка, которая имеет следующую структуру:

Электронная структура проекта

5. Создайте установщик из вашего приложения

Как только ваш проект будет построен, вы можете создать установщик из него. Создайте папку, в которой будут созданы установщики, конкретно в нашем рабочем пространстве (C:\Users\sdkca\Desktop\electron-workspace) с именем, которое вы хотите, в этом случае это будет myapp-source-built-installers, Вы не будете прикасаться к этой папке, так как установщики будут созданы на следующем шаге автоматически. На этом этапе у вас должно быть 4 папки (myapp-source-built-installers пустой):

Электронные папки рабочей области

Теперь создайте скрипт, который создаст наши установщики, создайте build.js файл в нашей электронной рабочей области (C:\Users\sdkca\Desktop\electron-workspace) со следующим кодом внутри:

Заметка

Если вам неудобно работать с относительными путями, вы можете использовать абсолютные пути при первой попытке узнать, что происходит.

// C:\Users\sdkca\Desktop\electron-workspace\build.js
var electronInstaller = require('electron-winstaller');
// In this case, we can use relative paths
var settings = {
// Specify the folder where the built app is located
appDirectory: './myapp-source-built-win32-x64',
// Specify the existing folder where
outputDirectory: './myapp-source-built-installers',
// The name of the Author of the app (the name of your company)
authors: 'Our Code World Inc.',
// The name of the executable of your built
exe: './myapp-source-built.exe'
};
resultPromise = electronInstaller.createWindowsInstaller(settings);
resultPromise.then(() => {
console.log("The installers of your application were succesfully created !");
}, (e) => {
console.log(`Well, sometimes you are not so lucky: ${e.message}`)
});

Заметка

Вы можете изменить значок и другие свойства в настройках предыдущего скрипта. Проверьте все поддерживаемые опции здесь.

Чтобы создать установщик из вашего приложения, вам просто нужно выполнить этот скрипт. Однако, в случае, если вы найдете эту ошибку:

Значение атрибута Component / @ Id, your-app-exe-name.exe, не является допустимым идентификатором. Идентификаторы могут содержать символы ASCII A-Z, a-z, цифры, подчеркивания (_) или точки (.). Каждый идентификатор должен начинаться либо с буквы, либо с подчеркивания.

Необходимо отредактировать имя свойства вашего проекта в /your-built-project/resources/app/package.json файл и удалить или заменить все дефис (- символ) например, если ваш package.json похоже:

{
"name": "electron-quick-start"
}

Измените это на:

{
"name": "electron_quick_start"
}

Если вы уже подтвердили это, перейдите к выполнению build.js Сценарий перехода в рабочую область с помощью командной строки NodeJS:

cd C:\Users\sdkca\Desktop\electron-workspace

И выполните скрипт:

node build.js

Файлы установщика будут созданы, и это займет некоторое время. Как только установщики будут созданы, вы увидите следующее сообщение в консоли:

Установщики успешно создали электронное приложение

Наконец, откройте папку установщиков (в этом случае находится в C:\Users\sdkca\Desktop\electron-workspace\myapp-source-built-installers) и вы найдете там 3 установщика (установщик msi, исполняемый установщик и пакет nuGET):

Электронные установщики приложений

Вы можете попробовать установить приложение локально, выполнив от имени администратора Setup.exe файл. Затем мини-установка установит приложение в вашей системе, и вы сможете увидеть его в меню «Пуск» Windows и в виде ярлыка на рабочем столе:

Заметка

Анимацию загрузки настроек можно изменить, если указать путь к GIF-файлу, который будет отображаться во время установки, в loadingGif вариант в вашем build.js скрипт.

Electron App Desktop

Обратите внимание, что имя исполняемого файла, описание и другие свойства могут быть изменены в package.json вашего приложения и в настройках модуля winstaller, для получения дополнительной информации, пожалуйста, посетите репозиторий, чтобы увидеть документацию.

Важные заметки

Для разработки или внутреннего использования создание инсталляторов без подписи — это нормально, но для производственного приложения необходимо подписать приложение. Фильтр SmartScreen Internet Explorer заблокирует загрузку вашего приложения, и многие поставщики антивирусных программ будут считать ваше приложение вредоносным, если вы не получите действительный сертификат.

Любой сертификат, действительный для «подписи кода Authenticode», будет работать здесь, но если вы получите правильный вид сертификата кода, вы также можете подписаться на Отчеты об ошибках Windows. Эта страница MSDN содержит последние ссылки о том, где можно получить WER-совместимый сертификат. Для этого достаточно сертификата «Стандартная кодовая подпись».

Ссылка на основную публикацию
Adblock
detector