Эта заметка будет посвящена полезным настройкам и инструментам, которые можно использовать в фреймворке 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