2. Electron.js – Основы. Полезные настройки и инструменты.

17 января, 2019 в 3:01

Категория: Electron.js / JavaScript

Эта заметка будет посвящена полезным настройкам и инструментам, которые можно использовать в фреймворке Electron.js. Ниже приведен список дополнительных инструментов для создания приложения:

1. Для нативной работы с модулями Node.js устанавливаем глобально – windows-build-tools

1
2
3
npm install --global --production windows-build-tools
// or
yarn global add windows-build-tools

2. В проект добавляем electron-reload – позволяет обновлять окно без перезапуска проекта. Если используем Electron совместно с React CRA или Vue CLI данный модуль не нужен

1
2
3
4
yarn add --dev electron-reload
// в main.js прописываем строку
 
require('electron-reload')(__dirname);

3. В зависимости от того как будет реализовано приложение и какая у него будет структура
можно по разному прописывать пути к index.html

1
2
3
4
5
// 1 - mainWindow.loadFile('index.html');
// 2 - mainWindow.loadFile(`${path.join(__dirname, "/index.html")}`);
// 3 - mainWindow.loadUrl('http://localhost:3000');
// 4 - mainWindow.loadUrl(`file://${__dirname}/index.html`);
// 5 - mainWindow.loadUrl(`file://${path.join(__dirname, "/public/index.html")}`);

4. Для отделения кода работающего только для разработки, добавляем модуль – electron-is-dev

1
2
3
4
5
6
7
8
9
10
npm install electron-is-dev
// или
yarn add electron-is-dev
// в main.js прописываем и добавляем необходимый код
const isDev = require('electron-is-dev');
if (isDev) {
console.log('Running in development');
} else {
console.log('Running in production');
}

5. Для того чтобы убрать из консоли сообщения о недостаточной безопасности можно добавить строку, использовать только для разработки, для продакшен нужно настроить безопасность правильно. Добавляем так же webPreferences в объект BrowserWindow

1
2
3
4
5
6
7
8
9
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
// добавляем webPreferences в объект BrowserWindow
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webSecurity: false
}
});

6. Для установки в DevTools расширений для работы с популярными фреймворками устанавливаем – electron-devtools-installer. В данном проекте не установлен.

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install electron-devtools-installer --save-dev
// or
yarn add electron-devtools-installer --dev
 
// в main.js прописываем
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
// добавляем необходимые расширение EMBER_INSPECTOR, REACT_DEVELOPER_TOOLS,
// BACKBONE_DEBUGGER, JQUERY_DEBUGGER, ANGULARJS_BATARANG, VUEJS_DEVTOOLS, REDUX_DEVTOOLS, REACT_PERF,
// CYCLEJS_DEVTOOL, MOBX_DEVTOOLS, APOLLO_DEVELOPER_TOOLS
 
// инсталлируем расширение перед вызовом DevTools
installExtension(REACT_DEVELOPER_TOOLS);
mainWindow.webContents.openDevTools();

7. Для установки в DevTools расширения Devtron, которое помогает тестировать код, отслеживать баги и оптимально отлаживать приложении. Устанавливаем модуль в проект и инсталлируем его.

1
2
3
4
5
6
npm install --save-dev devtron
// или
yarn add --dev devtron
 
// Прописываем в консоли запущенного приложения
require('devtron').install();

Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями – https://github.com/NetWorkRoom/electron-start/tree/tools

Теги :