tutorial - visual studio javascript



Reagieren Sie Projekt in Visual Studio 2017 (2)

Ich möchte eine React-Anwendung in Visual Studio 2017 zusammen mit meiner .NET-Anwendung (in derselben Lösung) entwickeln.

Da ich TypeScript verwende, möchte ich einen Projekttyp, in dem ich den Build anpassen kann (ich möchte das Projekt per Webpack usw., sodass der standardmäßige Visual Studio TypeScript-Build nicht ausreicht).

Ich habe die Entwicklertools von node.js installiert, aber sie ermöglichen mir nur das Erstellen von node.js-spezifischen Projekten (die beim Start eine node.js-Instanz ausführen) und lassen mich den Erstellungsprozess nicht anpassen.

Welcher Projekttyp ist dafür am besten geeignet?


Answer #1

Eine andere Möglichkeit besteht darin, die React-Erweiterung in Visual Studio Code zu verwenden . Das ist nicht genau das, wonach Sie gefragt haben, aber Sie erhalten ein ähnliches Erscheinungsbild wie in Visual Studio und volle React-Unterstützung.


Answer #2

Ich habe dies kürzlich getan und würde Folgendes empfehlen:

  1. Erstellen Sie ein "Blank" -Lösungsprojekt in Visual Studio 2017.
  2. Fügen Sie Ihr .NET-Projekt wie gewohnt in Visual Studio hinzu bzw. erstellen Sie es.
  3. Erstellen Sie nun Ihr React-Projekt. Ich habe die create-react-app von Facebook verwendet, um mein React-Projekt zu generieren. Dies hat eine Menge wirklich gut eingebauter Funktionen wie Webpack, Jest (zum Testen), Garn (zum Paketmanagement) usw. Diese Details sind Ihnen jedoch "verborgen", so dass das generierte Projekt viel einfacher aussieht. Wenn Sie mehr Kontrolle über den Build- / Testprozess benötigen, können Sie den Befehl create-react-app eject ausführen. Beachten Sie, dass dies eine "Einweg" -Operation ist, da Sie die Dateien nicht wieder in die create-react-app . Sie müssen node und yarn separat installieren, wenn dies nicht offensichtlich war.
  4. Da Sie auch TypeScript verwenden möchten, sollten Sie das Skript react-scripts-ts :

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

    Microsoft hat hier einen guten Überblick.

  5. Der knifflige Teil ist das Abrufen des generierten React-Projekts in Visual Studio. Ich habe dazu das Modul "Node.js development" aus dem "Visual Studio Installer" installiert, das mit Visual Studio installiert wird. Leider scheint Microsoft die leere oder leere TypeScript-Projektvorlage entfernt zu haben (siehe here ).

  6. Sobald die Node.js-Tools installiert sind, können Sie ein knotenbasiertes Projekt in Ihrer Lösung erstellen. Unter Datei -> Neu -> Projekt ... -> Vorlagen -> Andere Sprachen -> Linke TypeScript-Menünavigation stehen mehrere zur Auswahl. Ich habe "Blank Node.js Web Application" gewählt.

  7. Danach müssen Sie die von create-react-app erstellten React-Projektdateien in Ihr Visual Studio-Projekt kopieren. Ich finde es einfacher, die Verzeichnisse in Visual Studio so zu erstellen, dass sie der Projektdatei hinzugefügt werden. Dann kopiere ich die Dateien in die generierten Ordner und füge sie schließlich dem Projektordner in Visual Studio hinzu.

  8. Zu diesem Zeitpunkt können Sie die Skripte in der Datei package.json , die von create-react-app hinzugefügt wurden. Ich bevorzuge es, diese in der Befehlszeile auszuführen, aber Sie können sie auch in Visual Studio mit dem "Task Runner Explorer" von Mads Kristensen ausführen.





visual-studio-2017