Electron alkalmazás létrehozása create-reagál-alkalmazással

Nincs szükség webpack konfigurálásra vagy „kiadásra”.

Nemrégiben létrehoztam egy Electron alkalmazást a create-reagál-alkalmazás használatával . Nekem sem volt szükségem a Webpackkal való gúnyolódásra, sem az alkalmazásom „kidobására”. Végigvezetem, hogyan teljesítettem ezt.

Azért vonzott az ötlet, hogy használjam a create-reagál-alkalmazást, mert elrejti a webcsomag konfigurációs részleteit. De az Electron és a create-reago-app együttes használatára vonatkozó meglévő útmutatók keresése nem hozott semmilyen gyümölcsöt, ezért csak belemerültem és kitaláltam magam.

Ha türelmetlennek érzed magad, belemerülhetsz, és megnézheted a kódomat. Itt van a GitHub repo az alkalmazásomhoz.

Mielőtt elkezdenénk, hadd mondjak el az Electronról és a React-ről, és miért olyan nagyszerű eszköz a create-reagál-alkalmazás.

Elektron és reakció

A React a Facebook JavaScript nézetrendszere.

JavaScript könyvtár felhasználói felületek felépítéséhez - React

JavaScript könyvtár a felhasználói felületek felépítéséhezfacebook.github.io

Az Electron pedig a GitHub keretrendszere a platformokon átívelő asztali alkalmazások JavaScript-be építéséhez.

Elektron

Építsen több platformos asztali alkalmazást JavaScript, HTML és CSS használatával. elektron.atom.io

A legtöbb a webcsomagot használja a React fejlesztéséhez szükséges konfigurációhoz. A webpack egy olyan konfigurációs és építési eszköz, amelyet a React közösség nagy része olyan alternatívák mellett alkalmazott, mint a Gulp és a Grunt.

A konfigurációs rezsi változó (erről bővebben később), és sok kazán- és alkalmazásgenerátor áll rendelkezésre, de 2016 júliusában a Facebook Inkubátor kiadott egy eszközt,create-reagál-app . Ez elrejti a legtöbb konfiguráció, és lehetővé teszi a fejlesztő használat egyszerű parancsok, például a npm startés npm run builda futás és építik alkalmazásokat.

Mi a kidobás, és miért akarja elkerülni?

A create-react-app bizonyos feltételezéseket tesz egy tipikus React-beállítással kapcsolatban. Ha ezek a feltételezések nem az Ön számára szólnak, akkor lehetőség van egy alkalmazás ( ) eltávolításáranpm run eject . Az alkalmazás kilökése átmásolja a create-reagál-alkalmazás összes bezárt konfigurációját a projektjébe, biztosítva a kazán konfigurációt, amelyet tetszés szerint módosíthat.

De ez egyirányú út. Nem lehet visszavonni a kilökést és visszamenni. A közzététel (a bejegyzés kezdetétől számítva) 49 kiadást tartalmazott, amelyek mindegyike fejlesztéseket hajtott végre. De egy kidobott alkalmazás esetén le kell mondania ezekről a fejlesztésekről, vagy ki kell találnia, hogyan kell alkalmazni őket.

A kiadott konfiguráció több mint 550 sorból áll, amelyek 7 fájlt ölelnek fel (a bejegyzés ideje alatt). Nem értem az egészet (nos, tulajdonképpen a legtöbbet), és nem is akarom.

Célok

A céljaim egyszerűek:

• kerülje a React alkalmazás kilökését
• minimalizálja a ragasztót a React és az Electron együttes működéséhez
• megőrzi az Electron és a create-react-app / React alapértelmezéseit, feltételezéseit és konvencióit. (Ez megkönnyítheti más eszközök használatát, amelyek ilyen konvenciókat feltételeznek / igényelnek.)

Alapvető recept

1. futtasson create-react-appegy alap React alkalmazás létrehozásához
2. fuss npm install --save-dev electron
3. add main.jsfrom electron-quick-start( electron-starter.jsaz áttekinthetőség kedvéért át fogjuk nevezni )
4. módosítsa a mainWindow.loadURL(z electron-starter.js) hívást a (z ) használatához localhost:3000(webpack-dev-server)
5. adjon hozzá egy fő bejegyzést a következőhöz package.json:electron-starter.js
6. adjon hozzá egy futtatási célt az Electron elindításához package.json
7. npm start utána npm run electron

Az 1. és 2. lépés meglehetősen egyszerű. Itt van a 3. és 4. lépés kódja:

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.

(Lényeg)

És az 5. és 6. lépésnél:

{ "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 ." } }

(Lényeg)

Amikor az npm parancsokat futtatja a 7. lépésben, ezt látnia kell:

Élő módosításokat hajthat végre a React kódban, és ezeket a futó Electron alkalmazásban kell látnia.

Ez rendben működik a fejlesztés szempontjából, de két hiányossága van:

• a termelés nem fog felhasználni webpack-dev-server. A React projekt felépítéséből származó statikus fájlt kell használnia
• (kicsi) kellemetlenség mindkét npm parancs futtatásához

A loadURL megadása a Production és a Dev

A fejlesztés során egy környezeti változó megadhatja az mainWindow.loadURL(in electron-starter.js) URL-jét . Ha az env var létezik, akkor használjuk; máskülönben a gyártási statikus HTML fájlt fogjuk használni.

Az package.jsonalábbiak szerint adunk hozzá egy npm futtatási célt :

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

Frissítés: A Windows felhasználóknak a következőket kell tenniük: (a @bfarmilo-nak köszönhetően)

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

A következő módon electron-starter.jsmódosítjuk a mainWindow.loadURLhívást:

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

(Lényeg)

Van egy probléma ezzel: create-react-app(alapértelmezés szerint) index.htmlabszolút elérési utakat használ. Ez nem fog sikerülni az Electronba történő betöltéskor. Szerencsére van egy config opció ennek megváltoztatásához: állítson be egy homepagetulajdonságot a package.json. (Itt található a Facebook dokumentációja az ingatlanról.)

Tehát beállíthatjuk ezt a tulajdonságot az aktuális könyvtárba, és npm run buildrelatív elérési útként fogjuk használni.

"homepage": "./",

Foreman használata a reakció- és elektronfolyamatok kezeléséhez

A kényelem kedvéért inkább nem

1. a React dev szerver és az Electron folyamatok elindítása / kezelése (inkább foglalkoznék egyet)
2. várja meg a React dev szerver elindulását, majd indítsa el az Electron-t

A Foremen egy jó folyamatkezelő eszköz. Hozzáadhatjuk,

npm install --save-dev foreman

és adja hozzá a következőket Procfile

react: npm startelectron: npm run electron

(Lényeg)

Ez az (1) ponttal foglalkozik. A (2) -hez hozzáadhatunk egy egyszerű csomópont-szkriptet ( electron-wait-react.js), amely megvárja a React dev szerver elindulását, majd elindítja az Electron-t.

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); });

(Lényeg)

MEGJEGYZÉS: A Foreman különböző típusú folyamatok esetén 100-tal ellensúlyozza a portszámot. (Lásd itt.) Tehát electron-wait-react.jskivonva a 100-at a React dev szerver portszámának helyes beállításához.

Most módosítsa a Procfile

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

(Lényeg)

Végül megváltoztatjuk a futtatási célokat a package.jsonkövetkezők helyett electron-dev:

"dev" : "nf start"

És most végre tudjuk hajtani:

npm run dev

FRISSÍTÉS (2017.01.25.): A következő szakaszt felvettem néhány felhasználói megjegyzésre válaszul (itt és itt). Hozzá kell férniük az Electronhoz a reakcióalkalmazáson belül, és egy egyszerű igénylés vagy importálás hibát okoz. Az alábbiakban megemlítek egy megoldást.

Hozzáférés az Electronhoz a React alkalmazásból

Az Electron alkalmazásnak két fő folyamata van: az Electron gazdagép / csomagoló és az alkalmazás. Bizonyos esetekben az alkalmazáson belül szeretne hozzáférni az Electronhoz. Például érdemes elérnie a helyi fájlrendszert vagy használni az Electron-t ipcRenderer. De ha a következőket hajtja végre, hibaüzenetet kap

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

Van néhány vita erről a hibáról a különböző GitHub és Stack Overflow kérdésekben, például ebben. A legtöbb megoldás javasolja a webcsomag konfigurációjának megváltoztatását, de ehhez ki kellene dobni az alkalmazást.

Van azonban egy egyszerű megoldás / hack.

const electron = window.require('electron');

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

Csomagolás

A kényelem kedvéért itt van egy GitHub repo, amely tartalmazza a fenti változtatásokat, minden lépéshez címkékkel. De nincs sok munka elindítani egy Electron alkalmazást, amely a create-reagál-alkalmazást használja. (Ez a bejegyzés sokkal hosszabb, mint a kód és a változtatások, amelyekre szükséged lenne a kettő integrálásához.)

Ha pedig a create-reagál-alkalmazást használja, érdemes megnéznie a Webstorm hibakeresési tesztjei és a create-reagál-alkalmazás című bejegyzésemet.

Köszönöm, hogy elolvasta. További hozzászólásaimat a justideas.io oldalon tekintheti meg

FRISSÍTÉS (2017.02.22.). Carl Vitullo olvasó javasolta a npm starthelyett használatot , npm run devés a változásokkal együtt egy lekérési kérelmet nyújtott be a GitHubon . Ezek a módosítások ebben az ágban érhetők el.