Electron — это платформа для разработки настольных приложений с использованием таких веб-технологий, как HTML, CSS и JS. Интеграция приложения ng-cli с Electron проще, чем может показаться.
Двухпакетная структура Electron
Если вы знакомы с Electron, вы, возможно, помните структуру двух пакетов. Мы будем использовать аналогичную структуру, но с ключевым отличием: в обычной структуре из двух пакетов папка /app/
будет содержать приложение Electron. Мы назовем эту папку /electron/
, а другая папка /app/
внутри будет содержать наше скомпилированное приложение Angular.
Может показаться, что мы используем структуру из двух пакетов, но мы просто отделяем часть Electron от остального приложения.
Изменения в конфигурации приложения
- Создайте скрипт в нашем приложении Angular
package.json
.
"electron:start": "ng build --watch -op=electron/app"
Это создаст приложение Angular в папке приложения внутри нашего приложения папки Electron и будет перестраиваться при каждом изменении.
- Добавьте новую выходную папку в
.gitignore
, в раздел#compiled output
,/electron/app
. - Измените тег
base
вindex.html
нашего приложения Angular следующим образом:
Добавление точки перед косой чертой позволит Electron найти обслуживаемые файлы, и без ошибки 404
будет выброшена ошибка.
Это будут все модификации, которые нам понадобятся для интеграции приложения с Electron.
Создание нашего приложения Electron
- Нам нужно создать папку
electron
внутри нашего проекта. Внутри мы собираемся запустить командуnpm init
для создания Electronpackage.json
. Эта папка будет нашей корневой папкой Electron. - Мы добавляем Electron в качестве зависимости разработки.
- Мы создаем точку входа для нашей программы Electron.
index.js
const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win; function createWindow() { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600 }); // and load the index.html of the app. win.loadURL( url.format({ pathname: path.join(__dirname, 'app', 'index.html'), protocol: 'file:', slashes: true, }), ); // Open the DevTools. win.webContents.openDevTools(); // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null; }); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow); // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow(); } }); // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
Запуск приложения
- Откройте терминал и перейдите к проекту Angular и запустите
npm run electron:start
, чтобы запустить приложение Angular. - Откройте второй терминал и перейдите в папку
electron
внутри проекта и запуститеelectron .
, чтобы запустить электронное приложение.
Вы должны увидеть окно с работающим внутри него приложением Angular.
Движение вперед
Теперь у нас есть очень простое приложение Angular, работающее внутри процесса рендеринга Electron. Если мы изменим что-то либо в приложении Angular, либо в приложении Electron, нам нужно закрыть окно Electron и снова запустить electron .
. Это можно было бы оптимизировать с помощью плагинов и систем сборки, но это стандартное поведение Electron.
Вы можете заметить, что входной файл приложения Electron написан на ванильном Javascript. Это связано с тем, что Electron запускает только ванильный Javascript, и для запуска другого языка, такого как Typescript, вы должны использовать плагин, такой как ts-node
, или систему сборки.
Первоначально опубликовано на dev.to.