javascript - React-projekt i Visual Studio 2017

Jag vill utveckla en React-applikation i Visual Studio 2017 tillsammans med min .NET-applikation (i samma lösning).

Jag använder TypeScript, så jag vill ha en projekttyp där jag kan anpassa bygget (jag vill använda webpack för projektet, etc., så det vanliga Visual Studio TypeScript-bygget är inte tillräckligt).

Jag har installerat Node.js-utvecklingsverktygen men de tillåter mig bara att skapa Node.js-specifika projekt (som kör en Node.js-instans när de startas) och låter mig inte anpassa byggprocessen.

Vilken typ av projekt kommer att vara bäst för detta?

Svar #1

Jag gjorde detta nyligen och skulle rekommendera följande:

  1. Skapa ett "Blank" lösningsprojekt i Visual Studio 2017.
  2. Lägg till/skapa ditt .NET-projekt som du normalt skulle göra i Visual Studio.
  3. Skapa nu ditt React-projekt. Jag använde create-react-app från Facebook för att faktiskt generera mitt React-projekt. Detta har många riktigt bra inbyggda funktioner såsom Webpack, Jest (för testning), yarn (för pakethantering), etc. Dessa detaljer är dock "dolda" för dig så det genererade projektet ser mycket enklare ut. Om du behöver mer kontroll över bygg-/testprocessen kan du köra kommandot create-react-app eject. Observera att detta är en "enväg"-operation eftersom du inte kan sätta tillbaka filerna i create-react-app. Du kommer att behöva installera node och yarn separat, om det inte var uppenbart.

  4. Eftersom du också vill använda TypeScript bör du använda skriptet react-scripts-ts på följande sätt:

    create-react-app my-app --scripts-version=react-scripts-ts

    Microsoft har en bra genomgång här.

  5. Den svåra delen är att få det genererade React-projektet in i Visual Studio. Jag gjorde detta genom att installera modulen "Node.js-utveckling" från "Visual Studio Installer" som installeras med Visual Studio. Tyvärr verkar Microsoft ha tagit bort den tomma eller lediga TypeScript-projektmallen (se här).

  6. När Node.js-verktygen är installerade kan du skapa ett Node-baserat projekt i din lösning. Det finns flera att välja mellan under Arkiv -> Nytt -> Projekt... -> Mallar -> Andra Språk -> TypeScript i vänstermenyn. Jag valde "Blank Node.js Web Application".

  7. Efter det behöver du kopiera över React-projektfilerna som skapats av create-react-app till ditt Visual Studio-projekt. Jag tycker att det är enklare att skapa mapparna i Visual Studio så att de läggs till i projektfilen, sedan kopiera filerna till de genererade mapparna, och slutligen lägga till dem i projektmappen i Visual Studio.

  8. Vid denna tidpunkt kan du köra skripten i package.json-filen som lades till av create-react-app. Jag föredrar att köra dessa i kommandoraden, men du kan också köra dem i Visual Studio med hjälp av "Task Runner Explorer" av Mads Kristensen.

Svar #2

En annan möjlighet är att använda React-tillägget i Visual Studio Code. Det är inte exakt vad du frågade efter, men du får ett utseende och känsla som liknar Visual Studio och fullt React-stöd.

Relaterade artiklar