如何从源(而非捆绑)运行Electron应用程序



我是Electron的新手,正在努力帮助维护开发人员已经离开的应用程序。resources/app文件夹(至少)由三部分组成:

  • app/lib/bundle.js,包含整个应用程序,捆绑并缩小。这就是应用程序运行的实际情况
  • 开发人员编写的所有代码的节点模块。它们在TypeScript中,并且在结构node_modules/@mainmodule/submodule/src/.../something.ts中。它们中的每一个还具有node_modules/@mainmodule/submodule/package.jsonnode_modules/@mainmodule/submodule/tsconfig.json
  • 最后,对于其中的每一个,都有一个相应的lib文件夹:node_modules/@mainmodule/submodule/src/.../something.js。lib文件夹具有与每个TypeScript相对应的Javascript,以及显示它们如何对应的map文件。这些Javascript文件被缩小并包含在实际运行的捆绑包中

源TypeScript相对清晰,我可以理解它的大部分内容。但要真正理解它,我需要在它上设置断点,并在调试器中运行它(例如VS Code)。然而,在运行应用程序时,Electron不会从TypeScript(在src中),甚至不会从单个Javascript(在lib中)运行,而是从bundle.js运行。Bundle.js是一个巨大的文件,除了被缩小之外,它太大了,甚至无法在我的编辑器中正确加载。

我的问题

我如何告诉Electron不是从bundle.js运行应用程序,而是从单个src/...tsTypeScript运行应用程序?如果没有,则从单个src/...jsJavaScript运行应用程序?

如果这不可能,那么在捆绑Electron应用程序时,在给定源的情况下,使用调试器的正确方法是什么?我有完整的源代码,但当我调用Electron时,它就用完了:我该如何更改它?

我是电子和节点的新手,所以如果我犯了一个基本错误,请澄清。


更新到目前为止的进展

我在深入了解来源方面取得了很大进展,但并不是一直做到这一点。

Electron应用程序从electron-main.js开始,它加载server.js和其他文件。这些都是源代码。

最终,它用以下代码创建了一个最小窗口:

<head>
...
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</head>

CCD_ 16随后被加载到窗口中。这些文件太大,无法读取(缩小),没有多大用处。但是,正如我所说,消息来源也都是可用的。

然而,bundle.map.js包含的是完整的:它包含sources, names, mappings, sourcesContent,原则上足以重建一切。此外,对于几乎所有的sources,相应的源文件都是可用的并且是显而易见的。

我想我需要把<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>换成includer.js,它:

  • 包括我可以找到匹配源文件的所有文件
  • 将sourcesContent用于其他任何内容

/迄今为止的进展

由于项目目前被设置为从捆绑包中运行东西,因此项目很可能只能从捆绑包运行东西,除非您更改配置(只有在您首先了解整体结构的情况下才能完成,您正试图从一开始就掌握它)。换句话说,查看事物如何互锁以及分析和更改应用程序中的逻辑的最可能方法是生成捆绑包。

通常,生成新捆绑包的过程将包含在项目根文件夹的package.json中

the-big-app/node_modules

那么你也许可以看看

the-big-app/package.json

看看其中包含的脚本。可能会有一些(非常一般的)行:

{
"name": "the-big-app",
"scripts": {
"lint": "eslint .",
"build": "webpack && tsc --build tsconfig.node.json",
"watch": "nodemon --exec npm run start -e ts,tsx,scss,html",
"run": "npx electron build/node/main.js",
"start": "npm run build && npm run run"
},

这些属性中的每一个都指向一个可运行的NPM脚本。您可能有一个build脚本——如果您有这样一个脚本并键入npm run build,那么它应该会生成一个新的bundle,然后可以执行它。如果没有build脚本,请环顾四周,看看其他哪些脚本可能会做一些有用的事情,并执行它们。(首先备份目录中现有的捆绑包和其他文件,以防万一。)

查看每个NPM脚本属性的值,这样您就可以进一步研究它们的作用,以及它们与将源代码转化为可运行的东西之间的关系。举个例子,上面,做

"build": "webpack && tsc --build tsconfig.node.json",

在我的应用程序中,会

(1) 运行Webpack为渲染器进程构建捆绑包

(2) 运行tsc将the-big-app/src/main-process/中的TypeScript代码编译为JavaScript,然后由Electron 执行

在你的package.json中寻找类似的东西,看看发生了什么,这将告诉你如何调整和调试它。

正如Electron的文档所说,浏览器代码可以通过开发工具进行调试。调试主进程比较困难——您可能需要使用inspect标志调用Electron等。

至于是否/如何直接从源TypeScript而不是从捆绑包中运行的问题,可以通过ts节点(2)对主进程执行此操作。我认为渲染器进程是不可能的;页面";需要看到一个普通的.js文件,就像任何网页一样——同样,不能直接运行TypeScript,就像普通浏览器和网页不能直接运行TypeScript一样。

为了补充上述答案,我有一个使用Webpack的Typescript React应用程序,您可以与之进行比较。您可以逐步完成主进程和渲染器进程的代码:

  • VSCode配置
  • Webpack代码

您还需要在启用源映射的情况下进行构建。完成后,您可以逐行遍历Typescript代码。