Express-Anwendung in Electron Verpackung
Zum einem Elektron in Ihrer App
npm install --save electron
Eine Datei index.html installieren, enthält Ihre Express-Anwendung
Wir Brauchen Sie eine Top-Level-Datei, die in unserer Express-Anwendung geladen wird. Wenn Sie kein Modulbündler wie Webpack verwenden, importieren Sie einfach alle HTML-, CS- und JS-Dateien, von denen Ihre App abhängig ist, in diese index.html-Datei.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QuickMap</title>
<link href='public/css/boostrap.min.css' rel='stylesheet'>
<link href='public/css/layout.css' rel='stylesheet'>
</head>
<body>
<div id='root' />
<script src='public/js/appBundle.js' type='text/javascript'></script>
<script src='public/js/bootstrap.min.js' type='text/javascript'></script>
<script src='public/js/jquery-3.1.1.min.js' type='text/javascript'></script>
</body>
</html>
Vergewissern Sie sich, dass diese Dateien index.html Importe alles, was Sie für Ihre Anwendung benötigen -i.e alle notwendigen HTML, CSS, JS und andere Dateien zu laufen. Denken Sie daran, alle externen Dateien aufzunehmen, die Ihre App benötigt, wie zum Beispiel jQuery, das wir im obigen Beispiel geladen haben.
Nebenbei bemerkt - Verpackung eine Electron-Anwendung, den Webpack verwendet
In diesem Beispiel unseres gesamtes Express-App von einem Webpack Bündel dargestellt wird, die durch index.html geladen wird.
Denken Sie daran, dass Sie Webpack nicht benötigen, um Express-Anwendungen mit Electron zu paketieren. Stellen Sie nur sicher, dass index.html in allen Dateien geladen wird, die Sie benötigen, um Ihre Express-Anwendung zu starten.
Wenn Sie Webpack verwenden, sollte Ihr Bundle in diese index.html-Datei importiert werden.
Hier ist eine Beispieldatei index.html, die das Webpack-Paket importiert, das unsere Express-App enthält.
nun die Elektron-Konfigurationsdatei in Ihrem Projekt root erstellen, die die index.html mit Ihrem Express App
Hier ist die Hauptdatei, das Elektron verwenden zu starten selbst laden. Eine elektronenbezogene Konfiguration und der Link zu unserer Express-App (durch den Import des Webpack-Bundles) sind hier enthalten.
Beachten Sie, dass die Datei unten in unserem Root-Projektverzeichnis enthalten ist und hauptsächlich aus dem Textbaustein der Electron-Kurzanleitung besteht, mit Ausnahme der oben erläuterten Zeile, die unsere index.html-Datei importiert, die die gesamte Anwendung lädt.
main.js
const {app, BrowserWindow} = require('electron')
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 win
function createWindow() {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed',() => {
// 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.
win = 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',() => {
// On macOS 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',() => {
// On macOS 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 (win === 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.
Die folgende Zeile lädt unsere index.html wir zuvor erstellt haben, die unsere Elektronen Instanz zum Eintrittspunkt unserer Anwendung verweist.
mainWindow.loadURL(`file://${__dirname}/index.html`)
Ändern Sie den Startskript in Ihrem package.json starten Elektron
"scripts": {
"start": "ENV=development electron .",
},
Wenn wir jetzt
npm start
Electron läuft automatisch suchen und die main.js laufen Datei in unserem Projekt root.