问题描述
我正在尝试使用 Visual Studio(不是 VSCode)来创建一个简单的 Electron 应用程序.我是通过 Visual Studio (v1.1) 扩展的 Node.js 工具来实现的.我正在使用基本的快速启动应用程序，如果我通过 npm start 启动它可以正常工作，但如果我通过 Visual Studio 启动，我会在启动时收到以下错误:
'在第一行找不到模块'electron':const electron = require('electron');
我可以告诉 Visual Studio 在启动它的 node.js 调试器之前先启动 Electron 应用程序吗?有没有其他人让这个设置可以工作?
这是可能的:
在 Visual Studio 中创建一个空白的 Node.js JavaScript 控制台应用.我认为您需要安装最新版本的节点:我有 12.18.3.我正在使用 VS 2019 社区.
在创建的 package.json 中添加一个依赖部分并引用电子.我引用了 11.0.1 如下:
依赖":{电子":11.0.1"},这会在 npm 下的解决方案资源管理器中添加一个条目，因此实际上安装它，您可以右键单击/安装 npm 包(或启动一个命令提示符并执行 npm install).
从 electron-quick-start on GitHub 复制代码:在 Visual Studio 项目中创建 index.html 和 preload.js 文件，并将 GitHub 中的代码粘贴到其中.还将快速启动 main.js 的内容粘贴到 app.js 中.无需重命名.
转到控制台应用项目文件的属性.上面写着Node exe path:"的地方，把安装的electron.exe的路径放在子文件夹node_moduleselectrondistelectron.exe中.
在你的 app.js 中 createWindow 的第一行放置一个断点.
开始调试.它应该在断点处中断，如果继续，它将显示基本的电子应用程序.这是一个带有消息的电子窗口:例如'你好世界！我们正在使用 Node.js 12.18.3、Chromium 87.0.4280.60 和 Electron 11.0.1.'
这一切都很好，但它的有用程度取决于您真正希望 Visual Studio 为您做什么.它只会在主线程上中断，尽管您可以像往常一样使用 Chrome 开发工具调试渲染器线程.我发现节点工具应用程序有点限制.也许其他项目类型之一会更好.
此答案已于 2020 年 11 月更新，之前的答案已删除.请注意，像往常一样，在 npm 世界中，事情确实会随着时间的推移而中断:如果事情不适合您，请发表评论.
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:
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?
This is possible:
Create a blank Node.js JavaScript console app in Visual Studio. You need a recent version of node installed I think: I have 12.18.3. I'm using VS 2019 Community.
Add a dependencies section to the package.json that's created and reference electron. I referenced 11.0.1 as below:
"dependencies": { "electron": "11.0.1" },This puts an entry in Solution Explorer under npm, so to actuallyinstall it you can right-click/install npm package (or fire up acommand 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_moduleselectrondistelectron.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.18.3, Chromium 87.0.4280.60, and Electron 11.0.1.'
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.
This answer was updated November 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.
这篇关于使用带有 Node.js 工具的 Visual Studio(不是 VSCode)创建一个 Electron 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！