使用 Visual Studio（不是 VSCode）和 Node.js 工具创建一个 Electron 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35416172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating an Electron app using Visual Studio (not VSCode) w/ Node.js tools
提问by Mike Oliver
I'm trying to use Visual Studio (not VSCode) to create a simple Electron app. I'm doing so via the Node.js tools for Visual Studio (v1.1) extension. I'm using the basic quick start app which works fine if I launch via npm start, but if I launch via Visual Studio, I get the following error on start up:
我正在尝试使用 Visual Studio（而不是 VSCode）来创建一个简单的 Electron 应用程序。我是通过 Visual Studio (v1.1) 扩展的 Node.js 工具来实现的。我正在使用基本的快速启动应用程序，如果我通过 npm start 启动它可以正常工作，但是如果我通过 Visual Studio 启动，我在启动时收到以下错误：
'Cannot find module 'electron' on the first line:
const electron = require('electron');
'在第一行找不到模块'电子'：
const electron = require('electron');
Can I tell Visual Studio to launch the Electron app first before starting it's node.js debugger? Has anyone else gotten this set up to work at all?
我可以告诉 Visual Studio 在启动它的 node.js 调试器之前先启动 Electron 应用程序吗？有没有其他人让这个设置工作？
回答by Rich N
This is possible. Try doing what's below:
这个有可能。尝试执行以下操作：
- Create a blank Node.js JavaScript console app in Visual Studio. You need a recent version of node installed I think: I have 12.15.0. I'm using VS 2019 Community.
Add a dependencies section to the package.json that's created and reference electron. I referenced 8.0.0 as below:
"dependencies": { "electron": "8.0.0" },- This puts an entry in Solution Explorer under npm, so to actually install it you can right-click/install npm package (or fire up a command prompt and do npm install).
- Copy the code from the electron-quick-start on GitHub: create index.html AND preload.js files in your Visual Studio project, and paste the code from GitHub into them. Also paste the quick start main.js contents into app.js. There's no need to rename it.
- Go to properties of the console app project file. Where it says 'Node exe path:' put the path to electron.exe that was installed, which is in subfolder node_modules\electron\dist\electron.exe.
- Put a breakpoint on the first line of createWindow in your app.js.
- Start in debug. It should break at the breakpoint and if you continue it will show the basic electron app. This is an Electron window with a message in it: e.g. 'Hello World! We are using Node.js 12.13.0, Chromium 80.0.3987.86, and Electron 8.0.0.'
- 在 Visual Studio 中创建一个空白的 Node.js JavaScript 控制台应用程序。我认为您需要安装最新版本的节点：我有 12.15.0。我正在使用 VS 2019 社区。
向创建并引用电子的 package.json 添加一个依赖项部分。我引用了 8.0.0 如下：
"dependencies": { "electron": "8.0.0" },- 这会在 npm 下的解决方案资源管理器中放置一个条目，因此要实际安装它，您可以右键单击/安装 npm 包（或启动命令提示符并执行 npm install）。
- 从GitHub 上的电子快速入门复制代码：在 Visual Studio 项目中创建 index.html 和 preload.js 文件，并将代码从 GitHub 粘贴到其中。还将快速入门 main.js 内容粘贴到 app.js 中。没有必要重命名它。
- 转到控制台应用程序项目文件的属性。在它说“节点 exe 路径：”的地方放置已安装的 electron.exe 的路径，该路径位于子文件夹 node_modules\electron\dist\electron.exe 中。
- 在 app.js 中 createWindow 的第一行放置一个断点。
- 从调试开始。它应该在断点处中断，如果继续，它将显示基本的电子应用程序。这是一个带有消息的 Electron 窗口：例如“Hello World！我们使用的是 Node.js 12.13.0、Chromium 80.0.3987.86 和 Electron 8.0.0。
This is all well and good, but how useful it is depends on what you really want Visual Studio to do for you. It will only break on the main thread, although you can debug the renderer threads using the Chrome dev tools as usual. I find the node tools apps a little limiting. Maybe one of the other project types would be better.
这一切都很好，但它的有用程度取决于您真正希望 Visual Studio 为您做什么。它只会在主线程上中断，尽管您可以像往常一样使用 Chrome 开发工具调试渲染器线程。我发现节点工具应用程序有点限制。也许其他项目类型之一会更好。
This answer was updated February 2020, and previous answers removed. Note that as usual in npm world things do tend to break over time: please make a comment if things aren't working for you.
此答案已于 2020 年 2 月更新，之前的答案已删除。请注意，在 npm 世界中，事情确实会随着时间的推移而中断：如果事情不适合您，请发表评论。
