node.js - 如何在 electron 中运行 express？-6ren

node.js - 如何在 electron 中运行 express？

转载作者：搜寻专家更新时间：2023-10-31 22:47:16

64

4

我已经能够通过诸如

之类的存储库在 Electron 应用程序中成功运行 express

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

$ express myapp
$ cd myapp

$ npm install
renamed myapp to just app

现在我被困在需要配置 Electron main.js 文件或/和渲染 index.html 文件以链接到 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 包。

现在在您的项目根目录中创建 Electron 配置文件，加载包含您的 Express 应用程序的 index.html

这是 Electron 将用来启动自身的主要文件。此处包含所有与 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，它将我们的 Electron 实例指向我们应用程序的入口点。

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

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

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

现在当我们运行

npm start

Electron 将自动在我们的项目根目录中查找并运行 main.js 文件。

关于node.js - 如何在 electron 中运行 express？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39020525/

64

4

0

文章推荐： node.js - 错误 : Could not locate the bindings file. 已尝试:

文章推荐： css - 设计后使用 CSS 创建虚线对象

electron - Electron 打包程序和 Electron 生成器无法构建 Electron 应用程序
首先，我创建了一个标签，并使用electron-packager构建了我的应用程序: node_modules/.bin/electron-packager . MyApp --platform=wi
electron - Electron :如何从 Electron 加载的页面中提取变量以更新徽章值。
我正在寻找一种基于 Electron 加载页面中提供的信息来更新MAC应用程序的徽章值的方法。我在启动时使用main.js文件中的以下代码加载页面。 function createWindow ()
electron - 使用 Electron 构建器时如何将参数传递给 Electron ？
我正在使用 Electron 构建一个应用程序，并使用 Electron Builder 进行打包。当运行 Electron 时，我想通过这个command line argument: --enab
electron - 如何使用 Electron 应用程序打包非 Electron MSI文件？
我遇到一种情况，当用户安装我的 Electron 应用程序时，我实际上需要安装2个应用程序:我的应用程序+一个单独的Windows MSI，它将作为我的应用程序工件的一部分包含在内。我是Electr
electron - 使用 Electron 生成器打包应用程序后无法打开 Electron 应用程序
使用 Electron 生成器构建 Electron 应用程序后，我无法从dist文件夹中打开该应用程序。我确实更改了所有链接以使用path.join(__ dirname，“relative_pat
electron - 您是否需要访问目标操作系统才能对 Electron 签名 Electron 应用进行编码
我使用Linux，并正在制作要在Windows，Mac和Linux上分发的Electron App。我想要的是我的应用程序可以自我更新-但这需要代码签名。这是否意味着我需要同时购买Windows和M
electron - 在 Electron 中使用foreverjs会导致 Electron 应用重复出现在基座中
我在 Electron 应用主程序中使用foreverjs，如下所示: const forever = require("forever-monitor"); let child = forever.
electron - ejs-electron 不能与 Electron 锻造一起使用
在我在 Windows 10 上运行的 electron-forge 应用程序中，没有呈现 ejs 模板，尽管没有可见错误。我可以使用创建的应用程序重现该问题 electron-forge init
electron - 从打包的asar应用程序 Electron 访问extraFiles Electron 生成器
我有一个 Electron 应用程序，该应用程序可以完美运行到开发环境中，并且日志引擎可以写入文件(使用winston.js)。该项目的结构是这样的: 当我运行 Electron 构建器来打包我的应
electron - 用 Electron 锻造为窗口打包 Electron 应用程序后找不到节点模块
Electron 应用程序是使用 electron-forge webpack 模板初始化的，一切都适用于 macOS。使用运行开发版本时 Electron 锻造开始该应用程序在 Windows
electron - 如何使用 Electron 生成器将 Electron 应用发布到GitHub版本？
我正在尝试将我的 Electron 应用发布到GitHub版本，但无法正常工作。这就是我所拥有的:package.json .... "scripts": { "start": "elect
electron - Electron -找不到 Electron 生成器自动更新程序update.yml吗？
我现在使用electron-builder并设法达到事件监听器的设置和触发点，但是我认为我没有完全正确设置它，因为当我使用electron .打开应用程序时，出现以下错误: Checking for
electron - 使用 Electron 生成器构建 Electron 时如何排除文件？
我想要的不是排除未使用的文件，而是将使用过的文件包排除到.exe文件中我提供了一个像 config.json 这样的文件供用户编辑一些自定义配置，然后应用程序可以读取该文件来做一些事情。所以我不希望
electron - 如何在 Electron 应用程序中显示 Electron 环境的版本？
我想了解 Signal Desktop 或 Visual Studio Code 等 Electron 桌面应用程序正在使用哪个版本的 Electron。有没有简单的方法——比如在开发控制台中输入命令
electron - 如何使用 Electron/Electron 构建器创建释放 channel ？
我有一个Electron我想在其中引入并行发布 channel 的应用程序:stable、next(用于早期采用者)和dev(用于测试最新版本)。这些都会有一个分支，新功能首先出现在 dev 中，然
electron - 在 Electron 窗口内运行非 Electron 可执行文件
我是 Electron 新手，我想在主窗口中运行非 Electron 可执行文件。可以这样做吗？这是我的代码: mainWindow = new BrowserWindow({width: 860,
node.js - 使用带有 Electron 编译和 Electron 松鼠启动的 Electron 锻造初始化 Electron 应用程序时出错
我开始使用 GitHub 按需培训学习 Electron。当我执行以下命令时。系统抛出错误。 electron % electron-forge init electron-app ⚠ Could n
electron - Electron 预加载器脚本中的访问路径如何？
在我的 Electron 应用程序中，我使用“electron-json-storage”模块在本地存储一些设置数据。但是，为了访问这些数据，我必须先找到本地路径。为此，我正在使用 app.get
electron - Electron 应用程序数据库
最近开始接触 Electron 。任何人都可以帮助我选择数据库。似乎没有直接的选择。建议中型项目的数据库。最佳答案在 Electron 应用程序中，您可以使用您选择的数据库: https://g
electron - Electron 应用菜单的工作示例
我是Electron的新手，无法找到应用程序菜单的工作示例。尝试将Quick Start应用程序与Electron文档的Class: Menu页面中的示例结合使用时，似乎什么都没发生-更改label

首页

博学

6Ren·AI

商城

node.js - 如何在 electron 中运行 express？