Partager via

Configuration d’Electron pour le développement d’API Windows

Ce guide vous guide tout au long de la configuration de votre environnement de développement Electron pour le développement d’API Windows. Vous allez installer les outils nécessaires, initialiser vos project et configurer les kits SDK Windows.

À la fin de ce guide, vous disposez d’une application Electron qui :

  • Appelle des API Windows modernes (SDK Windows et Windows App SDK)
  • Peut utiliser des compléments natifs avec des fonctionnalités IA (Phi Silicon ou WinML)
  • Exécutions avec l’identité d’application pour tester les API protégées
  • Peut être empaqueté en tant que MSIX signé pour la distribution

Prerequisites

  • Windows 11 (Copilot+ PC si vous utilisez Phi Silicon)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio avec la charge de travail Native Desktop - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Étape 1 : Créer une application Electron

Commencez par une nouvelle application Electron à l’aide d’Electron Forge. Si vous disposez d’une application existante, ignorez cette étape.

npm create electron-app@latest my-windows-app
cd my-windows-app

Vérifiez que l’application s’exécute :

npm start

Étape 2 : Installer winapp CLI

npm install --save-dev @microsoft/winappcli

Étape 3 : Initialiser le project pour le développement Windows

npx winapp init

Lorsque vous y êtes invité :

  • Nom du package : appuyez sur Entrée pour accepter la valeur par défaut (my-windows-app)
  • Publisher nom : appuyez sur Entrée pour accepter la valeur par défaut ou entrer votre nom
  • Version : appuyez sur Entrée pour accepter la version 1.0.0.0
  • Point d’entrée : appuyez sur Entrée pour accepter la valeur par défaut (my-windows-app.exe)
  • Kits de développement logiciel (SDK) d’installation : sélectionnez « Kits de développement logiciel (SDK) stables »

À quoi sert la commande winapp init ?

Cette commande configure tout ce dont vous avez besoin pour le développement Windows :

  1. Creates .winapp/ dossier contenant des en-têtes et des bibliothèques à partir du Kit de développement logiciel (SDK) Windows et du Windows App SDK
  2. Génère appxmanifest.xml - Manifeste d’application requis pour l’identité de l’application et l’empaquetage MSIX
  3. Créer Assets/ un dossier - Contient des icônes d’application et des ressources visuelles
  4. Crée winapp.yaml - Effectue le suivi des versions du SDK et de la configuration du projet
  5. Installs Windows App SDK runtime - Installer les composants runtime requis pour les API modernes
  6. Active le mode développeur dans Windows - Obligatoire pour le débogage

Note

Le .winapp/ dossier est automatiquement ajouté à .gitignore et ne doit pas être archivé dans la gestion de version.

Étape 4 : Ajouter une restauration à votre pipeline de build

Ajoutez un script postinstall à votre package.json pour vous assurer que les kits SDK Windows sont disponibles lorsque d’autres développeurs clonent votre project :

{
  "scripts": {
    "postinstall": "winapp restore && winapp node add-electron-debug-identity"
  }
}

Ce script s’exécute après npm install et :

  1. winapp restore - Télécharge et restaure tous les packages du Kit de développement logiciel (SDK) Windows
  2. winapp node add-electron-debug-identity - Enregistre votre application Electron avec l’identité de débogage

Pour les projets multiplateformes, créez scripts/postinstall.js:

if (process.platform === 'win32') {
  const { execSync } = require('child_process');
  try {
    execSync('npx winapp restore && npx winapp cert generate --if-exists skip && npx winapp node add-electron-debug-identity', {
      stdio: 'inherit'
    });
  } catch (error) {
    console.warn('Warning: Windows-specific setup failed.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

Ensuite, mettez à jour package.json:

{
  "scripts": {
    "postinstall": "node scripts/postinstall.js"
  }
}

Étape 5 : Compréhension de l’identité de débogage

Commande winapp node add-electron-debug-identity :

  1. Lit appxmanifest.xml afin d'obtenir les détails et les fonctionnalités de l'application
  2. electron.exe est enregistré dans votre node_modules avec une identité temporaire
  3. Vous permet de tester les API requises pour l’identité sans créer de package MSIX complet

Exécutez cette commande manuellement chaque fois que vous modifiez appxmanifest.xml ou des ressources liées :

npx winapp node add-electron-debug-identity

Testez votre configuration :

npm start

Note

Il existe un bogue Windows connu avec l’empaquetage d’applications Electron éparses qui peuvent provoquer des blocages ou des fenêtres vides. Ajoutez --no-sandbox à votre script de démarrage comme solution de contournement : "start": "electron-forge start -- --no-sandbox". Ce problème n’affecte pas l’empaquetage MSIX complet. Pour réinitialiser l’identifiant de débogage, exécutez npx winapp node clear-electron-debug-identity.

Étapes suivantes

Maintenant que votre environnement de développement est configuré, créez des compléments natifs et appelez des API Windows :

  • Last updated on