„Electron“ programos sukūrimas su „create-reago“ programa

Nereikia konfigūruoti internetinės pakuotės ar „išstumti“.

Neseniai sukūriau „Electron“ programą, naudodama „create-reago-app“ . Man taip pat nereikėjo tyčiotis apie „Webpack“ ar „išstumti“ savo programą. Aš jums paaiškinsiu, kaip man tai pavyko.

Mane patraukė idėja naudoti „create-reago-app“, nes ji slepia išsamią internetinės pakuotės konfigūracijos informaciją. Bet mano ieškojimas esamų „Electron“ ir „create-reago-app“ naudojimo vadovų kartu nedavė vaisių, todėl aš tiesiog įsitaisiau ir pats tai supratau.

Jei jaučiatės nekantrus, galite nerti tiesiai į jūsų kodą. Čia yra mano programos „GitHub“ atpirkimo priemonė.

Prieš pradėdami leiskite man papasakoti apie „Electron and React“ ir kodėl „create-reago“ programa yra tokia puiki priemonė.

Elektronas ir reakcija

„React“ yra „Facebook“ „JavaScript“ peržiūros sistema.

„JavaScript“ biblioteka, skirta kurti vartotojo sąsajas - „React“

„JavaScript“ biblioteka, skirta kurti vartotojo sąsajasfacebook.github.io

„Electron“ yra „GitHub“ sistema, skirta kurti įvairias platformas turinčias darbalaukio programas „JavaScript“.

Elektronas

Kurkite daugiaplatformes darbalaukio programas naudodami „JavaScript“, HTML ir CSS. elektron.atom.io

Daugelis naudoja internetinę paketą konfigūracijai, reikalingai „React“ plėtrai. „webpack“ yra konfigūracijos ir kūrimo įrankis, kurį dauguma „React“ bendruomenės priėmė per alternatyvas, tokias kaip „Gulp“ ir „Grunt“.

Konfigūracijos pridėtinės išlaidos skiriasi (daugiau apie tai vėliau), ir yra daugybė katilinių ir programų generatorių, tačiau 2016 m. Liepos mėn. „Facebook“ inkubatorius išleido įrankį,sukurti-reaguoti-programą . Tai slepia didžiąją dalį konfigūracijos ir leidžia kūrėjui naudoti paprastas komandas, tokias kaip npm startir npm run buildpaleisti ir kurti savo programas.

Kas yra išmetimas ir kodėl norite to išvengti?

„create-react-app“ pateikia tam tikras prielaidas apie tipinę „React“ sąranką. Jei šios prielaidos yra ne jums, yra galimybė išimti paraišką ( npm run eject). Išmetus programą, jūsų projekte nukopijuojama visa sukurtos reakcijos programos konfigūracija, suteikiant katilo konfigūraciją, kurią galite pakeisti, kaip norite.

Bet tai kelionė į vieną pusę . Negalite atšaukti išmetimo ir grįžti atgal. Buvo 49 leidimai (nuo šio pranešimo) „create-reago-app“, kiekviena jų patobulinta. Bet jei norite atmesti programą, turėtumėte atsisakyti šių patobulinimų arba išsiaiškinti, kaip juos pritaikyti.

Išmesta konfigūracija yra daugiau nei 550 eilučių, apimančių 7 failus (šio pranešimo metu). Aš viso to nesuprantu (na, daugumos, iš tikrųjų) ir nenoriu.

Tikslai

Mano tikslai yra paprasti:

  • venkite išmesti „React“ programą
  • sumažinkite klijus, kad „React“ ir „Electron“ veiktų kartu
  • išsaugoti numatytuosius nustatymus, prielaidas ir susitarimus, kuriuos padarė „Electron“, ir „create-reago-app / React“. (Tai gali palengvinti kitų įrankių, kurie prisiima / reikalauja tokių susitarimų, naudojimą.)

Pagrindinis receptas

  1. paleisti, create-react-appkad būtų sukurta pagrindinė „React“ programa
  2. paleisti npm install --save-dev electron
  3. pridėti main.jselectron-quick-start( electron-starter.jsaiškumo sumetimais jį pervadinsime )
  4. modifikuoti skambutį mainWindow.loadURL(in electron-starter.js) naudoti localhost:3000(„webpack-dev-server“)
  5. pridėti pagrindinį įėjimą į package.jsonelectron-starter.js
  6. pridėti paleidimo tikslą, kad paleistumėte „Electron“ package.json
  7. npm start paskui npm run electron

1 ir 2 žingsniai yra gana paprasti. Štai 3 ir 4 žingsnių kodas:

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.

(Esme)

5 ir 6 žingsniams:

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

(Esme)

Vykdydami npm komandas atlikdami 7 veiksmą, turėtumėte tai pamatyti:

Galite tiesiogiai pakeisti „React“ kodą ir turėtumėte juos matyti veikiančioje „Electron“ programoje.

Tai tinka vystymuisi, tačiau turi du trūkumus:

  • gamyba nebus naudojama webpack-dev-server. Jai reikia naudoti statinį failą, kuriant „React“ projektą
  • (nedidelis) nemalonumas, norint paleisti abi npm komandas

„LoadURL“ nurodymas „Production“ ir „Dev“

Kuriant aplinkos kintamasis gali nurodyti mainWindow.loadURL(in electron-starter.js) URL . Jei egzistuoja env var, mes jį naudosime; kitu atveju naudosime statinį HTML failą.

Pridėsime tikslą „npm“ (prie package.json) taip:

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

Atnaujinimas: „Windows“ vartotojai turės atlikti šiuos veiksmus: (ačiū @bfarmilo)

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

Po to electron-starter.jsmes modifikuosime mainWindow.loadURLskambutį taip:

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

(Esme)

Čia yra problema: create-react-app(pagal numatytuosius nustatymus) sukuria, index.htmlkuris naudoja absoliučius kelius. Tai nepavyks įkeliant jį į „Electron“. Laimei, yra konfigūracijos parinktis, kad tai pakeistumėte: nustatykite homepageypatybę package.json. („Facebook“ dokumentai apie turtą yra čia.)

Taigi mes galime nustatyti šią ypatybę dabartiniame kataloge ir npm run buildnaudoti ją kaip santykinį kelią.

"homepage": "./",

„Foreman“ naudojimas reakcijos ir elektronų procesams valdyti

Dėl patogumo aš norėčiau ne

  1. paleisti / valdyti tiek „React dev server“, tiek „Electron“ procesus (aš geriau su jais susidursiu)
  2. palaukite, kol bus paleistas „React dev“ serveris, tada paleiskite „Electron“

„Foremen“ yra gera procesų valdymo priemonė. Mes galime jį pridėti,

npm install --save-dev foreman

ir pridėkite šiuos duomenis Procfile

react: npm startelectron: npm run electron

(Esme)

Tai susiję su (1). Prie (2) galime pridėti paprastą mazgo scenarijų ( electron-wait-react.js), kuris laukia, kol bus paleistas „React dev“ serveris, tada paleidžia „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); });

(Esme)

PASTABA: „Foreman“ skirtingo tipo procesams kompensuos prievado numerį 100. (Žiūrėkite čia.) Taigi, electron-wait-react.jsnorint teisingai nustatyti „React dev“ serverio prievado numerį , atimkite 100.

Dabar pakeiskite Procfile

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

(Esme)

Galiausiai pakeisime vykdymo tikslus, package.jsonpakeisdami electron-devjuos:

"dev" : "nf start"

Ir dabar mes galime įvykdyti:

npm run dev
ATNAUJINIMAS (17.01.15): atsakydamas į kai kuriuos vartotojo komentarus (čia ir čia) pridėjau šį skyrių. Jiems reikia prieigos prie „Electron“ iš reakcijos programos, o paprastas reikalavimas ar importavimas sukelia klaidą. Žemiau atkreipiu dėmesį į vieną sprendimą.

Prieiga prie „Electron“ iš „React App“

„Electron“ programoje yra du pagrindiniai procesai: „Electron“ kompiuteris / pakuotė ir jūsų programa. Kai kuriais atvejais norėtumėte pasiekti „Electron“ iš savo programos. Pvz., Galbūt norėsite pasiekti vietinę failų sistemą arba naudoti „Electron“ ipcRenderer. Bet jei atliksite šiuos veiksmus, gausite klaidą

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

Yra keletas diskusijų apie šią klaidą įvairiose „GitHub“ ir „Stack Overflow“ problemose, pvz. Daugelyje sprendimų siūlomi internetinės pakuotės konfigūracijos pakeitimai, tačiau tam reikės pašalinti programą.

Tačiau yra paprastas sprendimas / nulaužimas.

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

Apvyniojimas

Patogumo sumetimais pateikiame „GitHub“ atpirkimo priemonę, kurioje yra visi aukščiau nurodyti pakeitimai su kiekvieno veiksmo žymomis. Tačiau nėra daug darbo norint paleisti „Electron“ programą, naudojančią „create-reago“ programą. (Šis įrašas yra daug ilgesnis nei kodas ir pakeitimai, kuriuos turėsite integruoti.)

O jei naudojate „create-reago-app“ programą, galbūt norėsite sužinoti mano įrašą „Derinimo testai„ WebStorm “ir„ create-react-app “.

Ačiū, kad skaitėte. Galite peržiūrėti daugiau mano įrašų adresu justideas.io

ATNAUJINTI (17.02.27). Skaitytojas Carl Vitullo pasiūlė naudoti npm startvietoj npm run dev„GitHub“ ir pateikė pakeitimo užklausą su pakeitimais. Šie patobulinimai yra prieinami šioje šakoje.