Konfigurera utvecklingsmiljön

Den här guiden beskriver hur du konfigurerar din Electron-utvecklingsmiljö för Utveckling av Windows API. Du installerar nödvändiga verktyg, initierar dina project och konfigurerar Windows SDK:er.

Förutsättningar

Kontrollera att du har följande innan du börjar:

• Windows 11
• Node.js - winget install OpenJS.NodeJS --source winget
• .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
• Visual Studio med den interna skrivbordsarbetsbelastningen - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Steg 1: Skapa en ny elektronapp

Vi börjar med en ny Electron-app med hjälp av Electron Forge, som ger utmärkt verktygs- och paketeringsstöd. Om du startar från en befintlig app kan du hoppa över det här steget.

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

När du uppmanas av Electron Forge:

• Bundler: Välj Ingen (rekommenderas – interna tillägg fungerar utan extra konfiguration)
• Språk: Välj JavaScript (den här guiden använder JS; TypeScript fungerar också)
• Elektronversion: Välj senaste
• Initiera git: Din inställning

Kontrollera att appen körs:

npm start

Du ska se standardfönstret för Electron Forge. Stäng den och lägg till Windows funktioner!

Steg 2: Installera winapp CLI

Electron-arbetsflödet kräver npm-paketet (@microsoft/winappcli) i stället för det fristående CLI som installerats från winget. NPM-paketet innehåller Node.js-specifika hjälpverktyg (som add-electron-debug-identity och create-addon) som inte är tillgängliga i det interna CLI. Om du redan har winapp installerat från winget går det bra – npm-paketet lägger till Node.js-specifika verktyg som ett projektberoende och står inte i konflikt med systeminstallationen.

npm install --save-dev @microsoft/winappcli

Steg 3: Initiera projektet för Windows-utveckling

Kommandot winapp init konfigurerar allt du behöver på en och samma plats: appmanifest, tillgångar och SDK:er.

Kör följande kommando och följ anvisningarna:

npx winapp init .

När du uppmanas att göra det:

• Paketnamn: Tryck på Enter för att acceptera standardvärdet (my-windows-app)
• Utgivarens namn: Tryck på Enter för att acceptera standardvärdet eller ange ditt namn
• Version: Tryck på Retur för att acceptera 1.0.0.0
• Startpunkt: Tryck på Retur för att acceptera standardinställningen (my-windows-app.exe)
• Konfigurera SDK:er: Välj "Stabila SDK:er"

Vad gör winapp init ?

Det här kommandot konfigurerar allt du behöver för Windows-utveckling:

1. Skapar .winapp/ mapp som innehåller:

   • Rubriker och bibliotek från Windows SDK
   • Rubriker och bibliotek från Windows App SDK
   • NuGet-paket med nödvändiga binärfiler

2. Genererar Package.appxmanifest – Appmanifestet som krävs för appidentitet och MSIX-paketering

3. Skapar Assets/ mapp – Innehåller appikoner och visuella tillgångar för din app

4. Skapar winapp.yaml – Spårar SDK-versioner och projektkonfiguration

5. Installerar Windows App SDK runtime – Nödvändiga körningskomponenter för moderna API:er

6. Enables Developer Mode i Windows – krävs för felsökning av vårt program

Du kan öppna Package.appxmanifest för att ytterligare anpassa egenskaper som visningsnamn, utgivare och funktioner.

Steg 4: Lägg till återställning i bygg-pipelinen

För att säkerställa att Windows SDK:er är tillgängliga när andra utvecklare klonar projektet eller i CI/CD-pipelines lägger du till ett postinstall-skript i din package.json:

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

Det här skriptet körs automatiskt efter npm install och gör två saker:

1. winapp restore – Laddar ned och återställer alla Windows SDK-paket till mappen .winapp/
2. winapp node add-electron-debug-identity – Registrerar din Electron-app med felsökningsidentitet (mer information om detta i nästa steg)

Kör nu npm install för att utlösa postinstall-skriptet och konfigurera den Windows miljön:

npm install

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. If you are not developing Windows features, you can ignore this.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

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

Steg 5: Förstå felsökningsidentitet

Steg 4, där du körde npm install, utlöste skriptet postinstall, vilket körde winapp node add-electron-debug-identity. Detta ger din app en tillfällig felsökningsidentitet så att du kan testa Windows API:er som kräver appidentitet under utvecklingen.

Vad gör felsökning av identitet?

Det här kommandot:

1. Läser din Package.appxmanifest för att hämta appinformation och funktioner
2. electron.exe Registrerar sig i din node_modules med en tillfällig identitet
3. Gör att du kan testa api:er som krävs för identitet utan att skapa ett fullständigt MSIX-paket

Felsökningsidentiteten tillämpades automatiskt när du körde npm install i steg 4. Framöver kommer den att tillämpas igen när någon kör npm install.

När du ska uppdatera felsökningsidentiteten manuellt

Du måste köra det här kommandot manuellt när du ändrar Package.appxmanifest (ändra funktioner, identitet eller egenskaper) eller någon av de länkade tillgångarna (ikoner, mcp.jsonosv.)

npx winapp node add-electron-debug-identity

Testa din konfiguration

Nu kan du testa din Electron-app med felsökningsidentiteten tillämpad:

npm start

Du bör se ett skrivbordsprogramfönster öppet (inte en webbläsarflik) – så här körs Electron-appar.

{
  "scripts": {
    "start": "electron-forge start -- --no-sandbox"
  }
}

npx winapp node clear-electron-debug-identity

Nästa steg

Nu när utvecklingsmiljön har konfigurerats är du redo att skapa interna tillägg och anropa Windows API:er:

• Skapa ett Phi Silica-tillägg – Lär dig hur du skapar ett C#-tillägg som anropar Phi Silica AI API
• Skapa ett WinML-tillägg – Lär dig hur du skapar ett C#-tillägg som använder Windows strojové učenie
• Paketering för distribution – Skapa ett MSIX-paket för distribution

Eller gå tillbaka till översikten Komma igång.