web-dev-qa-db-fra.com

Création d'une application Electron à l'aide de Visual Studio (pas VSCode) avec les outils Node.js

J'essaie d'utiliser Visual Studio (pas VSCode) pour créer une application Electron simple. Je le fais via les outils Node.js pour l'extension Visual Studio (v1.1). J'utilise l'application de démarrage rapide de base qui fonctionne bien si je lance via npm start, mais si je lance via Visual Studio, j'obtiens l'erreur suivante au démarrage:

'Impossible de trouver le module' électron 'sur la première ligne:
const electron = require('electron');

Puis-je dire à Visual Studio de lancer l'application Electron avant de démarrer son débogueur node.js? Quelqu'un d'autre a-t-il fait en sorte que cette configuration fonctionne?

node.jsvisual-studioelectron
19
Mike Oliver

C'est possible. Essayez de faire ce qui suit:

  • Créez une application console Node.js JavaScript vide dans Visual Studio. Vous avez besoin d'une version récente du nœud installée je pense: j'ai 5.6.0. J'utilise VS 2015.

  • Ajoutez une section de dépendances au package.json créé et référencez l'électron. J'ai référencé 0.36.2 comme ci-dessous car c'est la version que j'utilise:

    "dependencies": {"electron-prebuilt": "0.36.2"},

  • Cela place une entrée dans l'Explorateur de solutions sous npm, donc pour l'installer, vous pouvez cliquer avec le bouton droit/installer le package npm (ou lancer une invite de commande et faire l'installation de npm).
  • Copiez le code de l'électron-quick-start sur GitHub: créez un index.html identique à celui sur GitHub, et collez le contenu principal.js de démarrage rapide dans app.js. Il n'est pas nécessaire de le renommer.
  • Accédez aux propriétés du fichier de projet de l'application console. Où il est indiqué "Node exe path:" mettez le chemin vers electron.exe qui a été installé, qui se trouve dans le sous-dossier node_modules\electron-prebuilt\dist\electron.exe.
  • Mettez un point d'arrêt sur la première ligne de createWindow dans votre app.js.
  • Commencez dans le débogage: il s'arrêtera au point d'arrêt et si vous continuez, il affichera l'application électronique de base.

Tout cela est bien beau, mais son utilité dépend de ce que vous voulez vraiment que Visual Studio fasse pour vous. Il ne se cassera que sur le thread principal, bien que vous puissiez déboguer les threads de rendu en utilisant les outils de développement Chrome comme d'habitude. Je trouve les applications des outils de nœud un peu limitantes. Peut-être l'un des autres types de projets serait mieux.

Edit May 2017 : Cela fonctionne toujours avec Visual Studio 2017 et electron 1.6.6 et le courant electron-quick-start , ainsi que propre code de démarrage rapide d'Electron . Vous pouvez maintenant installer 'electron' au lieu de 'electron-prebuilt' ("dépendances": {"electron": "1.6.6"},).

Edit novembre 2017 : Cette approche a cessé de fonctionner avec l'électron 1.7.x et versions ultérieures. Il fonctionne toujours dans les versions électroniques 1.6.x, qui sont toujours en cours de libération. Dans les versions 1.7.x et ultérieures, vous pouvez suivre les étapes ci-dessus, mais Visual Studio ne s'arrête pas immédiatement lorsque vous démarrez dans le débogage. Au lieu de cela, vous devrez en outre:

  • Ajoutez "--inspect-brk" sous "Options Node.exe dans les propriétés du projet.
  • Démarrer dans le débogage
  • Dans Visual Studio do Debug/Attach to Process, attachez-vous au processus Webkit Websocket ' http://127.0.0.1:5858 '
  • Le code devrait casser et vous pouvez continuer.

Plus de détails et d'images sont dans un autre réponse sur Stack Overflow .

43
Rich N