用 Electron 封装 Express 应用程序
首先在您的应用程序中安装电子
npm install --save electron
创建一个包含您的 Express 应用程序的 index.html 文件
我们需要一个将在我们的 Express 应用程序中加载的顶级文件。如果您没有使用像 Webpack 这样的模块捆绑器，那么只需将您的应用程序依赖的所有 html、cs 和 js 文件导入到此 index.html 文件中即可。
<!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>
确保此 index.html 文件导入应用程序运行所需的所有内容 - 即所有必需的 html、css、js 和其他文件。请记住包含您的应用程序需要的任何外部文件，例如我们在上面的示例中加载的 jQuery。
旁白 - 打包使用 Webpack 的 Electron 应用程序
在此示例中，我们的整个 Express 应用程序由一个 Webpack 包表示，该包由 index.html 加载。
请记住，您不需要使用 Webpack 来通过 Electron 打包 Express 应用程序。只需确保 index.html 加载启动 Express 应用程序所需的所有文件即可。
如果您使用 Webpack，您的包应该导入到此 index.html 文件中。
这是一个示例 index.html 文件，它导入包含我们的 Express 应用程序的 webpack 包。
现在在项目根目录中创建电子配置文件，该文件加载包含 Express 应用程序的 index.html
这是电子用来启动自身的主文件。此处包含与电子相关的配置和我们的 Express 应用程序的链接（通过导入 Webpack 包）。
请注意，下面的文件属于我们的根项目目录，主要由 Electron 快速入门指南中的样板文件组成，但上面解释的导入加载整个应用程序的 index.html 文件的行除外。
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.
以下行加载我们之前创建的index.html，它将我们的电子实例指向应用程序的入口点。
mainWindow.loadURL(`file://${__dirname}/index.html`)
更改 package.json 中的启动脚本以启动 Electron
"scripts": {
"start": "ENV=development electron .",
},
现在当我们跑步时
npm start
Electron 会自动在我们的项目根目录中查找并运行 main.js 文件。
