Hot-Reload ile Electron’da İlk React Masaüstü Uygulamanızı Oluşturun – JSManifest

Hot-Reload ile Electron'da İlk React Masaüstü Uygulamanızı Oluşturun – JSManifest

JavaScript geliştiricisiyseniz, çoğu (veya tüm) özellikle son birkaç yılda JavaScript topluluğu içinde her köşede piyasaya sürülen tüm bu yeni trend teknolojilerle web uygulamaları oluşturma deneyiminizi. Bunun, yıllar içinde geliştirmeye karar verdiğiniz şey üzerinde etkisi olmuş olabilir.

JavaScript ekosisteminde, çoğunlukla web’deki uygulamalarla ilgili sürekli değişen bir ortamla çevrili olduğumuzda, masaüstü uygulamalarının girmeye değer olup olmadığını bile sorgulayabiliriz. A yığın akışı anketi 2019 için, dünya çapında geliştirici olan 90.0000 anket katılımcısının yaklaşık %21’ine kadar değişen iyi bir masaüstü geliştirici yüzdesi olduğunu ortaya koydu.

Başka bir deyişle, masaüstünde uygulama geliştirmek hala devam eden popüler bir seçimdir. JavaScript kullanarak ilk modern masaüstü uygulamanızı oluşturmaya nasıl başlayacağınızı merak ediyorsanız, umarım bu yazı kendi masaüstü yazılım uygulamanızı yazmaya başlamanıza yardımcı olur!

kullanacağız Elektron ana aracımız olarak. Biz de kurulum yapacağız Tepki kullanıcı arayüzlerimizi oluşturmaya başlamak için kullanacağız.

Yapacağımız ilk şey, kullanarak projemizi oluşturmak. oluştur-tepki-uygulaması tepki sağlamak için kullanılacak ve gibi bazı diğer yararlı araçlar Alay testleri çalıştırmak için. Bu eğitim için projemizi arayacağım electron-react-typescript-app:

Repo kopyanızı almak istiyorsanız, adresini ziyaret edin. bu bağlantı

npx create-react-app electron-react-typescript-app`

Yaratacak olan koşu elektron-tepki-typescript-app klasörü ve içinde listelenen gerekli bağımlılıkları yükleyin package.json.

Şimdi devam edelim ve ihtiyacımız olmayacak dosyaları temizleyelim. Dizinim şöyle göründü:

Ve işte bizim App.js bileşen:

import React from 'react'

function App() {
  return <h1>Our Electron App</h1>
}

export default App

Şimdi devam edeceğiz ve yükleyeceğiz electron bağımlılık olarak:

Ve sonra yükleyeceğiz elektron yapıcıdağıtıma hazır bir Electron uygulamasını paketlemek ve oluşturmak için eksiksiz bir çözüm otomatik güncelleme kutudan destek.

olarak yükleyin geliştirici bağımlılığı:

npm i -D electron-builder

Not: -D sadece bir takma addır --save-dev

Devam edin ve bir "build" mülk paket.json dan beri electron-builder bunu kullanacak:

{
  "name": "electron-react-typescript-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "build": {
    "appId": "some.id.ofyours",
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "category": "your.app.category.type",
      "iconUrl": "path-to-icon.png"
    },
    "mac": {
      "category": "your.app.category.type",
      "iconUrl": "path-to-icon.png"
    }
  },
  "dependencies": {
    "electron": "^6.0.12",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
     "electron": "electron .",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron-builder": "^21.2.0"
  }
}

Mevcut tüm seçenekleri okuyabilirsiniz burada.

Not: kullanılarak oluşturulan projeler için oluştur-tepki-uygulamasısen zorunlu değerini şuna koy "homepage" mülk "./" CRA’dan beri, yollar uygulama genelinde doğru bir şekilde çözülsün. uygulamamızın sunucu kökünde barındırıldığını varsayarak dosyalarımızı otomatik olarak üretir. Bu, oluşturulan index.html file, oluşturduktan sonra varlıkları doğru şekilde yükler. Bunun ne anlama geldiğinden emin değilseniz, bana güvenin ve yapın :).

koştuğunda npm run electron şöyle bir hata verecektir:

elektron-başlangıç ​​hatası.jpg

O yüzden elektron okuyacak bir dosya bulamıyor. bir oluşturabiliriz electron.js kök dizinde bir dosya veya bir başlangıç ​​​​komut dosyası oluşturabiliriz. src daha sezgisel olan dizin. bir oluşturalım start.js dosya kaynak dizini oluşturun ve bir BrowserWindow’u bazı sabit boyutlarla başlatmak için bir kod yazın:

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  mainWindow.loadURL(`file://${path.join(__dirname, '../public/index.html')}`)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Bunu yaptıktan sonra yeni bir özellik eklemeliyiz. package.json bu dosyaya doğru işaret ediyor, böylece çalışıyor npm run electron programı yüklemek için rehberlik edecek start.js:

{
  "name": "electron-react-typescript-app",
  "version": "0.1.0",
  "private": true,
  "main": "src/start.js",
  "build": {
    "appId": "some.id.ofyours",
    "directories": {
      "buildResources": "assets"
    },

Koşma npm run electron şimdi yükleyen bir pencere açacak loading.html dosya:

npm çalışan elektron

Harika! Şimdi işler iyi gitmeye başladı 🙂

Şimdi devam edelim ve koşalım npm start. Komut dosyası şimdi tepki kodumuzun bir web sayfasını başarıyla yükleyecektir!

npm başlangıç

Ama bir dakika… bu olumsuzluk ne arıyoruz. Tepki kodumuzu görmemiz gerekiyor elektron penceresindeneden bunun yerine tarayıcıda görüyoruz?

…çünkü temelde farklı şeyler yapan iki farklı sürecimiz var. hayır diğer sürecin var olduğu fikri!

Yani yapmamız gereken şey, web sayfalarını URL’ye göre yükleyebilen bir API’ye sahip olduğu için elektronu web sunucusuna yönlendirmek (API yöntemi hakkında bilgi edinin). burada). Bu, bir masaüstü uygulaması oluşturduğumuz için tarayıcıyı artık kullanmayacağımız ve elektronun, URL’ler vererek her penceresine içerik yükleyebileceği anlamına geliyor. Bunun yerine elektron pencerelerini kullanabiliriz (node.js modüllerine ve yerel dosya sistemine erişimi olacak).

Bunu yapabilmek için, uygulamanın çalıştırılıp çalıştırılmadığını tespit etmek için kullanışlı bir paket yükleyeceğiz. gelişim veya üretme modu. Uygulama geliştirme modunda çalışıyorsa, web sunucusunu kullanacağız. Uygulama değilse, bu, dosyaları kullanarak oluşturduğumuz anlamına gelir. electron-builder uygulama içeriğini bazı yürütülebilir dosyalar aracılığıyla yüklediğimiz yer. Elektron oluşturucu bunun içindi.

Devam edin ve yükleyin electron-is-dev:

Şimdi devam edeceğiz ve bunu elektron betiğimizde isteyeceğiz ve şu şekilde kullanacağız:

const electron = require('electron')
const app = electron.app
const path = require('path')
const isDev = require('electron-is-dev')
const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`,
  )

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Bakılması gereken önemli satırlar şunlardır:

mainWindow.loadURL(
  isDev
    ? 'http://localhost:3000'
    : `file://${path.join(__dirname, '../build/index.html')}`,
)

Şimdi doğrudan yüklemek yerine index.html dosyasında, geliştirme modunda CRA’da bulunan web sunucusunu kullanmak veya yüklemeye devam etmek için bir koşul uyguladık. index.html dosya (ortam olumsuzluk gelişim).

Artık yolu kullanmadığımızı da fark etmiş olabilirsiniz. ../public/indx.html ve bunun yerine değiştirdi ../build/index.html. Bunun nedeni, CRA’nın dahili olarak olumsuzluk içindeki dosyaları işle public dosya, ama bunun yerine onları hareket ettirir el değmemiş için build dosya. Beri build klasör sonunda oluşturulan tüm dosyalara sahip olacak, onu işaret etmek zorunda kaldık.

Şimdi devam et ve koş npm starto zaman koş npm run electron.

Şimdi şunu görmelisiniz:

oluştur-tepki-app ile elektron

Yaşasın!

CRA’dan doğrudan elektron penceresine, node.js modülleri ve yerel dosya sistemi ortamı ile birlikte “” sayfası. Bu ne kadar düzgün?

Ah evet, bir tarayıcı sekmesinin açıldığını görüyorsanız, ayarlamayı deneyin. BROWSER=none senin için package.json komut dosyası şöyle:

"start": "cross-env BROWSER=none npm run react-start",

Şimdi, değişiklik yaptığımızda ana elektron sürecini yeniden başlatalım. start.jsçünkü şu anda web sayfası kullanıcı arayüzü için yalnızca çalışırken yeniden yüklemeyi etkinleştirdik.

Bunun için yükleyin electron-reload ve nodemon:

npm i -D electron-reload nodemon

değiştir npm run electron bunun için komut dosyası:

"electron": "cross-env NODE_ENV=dev nodemon --exec ""electron .""",

Ve sadece electron-reload paket start.js:

const electron = require('electron')
const app = electron.app
const path = require('path')
const isDev = require('electron-is-dev')
require('electron-reload')
const BrowserWindow = electron.BrowserWindow

Ve şimdi elektron penceresi, değişiklik yaptığınızda kendini yeniden başlatmalıdır. start.js.

Çözüm

Tebrikler, artık elektron kullanarak JavaScript’te bir tepki masaüstü uygulaması oluşturmayı biliyorsunuz! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.