Рубрики
Без рубрики

Создание электронного приложения с созданием-реактивным приложением

Нет конфигурации WebPack или «выброс». Недавно я построил электронное приложение, используя Create-React-App. Мне не нужно было гадить с WebPack или «извлекать» мое приложение. Я пойду через тебя, как я достиг этого. Я был привлечен к идее использования приложения Create-React-App, потому что он скрывает

Нет конфигурации WebPack или «выброс».

Я недавно построил Электрон Приложение, использующее Create-React-App . Мне не нужно было гадить с WebPack или «извлекать» мое приложение. Я пойду через тебя, как я достиг этого.

Я был привлечен к идее использования Create-raction-app Потому что он скрывает детали конфигурации WebPack. Но мой поиск существующих руководств по использованию электронов и создания-реактивного приложения вместе не сдержал никаких фруктов, поэтому я просто голую и подумал его.

Если вы чувствуете себя нетерпеливым, вы можете погрузиться прямо и посмотреть на мой код. Вот …| Github repo Для моего приложения.

Прежде чем мы начнем, позвольте мне рассказать вам о электроне и реагировать и реагировать, а зачем создавать ract-app – это отличный инструмент.

Электрон и реагируют

React – это Facebook’s JavaScript View Framework.

Библиотека JavaScript для построения пользовательских интерфейсов – Рейкт Библиотека JavaScript для построения пользовательского интерфейса INTERFACESFace. Github.io

И Electron – это Framework Github для строительства кроссплатформенных настольных приложений в JavaScript.

Электрон Построить кроссплатформенные настольные приложения с JavaScript, HTML и CSS. electron.atom.io

Большинство используют WebPack Для конфигурации, необходимой для развития реагирования. WebPack – это инструмент конфигурации и сборки, что большая часть сообщества RACT приняла в виде альтернатив, таких как Глоток и Грунт Отказ

Настройка конфигурации варьируется (больше на это позже), и доступно много генераторов для ботин и приложений, но в июле 2016 года Инкубатор Facebook Выпустил инструмент, Create-React-App . Он скрывает большую часть конфигурации и позволяет разработчику использовать простые команды, такие как NPM начать и NPM запустить сборку бежать и строить свои приложения.

Что вытесняет, и почему вы хотите избежать этого?

Create-React-App прилагает определенные предположения о типичной настройке реагирования. Если эти предположения не для вас, есть возможность извлечь Приложение ( NPM запустить извлечение ). Извлечение приложений копирует всю инкапсулированную конфигурацию React-App-App к вашему проекту, обеспечивая конфигурацию котельной, которую вы можете изменить, как вы хотите.

Но это Один из способов поездка. Вы не можете отменить выбросить и вернуться назад. Было 49 выпусков (по состоянию на данный пост) создания-реактивного приложения, каждый из которых делает улучшения. Но для извлеченного приложения вам придется либо отказаться от этих улучшений, либо выяснить, как их применять.

Извлеченная конфигурация составляет более 550 строк, охватывающих 7 файлов (по состоянию на этом посте). Я не понимаю все это (ну, большая часть этого, на самом деле) и я не хочу.

Цели

Мои цели просты:

  • Избегайте выброса приложения RACT
  • Минимизируйте клей, чтобы получить реагирование и электрон, работая вместе
  • Сохранить значения по умолчанию, предположениям и конвенциям, сделанным электронным и созданным-реактивным приложением/реагированием. (Это может облегчить использование других инструментов, которые предполагают/требуют таких конвенций.)

Основной рецепт

  1. Беги Create-raction-app Создать основное приложение React
  2. Беги NPM установить --save-dev Electron
  3. Добавить main.js от Электронно-быстрый запуск (Мы переименуем это на Electron-Starter.js , для ясности)
  4. Изменить звонок на mainwindow.loadurl. (в Electron-Starter.js ) использовать localhost: 3000. (WebPack-Dev-Server)
  5. Добавить основную запись в package.json для Electron-Starter.js.
  6. Добавьте целевую цену, чтобы начать электрон на Package.json.
  7. NPM начать сопровождается NPM Run. электрон

Шаги 1 и 2 довольно просты. Вот код для шагов 3 и 4:

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

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 mainWindow;

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('http://localhost:3000');

    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // 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.
        mainWindow = 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', function () {
    // On OS X 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', function () {
    // On OS X 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 (mainWindow === 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.

( Gist )

А для шагов 5 и 6:

{
  "name": "electron-with-create-react-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "electron": "^1.4.14",
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron ."
  }
}

( Gist )

Когда вы запускаете команды NPM на шаге 7, вы должны увидеть это:

Вы можете вносить в живые изменения в React Code, и вы должны увидеть их отраженные в приложении Runing Electron.

Это работает хорошо для развития, но имеет две недостатки:

  • Производство не будет использовать webpack-dev-server Отказ Необходимо использовать статический файл из строя реактивный проект
  • (маленькая) неприятность, чтобы запустить оба NPM команды

Указание Loadurl в производстве и разработке

В разработке переменная среды может указать URL для mainwindow.loadurl (в Electron-Starter.js ). Если ENV VAR существует, мы будем использовать его; Иначе мы будем использовать производственный статический HTML-файл.

Мы добавим целевую цену Run NPM (To Package.json ) следующим образом:

"electron-dev": "ELECTRON_START_URL=http://localhost:3000 electron ."

Обновление: пользователи Windows необходимо сделать следующее: (спасибо @bfarmilo )

"electron-dev": "set ELECTRON_START_URL=http://localhost:3000 && electron ."

В Electron-Starter.js мы изменим mainwindow.loadurl Вызовите следующим образом:

const startUrl = process.env.ELECTRON_START_URL || url.format({
            pathname: path.join(__dirname, '/../build/index.html'),
            protocol: 'file:',
            slashes: true
        });
    mainWindow.loadURL(startUrl);

( Gist )

Есть проблема с этим: Create-raction-app (по умолчанию) создает index.html Это использует абсолютные пути. Это не удастся при загрузке его в электрон. К счастью, есть возможность конфигурации для изменения этого: установить Главная страница Недвижимость в package.json Отказ (Документация на Facebook на свойстве это здесь .)

Таким образом, мы можем установить это свойство в текущий каталог и NPM запустить сборку будет использовать его как относительный путь.

"homepage": "./",

Использование Foreman для управления реактивными и электронными процессами

Для удобства я предпочитаю не

  1. Запустите/управлять как серверными и электронными процессами (я бы предпочел иметь дело с одним)
  2. Подождите, пока начнут сервер dev dev, а затем запустить электрон

Foremen это хороший инструмент управления процессом. Мы можем добавить его,

npm install --save-dev foreman

и добавьте следующее ProCFile

react: npm startelectron: npm run electron

( Gist )

Это касается (1). Для (2) мы можем добавить простой скрипт узла ( Electron-wait-rance.js ), который ждет сервера RACT DEV для начала, затем запускает электрон.

const net = require('net');
const port = process.env.PORT ? (process.env.PORT - 100) : 3000;

process.env.ELECTRON_START_URL = `http://localhost:${port}`;

const client = new net.Socket();

let startedElectron = false;
const tryConnection = () => client.connect({port: port}, () => {
        client.end();
        if(!startedElectron) {
            console.log('starting electron');
            startedElectron = true;
            const exec = require('child_process').exec;
            exec('npm run electron');
        }
    }
);

tryConnection();

client.on('error', (error) => {
    setTimeout(tryConnection, 1000);
});

( Gist )

Теперь измените ProCFile

react: npm startelectron: node src/electron-wait-react

( Gist )

Наконец, мы изменим пробежные цели в package.json заменить Электронно-dev с участием:

"dev" : "nf start"

И теперь мы можем выполнить:

npm run dev

Доступ к электрону из приложения RACT

Электронное приложение имеет два основных процесса: электронный хост/обертка и ваше приложение. В некоторых случаях вы хотели бы получить доступ к электрону из вашего приложения. Например, вы можете получить доступ к локальной файловой системе или использовать электронные IPCRENDER Отказ Но если вы сделаете следующее, вы получите ошибку

const electron = require('electron')
//or
import electron from 'electron';

Существует некоторая дискуссия об этой ошибке в различных проблемах переполнения GitHub и Stack, таких как этот один Отказ Большинство решений предлагают изменения в WebPack Config, но это потребует извлечения приложения.

Тем не менее, есть простой обходной путь/взлом.

const electron = window.require('electron');
const electron = window.require('electron');
const fs = electron.remote.require('fs');
const ipcRenderer  = electron.ipcRenderer;

Упаковка

Для удобства здесь есть Github repo Это имеет все изменения выше, с тегами для каждого шага. Но там не так много работы, чтобы загрузить электронное приложение, которое использует Create-React-App. (Этот пост намного дольше, чем код и изменения, вам нужно будет интегрировать два.)

И если вы используете приложение Create-React-App, вы можете проверить мой пост, Отладка тестов в веб-системе и создание-реактивное приложение Отказ

Спасибо за прочтение. Вы можете проверить больше моих сообщений в justideas.io.

Оригинал: “https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/”

Читайте ещё по теме: