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 build
a 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
- futtasson
create-react-app
egy alap React alkalmazás létrehozásához - fuss
npm install --save-dev electron
- add
main.js
fromelectron-quick-start
(electron-starter.js
az áttekinthetőség kedvéért át fogjuk nevezni ) - módosítsa a
mainWindow.loadURL
(zelectron-starter.js
) hívást a (z ) használatáhozlocalhost:3000
(webpack-dev-server) - adjon hozzá egy fő bejegyzést a következőhöz
package.json
:electron-starter.js
- adjon hozzá egy futtatási célt az Electron elindításához
package.json
npm start
utánanpm 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.json
alá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.js
módosítjuk a mainWindow.loadURL
hí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.html
abszolú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 homepage
tulajdonsá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 build
relatí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
- a React dev szerver és az Electron folyamatok elindítása / kezelése (inkább foglalkoznék egyet)
- 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átelectron-wait-react.js
kivonva 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.json
kö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 anpm start
helyett 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.