如何在电子中运行快递？
Posted
技术标签:
【中文标题】如何在电子中运行快递？【英文标题】：How to run express within electron? 【发布时间】：2016-12-25 12:31:25 【问题描述】：我已经能够通过诸如
之类的存储库在电子应用程序中成功运行 expresshttps://github.com/theallmightyjohnmanning/electron-express
https://github.com/frankhale/electron-with-express
但是，由于他们强制执行 GNU GENERAL PUBLIC LICENSE，我被建议不要这样做。我正在尝试创建一个可以获利的商业应用程序。因此，像 MIT 这样的 liscene 可能会做，但不确定 GNU。
无论如何，我一直在尝试遵循他的程序： https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d
但是遇到了一些问题。 这是我到目前为止所做的。
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start
那就去快递
$ express myapp
$ cd myapp
$ npm install
renamed myapp to just app
现在我被困在需要配置电子main.js 文件或/和渲染index.html 文件以链接到快速应用程序并运行该应用程序而不是index.html
任何帮助将不胜感激。
我在 Windows 10 上运行。
【问题讨论】：
electron-with-express 前几天是relicensed to MIT
【参考方案1】：
在 Electron 中打包 Express 应用程序
首先在您的应用中安装电子
npm install --save electron
创建一个 index.html 文件，其中包含您的 express 应用程序
我们需要一个将加载到我们的 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 应用程序由一个由 index.html 加载的 Webpack 包表示。
请记住，您不需要使用 Webpack 来使用 Electron 打包 Express 应用程序。只需确保将 index.html 加载到启动 express 应用程序所需的所有文件中即可。
如果你使用 Webpack，你的包应该被导入到这个 index.html 文件中。
这是一个示例 index.html 文件，它导入包含我们的 express 应用程序的 webpack 包。
现在在您的项目根目录中创建电子配置文件，该文件加载包含您的 Express 应用程序的 index.html
这是 electron 用于启动自身的主文件。此处包含 Al electron 相关配置和我们的 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 文件。
【讨论】：
快递员在哪里？以上是关于如何在电子中运行快递？的主要内容，如果未能解决你的问题，请参考以下文章