如何在电子内运行快递?

我已经能够成功地运行在电子应用程序通过存储库,如

https://github.com/theallmightyjohnmanning/electron-express

https://github.com/frankhale/electron-with-express

不过,由于他们强加的GNU通用公共许可证,我被build议不要这样做。 我正试图创build一个商业应用程序,将货币化。 因此,像麻省理工学院这样的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 

然后得到expression

 $ express myapp $ cd myapp $ npm install renamed myapp to just app 

现在我被困在我需要configuration电子main.js文件或/和渲染index.html文件链接到快速应用程序,并有运行,而不是index.html

任何帮助,将不胜感激。

我在Windows 10上运行。

在电子封装中的快速应用

首先在你的应用程序安装电子

 npm install --save electron 

创build一个包含您的快速应用程序的index.html文件

我们需要一个顶级文件,它将加载到我们的快速应用程序中。 如果您没有使用像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的电子应用程序

在这个例子中,我们的整个Express应用程序由一个由index.html加载的Webpack包代表。

请记住,您不需要使用Webpack将Express应用程序与Electron打包在一起。 只要确保index.html加载所有您需要的文件,将启动您的快速应用程序。

如果你正在使用Webpack,你的包应该被导入到这个index.html文件中。

这是一个示例index.html文件,它导入了包含我们的快速应用程序的webpack包。

现在在您的项目根目录下创build一个电子configuration文件,该文件加载了包含Express应用程序的index.html

这是电子将用来发射自己的主要文件。 铝电子相关的configuration和链接到我们的快递应用程序(通过导入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. 

以下代码加载我们之前创build的index.html,它将我们的电子实例指向我们的应用程序的入口点。

 mainWindow.loadURL(`file://${__dirname}/index.html`) 

更改package.json中的启动脚本以启动电子

  "scripts": { "start": "ENV=development electron .", }, 

现在当我们跑步

 npm start 

Electron会自动寻找并运行项目根目录下的main.js文件。