Joh*_*ohn 5 node.js npm express electron
我已经能够通过诸如的存储库在电子应用程序中成功运行express
https://github.com/theallmightyjohnmanning/electron-express
https://github.com/frankhale/electron-with-express
但是,由于他们施加的GNU通用公共许可证,我被告知不要这样做.我正在尝试创建一个可以货币化的商业应用.因此,像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 封装 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 文件。
| 归档时间： |
|
| 查看次数： |
11544 次 |
| 最近记录： |