如何在electron中运行表达?
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。
总之,我一直在尝试按照他的程序进行:
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
文件 or/and 渲染 index.html
文件到 link 到 express 应用程序的部分,并且有 运行 而不是 index.html
如有任何帮助,我们将不胜感激。
我 运行宁 windows 10.
在 Electron 中打包 Express 应用程序
首先在你的应用中安装 electron
npm install --save electron
创建一个包含您的快速应用程序的 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 的 Electron 应用程序
在此示例中,我们的整个 Express 应用程序由 index.html 加载的 Webpack 包表示。
请记住,您不需要使用 Webpack 来使用 Electron 打包 Express 应用程序。只需确保 index.html 加载启动 Express 应用程序所需的所有文件即可。
如果您使用的是 Webpack,您的包应该导入到这个 index.html 文件中。
这是一个示例 index.html 文件,它导入了包含我们的 Express 应用程序的 webpack 包。
现在在您的项目根目录中创建电子配置文件,加载包含您的 Express 应用程序的 index.html
这是电子将用来启动自身的主要文件。 Al electron 相关配置和我们的 express 应用程序(通过导入 Webpack 包)的 link 包含在这里。
请注意,下面的文件属于我们的根项目目录,主要由 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 文件。
我已经能够通过
等存储库在电子应用程序中成功 运行 表达https://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
文件 or/and 渲染 index.html
文件到 link 到 express 应用程序的部分,并且有 运行 而不是 index.html
如有任何帮助,我们将不胜感激。
我 运行宁 windows 10.
在 Electron 中打包 Express 应用程序
首先在你的应用中安装 electron
npm install --save electron
创建一个包含您的快速应用程序的 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 的 Electron 应用程序
在此示例中,我们的整个 Express 应用程序由 index.html 加载的 Webpack 包表示。
请记住,您不需要使用 Webpack 来使用 Electron 打包 Express 应用程序。只需确保 index.html 加载启动 Express 应用程序所需的所有文件即可。
如果您使用的是 Webpack,您的包应该导入到这个 index.html 文件中。
这是一个示例 index.html 文件,它导入了包含我们的 Express 应用程序的 webpack 包。
现在在您的项目根目录中创建电子配置文件,加载包含您的 Express 应用程序的 index.html
这是电子将用来启动自身的主要文件。 Al electron 相关配置和我们的 express 应用程序(通过导入 Webpack 包)的 link 包含在这里。
请注意,下面的文件属于我们的根项目目录,主要由 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 文件。