Izrada aplikacije Electron pomoću aplikacije create-response-app

Nije potrebna konfiguracija ili "izbacivanje" webpacka.

Nedavno sam izgradio Electron aplikaciju pomoću create-React-App . Ni ja nisam trebao gnjaviti s Webpackom ili "izbaciti" svoju aplikaciju. Provest ću vas kroz to kako sam to postigao.

Privukla me ideja da koristim aplikaciju create-response-app jer skriva detalje o konfiguraciji webpacka. No, moja potraga za postojećim vodičima za zajedničko korištenje Electrona i create -react-app nije urodila plodom, pa sam jednostavno ušao i sam to shvatio.

Ako se osjećate nestrpljivo, možete zaroniti i pogledati moj kod. Evo repozicije GitHub-a za moju aplikaciju.

Prije nego što započnemo, dopustite mi da vam kažem o Electronu i Reactu i zašto je create-React-App tako sjajan alat.

Elektron i reakcija

React je Facebookov JavaScript okvir za prikaz.

JavaScript knjižnica za izgradnju korisničkih sučelja - React

JavaScript knjižnica za izgradnju korisničkog sučeljafacebook.github.io

A Electron je GitHub-ov okvir za izgradnju različitih platformi za stolne aplikacije u JavaScript-u.

Elektron

Izradite višeplatformne desktop aplikacije s JavaScriptom, HTML-om i CSS-om. elektron.atom.io

Većina koristi webpack za konfiguraciju potrebnu za React razvoj. webpack je alat za konfiguraciju i izgradnju koji je većina zajednice React usvojila nad alternativama poput Gulpa i Grunta.

Općeniti podaci o konfiguraciji variraju (o tome više kasnije), a na raspolaganju je mnogo generatora uzorka i aplikacija, ali u srpnju 2016. Facebook Incubator je objavio alat,stvoriti-reagirati-app . Sakriva većinu konfiguracije i omogućuje programeru da koristi jednostavne naredbe, poput npm starti npm run buildza pokretanje i izgradnju svojih aplikacija.

Što je izbacivanje i zašto to želite izbjeći?

create-response-app donosi određene pretpostavke o tipičnom postavljanju React-a. Ako ove pretpostavke nisu za vas, postoji mogućnost izbacivanja aplikacije ( npm run eject). Izbacivanjem aplikacije kopira se sva enkapsulirana konfiguracija create-response-app u vaš projekt, pružajući konfiguracijsku ploču koju možete mijenjati po želji.

Ali ovo je jednosmjerno putovanje. Ne možete poništiti izbacivanje i vratiti se natrag. Objavljeno je 49 izdanja (od ovog posta) aplikacije create-response-app, od kojih je svaka poboljšana. No za izbačenu aplikaciju morali biste se odreći tih poboljšanja ili smisliti kako ih primijeniti.

Izbačena konfiguracija ima više od 550 redaka u 7 datoteka (od ovog posta). Ne razumijem sve (dobro, većinu, zapravo) i ne želim.

Ciljevi

Moji su ciljevi jednostavni:

  • izbjegavajte izbacivanje aplikacije React
  • minimizirajte ljepilo kako bi React i Electron radili zajedno
  • sačuvati zadane postavke, pretpostavke i konvencije koje je napravio Electron i stvoriti-reagirati-aplikaciju / reagirati. (To može olakšati upotrebu drugih alata koji pretpostavljaju / zahtijevaju takve konvencije.)

Osnovni recept

  1. pokrenite create-react-appza generiranje osnovne React aplikacije
  2. trčanje npm install --save-dev electron
  3. dodaj main.jsiz electron-quick-start(preimenovat ćemo ga u electron-starter.js, radi jasnosti)
  4. izmijeniti poziv na mainWindow.loadURL(in electron-starter.js) za upotrebu localhost:3000(webpack-dev-server)
  5. dodaj glavni unos u package.jsonforelectron-starter.js
  6. dodaj cilj za pokretanje na koji pokreće Electron package.json
  7. npm start nakon čega slijedi npm run electron

Koraci 1 i 2 prilično su jednostavni. Evo koda za korake 3 i 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('//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.

(Suština)

A za korake 5 i 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 ." } }

(Suština)

Kada pokrenete npm naredbe u koraku 7, trebali biste vidjeti ovo:

Možete izvršiti promjene u reakcijskom kodu i trebali biste ih vidjeti kako se odražavaju u pokrenutoj aplikaciji Electron.

Ovo dobro funkcionira za razvoj, ali ima dva nedostatka:

  • proizvodnja neće koristiti webpack-dev-server. Treba koristiti statičku datoteku iz izgradnje projekta React
  • (mala) smetnja za pokretanje obje npm naredbe

Određivanje loadURL-a u proizvodnji i razvoju

U razvoju varijabla okoline može odrediti url za mainWindow.loadURL(in electron-starter.js). Ako env var postoji, mi ćemo ga koristiti; inače ćemo koristiti produkcijsku statičku HTML datoteku.

Dodati ćemo cilj pokretanja npm (na package.json) kako slijedi:

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

Ažuriranje: Korisnici Windowsa morat će učiniti sljedeće: (zahvaljujući @bfarmilo)

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

U electron-starter.jsćemo mijenjati mainWindow.loadURLpoziva na sljedeći način:

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

(Suština)

Postoji problem s ovim: create-react-app(prema zadanim postavkama) gradi an index.htmlkoji koristi apsolutne staze. To neće uspjeti prilikom učitavanja u Electron. Srećom, postoji mogućnost konfiguriranja da to promijenite: postavite homepagesvojstvo u package.json. (Facebook dokumentacija o imanju je ovdje.)

Dakle, ovo svojstvo možemo postaviti na trenutni direktorij i npm run buildkoristit ćemo ga kao relativni put.

"homepage": "./",

Korištenje Foremana za upravljanje reakcijskim i elektronskim procesima

Iz praktičnosti, radije ne

  1. pokrenuti / upravljati i React dev poslužiteljem i Electron procesima (radije bih se bavio jednim)
  2. pričekajte da se React dev poslužitelj pokrene, a zatim pokrenite Electron

Foremen je dobar alat za upravljanje procesima. Možemo ga dodati,

npm install --save-dev foreman

i dodajte sljedeće Procfile

react: npm startelectron: npm run electron

(Suština)

To se odnosi na (1). Za (2) možemo dodati jednostavnu skriptu čvora ( electron-wait-react.js) koja čeka pokretanje React dev poslužitelja, a zatim pokreće Electron.

const net = require('net'); const port = process.env.PORT ? (process.env.PORT - 100) : 3000; process.env.ELECTRON_START_URL = `//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); });

(Suština)

NAPOMENA: Foreman će pomaknuti broj porta za 100 za procese različitih vrsta. (Vidi ovdje.) Dakle, electron-wait-react.jsoduzima 100 za pravilno postavljanje broja porta poslužitelja React dev.

Sada izmijenite Procfile

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

(Suština)

Konačno, promijenit ćemo ciljeve izvođenja package.jsonkako bismo ih zamijenili electron-devsa:

"dev" : "nf start"

A sada možemo izvršiti:

npm run dev
UPDATE (1/25/17): Dodao sam sljedeći odjeljak kao odgovor na neke korisničke komentare (ovdje i ovdje). Treba im pristup Electronu iz aplikacije za reakciju, a jednostavno zahtijevanje ili uvoz dovodi do pogreške. Ispod primjećujem jedno rješenje.

Pristup Electronu iz aplikacije React

Aplikacija Electron ima dva glavna procesa: domaćin / omot Electron i vašu aplikaciju. U nekim slučajevima želite pristup Electronu iz svoje aplikacije. Na primjer, možda ćete htjeti pristupiti lokalnom datotečnom sustavu ili koristiti Electronov ipcRenderer. Ali ako napravite sljedeće, dobit ćete pogrešku

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

Postoje neke rasprave o ovoj pogrešci u raznim problemima s GitHubom i Stackom Overflowom, poput ovog. Većina rješenja predlaže promjene konfiguracije webpack-a, ali to bi zahtijevalo izbacivanje aplikacije.

Međutim, postoji jednostavno rješenje / hakiranje.

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

Završavati

Radi praktičnosti, ovdje je GitHub repo koji sadrži sve izmjene gore, s oznakama za svaki korak. No, nema puno posla oko pokretanja aplikacije Electron koja koristi aplikaciju create-response-app. (Ovaj je post mnogo dulji od koda i promjene koje biste trebali integrirati.)

A ako koristite aplikaciju create-response-app, možda biste željeli pogledati moj post, testove za uklanjanje pogrešaka u WebStormu i create-response-app.

Hvala na čitanju. Više mojih postova možete pogledati na opravdanju.io

AŽURIRANJE (2/2/17). Čitatelj Carl Vitullo predložio je upotrebu npm startumjesto npm run devi poslao zahtjev za povlačenjem s izmjenama na GitHubu. Ovi su dotjerivanja dostupni u ovoj grani.