如何在电子中运行快递? [英] How to run express within electron?
问题描述
我已经能够通过诸如
https://github.com/theallmightyjohnmanning/electron-express
https://github.com/frankhale/electron-with-express
但是，由于他们强制执行 GNU GENERAL PUBLIC LICENSE，我被建议不要这样做.我正在尝试创建一个可以获利的商业应用程序.因此，像 MIT 这样的 liscene 可能会做，但不确定 GNU.
However, I was advised not to do so due to the GNU GENERAL PUBLIC LICENSE that they impose. I am trying to create a commercial app that will monetize. Hence, a liscene like MIT might do, but not sure about GNU.
无论如何，我一直在尝试遵循他的程序:https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d
Anyhow, I have been trying to follow his procedure: https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d
但是遇到了一些问题.这是我到目前为止所做的.
But is running into some issues. Heres what I have done so far.
# 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 文件以链接到 express 的部分应用程序并让它运行而不是 index.html
and now I am stuck at the part where i need to configure the electron main.js file or/and the render index.html file to link to the express app and have that run instead of the index.html
任何帮助将不胜感激.
我在 Windows 10 上运行.
I am running on windows 10.
推荐答案
在 Electron 中打包 Express 应用程序
首先在您的应用中安装电子
Firstly install electron in your app
npm install --save electron
创建一个包含您的 express 应用程序的 index.html 文件
我们需要一个将加载到我们的 express 应用程序中的顶级文件.如果你没有使用像 Webpack 这样的模块打包器，那么只需将你的应用依赖的所有 html、cs 和 js 文件导入到这个 index.html 文件中.
We need a top level file which will load in our express application. If you are not using a module bundler like Webpack then simply import all the html, cs and js files that your app is dependent on into this index.html file.
<!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.
Make sure that this index.html files imports everything you need for your app to run -i.e all the necessary html, css, js and other files. Remember to include any external files that your app needs such as jQuery which we loaded in the example above.
旁白 - 打包使用 Webpack 的 Electron 应用
在这个例子中，我们的整个 Express 应用程序由一个由 index.html 加载的 Webpack 包表示.
In this example our entire Express app is represented by a Webpack bundle which is loaded by index.html.
请记住，您不需要使用 Webpack 来使用 Electron 打包 Express 应用程序.只需确保将 index.html 加载到启动 express 应用程序所需的所有文件中即可.
如果你使用的是 Webpack，你的包应该被导入到这个 index.html 文件中.
If you are using Webpack your bundle should be imported in this index.html file.
这是一个示例 index.html 文件，它导入包含我们的 express 应用程序的 webpack 包.
Here is an example index.html file that imports the webpack bundle which contains our express app.
现在在您的项目根目录中创建电子配置文件，该文件加载包含您的 Express 应用程序的 index.html
这是 electron 用于启动自身的主文件.Al electron 相关配置和我们的 express 应用的链接(通过导入 Webpack 包)包含在这里.
Here is the main file that electron will use to launch itself. Al electron related configuration and the link to our express app (through importing the Webpack bundle) is contained here.
请注意，下面的文件属于我们的项目根目录，主要由 Electron 快速入门指南中的样板组成，但上面解释的那一行除外，它导入了加载整个应用程序的 index.html 文件.
Note the file below belongs in our root project directory and is comprised mainly of boilerplate from the Electron quick start guide with the exception of the line explained above that imports our index.html file which loads the entire application.
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，它将电子实例指向应用程序的入口点.
The following line loads our index.html we created earlier which points our electron instance to the entry point of our application.
mainWindow.loadURL(`file://${__dirname}/index.html`)
更改 package.json 中的启动脚本以启动 electron
"scripts": {
"start": "ENV=development electron .",
},
现在当我们运行时
npm start
Electron 会自动在我们的项目根目录中查找并运行 main.js 文件.
Electron will automatically look for and run the main.js file in our project root.
这篇关于如何在电子中运行快递?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
