Разработать приложение React + Electron

Electron

Недавно разработал программу для чтения RSS с помощью React + Electron, с открытым исходным кодом по адресу:GitHub.com/breeze2/не жарко…, здесь фиксируйте общий процесс разработки.

Breader

инициализация

Создать проект

На основе обычного приложения React шаг за шагом инициализируйте проект. предварительно установленyarnинструмент, сyarnЧтобы создать проект приложения React, скажем, имяdemo, а затем введите зависимости от Electron.

$ cd /PATH/TO/PROJECTS
$ yarn create react-app YOUR_APP_NAME
$ cd /PATH/TO/PROJECTS/YOUR_APP_NAME
$ yarn add electron --dev

Файл записи конфигурации

После создания проекта примерная структура каталогов выглядит следующим образом:

|-->demo
    |-->node_modules
        |--...
    |-->public
        |--index.html
        |--...
    |-->src
    |--package.json
    |--...

Вообще говоря, входной файл приложения React (в тестовой среде)public/index.html, а входной файл приложения Electron лучше всего разместить вpublicкаталог и названный какelectron.js(такelectron-builderмогут быть автоматически распознаны).

доpackage.jsonВ файле ввода электронного приложения добавьтеmainКонфигурация:

{
  ...
  "main": "public/electron.js",
  ...
}

public/electron.jsКод:

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 960,
        height: 600,
    })
    mainWindow.loadFile('index.html')
    mainWindow.webContents.openDevTools()
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

выполнениеyarn electron ./Команда запустит приложение Electron, но приложение React еще не запущено.

запустить приложение

общее использованиеyarn react-scripts startкомандой, вы можете смонтировать приложение React на локальный порт 3000 (http://localhost:3000) для разработки и отладки. Для разработки и отладки с помощью React в сочетании с Electron сначала установите его.electron-is-devопределить текущую среду разработки.

$ yarn add electron-is-dev

Общая среда разработки загружаетсяhttp://localhost:3000/, официальная среда загружена../build/index.htmlфайл, поэтому изменитеpublic/electron.jsкод (createWindowфункция):

const isDev = require('electron-is-dev')

...
--    // mainWindow.loadFile('index.html')
++    if (isDev) {
++        mainWindow.loadURL('http://localhost:3000/')
++    } else {
++        mainWindow.loadFile(path.join(__dirname, '/../build/index.html'))
++    }
...

Затем в каталоге проекта откройте два терминала, один выполняетyarn react-scripts start, казньyarn electron ./, вы можете разрабатывать и отлаживать приложения React + Electron. Не завидуйelectron-vue, вы можете запустить его напрямую одной командой, но принцип тот же. Реализовать команду запуска несложно, если обе команды выполняются вместе. Сначала установите библиотеку инструментов:

$ yarn add concurrently --dev
$ yarn add wait-on --dev

Исправлятьpackage.json,добавить одинelectron-devКоманда скрипта:

{
  ...
  "scripts": {
    ...
    "electron-dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
    ...
  }
  ...
}

Таким образом, выполнить приговорyarn electron-devВы можете запустить приложение React + Electron.

JS-среда выполнения

Как правило, браузеры предоставляют одну среду выполнения JS, NodeJS — другую среду выполнения JS, а Electron — комбинацию этих двух сред выполнения. Однако две среды выполнения не живут в полной гармонии, например, использованиеwebpackКогда код JS, упакованный webpack, не может быть передан напрямуюimportключевое слово илиrequireфункция, чтобы представить функциональный интерфейс, предоставляемый NodeJS, потому что веб-пакет покрывает тот, который поставляется с NodeJS.requireфункция. Однако в ЭлектронеwindowобъектrequireСвойства будут сопоставлены с теми, которые поставляются с NodeJS.requireфункция, например, вызов функции, предоставляемой NodeJShttpинтерфейс, который можно записать так:

const http = window.require('http')

Перекомпилируйте расширение NodeJS

Обычно библиотеки инструментов, реализованные на чистом JS-коде, могут работать в среде Electron. Однако некоторые библиотеки инструментов NodeJS не реализованы с помощью чистого кода JS, напримерnode-sqlite3.node-sqlite3Он написан на C++, который является расширением NodeJS, а не простой библиотекой инструментов.node-sqlite3Его необходимо перекомпилировать, чтобы среда Electron работала в среде Electron.

electron-rebuild

electron-rebuildЭто инструмент для перекомпиляции расширений NodeJS специально для среды Electron. В каталоге проекта установите electronic-rebuild:

$ yarn add electron-rebuild --dev

Например, чтобы перекомпилировать node-sqlite3, достаточно:

$ yarn electron-rebuild -f -w sqlite3

Это просто в MacOS и немного сложнее в Windows.

Перекомпилируйте расширения NodeJS в Windows

Инструмент электронной перестройки также можно использовать в системах Windows, но среда компиляции должна быть предварительно настроена.

Сначала установите инструменты компиляции окна:

$ npm install --global --production windows-build-tools
$ npm config set msvs_version 2017

Затем скачайте и установитеPython2, должен быть Python2, но не Python3, если установлены и Python2, и Python3, вы должны указатьnpmУкажите путь к исполняемому файлу Python2, чтобы избежать вызова Python3:

$ npm config set python /path/to/executable/python2

Таким образом, в системах Windows можно вызвать электронную перестройку. Если во время выполнения electronic-rebuild столкнутьсяCONNECT ERRORЭто может быть проблема с сетью, вы можете переключиться на источник Taobao и повторить попытку.

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

Упаковка приложения

После завершения разработки приложения его необходимо упаковать вdmgилиexeи другие установочные файлы, вы можете использоватьelectron-builder

electron-builder

electronic-builder имеет множество опций конфигурации для вызова различных упакованных программ. Вот лишь краткое введение в конфигурацию упаковки системного установщика MacOS и системного установщика Windows NSIS (NSISявляется производителем установщика Windows с открытым исходным кодом).

Исправлятьpackage.json,Добавить кbuildКонфигурация:

{
  ...
  "homepage": "./", // 因为最后React应用引用的JS、CSS等资源都是本地的，只要用当前的相对路径即可
  "build": {
    "appId": "com.xxx.app", // 应用ID
    "npmRebuild": true, // 打包前是否重新编译NodeJS扩展
    "mac": {
      "category": "news", // 应用分类
      "icon": "build/icon.png" // 应用icon路径
    },
    "win": {
      "icon": "build/icon.png", // 应用icon路径
      "target": "nsis" // Windows安装文件的目标类型
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true, // 是否允许修改安装路径
      "allowElevation": false, // 是否允许提升权限
      "createDesktopShortcut": true, // 是否创建桌面快捷方式
      "menuCategory": true, //是否在菜单栏创建分类
      "oneClick": false // 是否一键安装
    },
    "files": [
      "build/**/*" // 引入的文件
    ]
  }
  ...
}

Затем вы можете упаковать приложение Electron:

$ yarn react-scripts build // 先用webpack打包React应用到`build`目录下
$ yarn eletron-builder // 再用eletron-builder打包Electron应用

Конечно, формальная упаковка также требуетподпись кодаи другие конфигурации см.инструкции по настройке электронного сборщика.

Ссылаться на

Категории