wake-up-neo.com

Wechsel von Bower (eingestellt) auf Yarn/Npm (.Net Core MVC) VS2017

Ich habe vor etwa einem Jahr angefangen, an einer .Net Core-Anwendung zu arbeiten. Ich habe .Net Core verwendet, um mein Projekt in Visual Studio einzurichten, und Bower, um meine clientseitigen Pakete zu verwalten. Es scheint, bower wird wird aufrechterhalten/eingestellt und die "Verantwortlichen" schlagen vor, stattdessen yarn oder webpack zu verwenden. 

Meine Frage ist also, wie fange ich an, yarn anstelle von bower zu verwenden? (oder npm wenn das passender ist)

Als ich mein Projekt startete, benutzte ich bower im Paketmanager von Visual Studio, indem ich einfach Folgendes eingab:

bower install <package-name>

Und es gelang mir, die Dateien/Verzeichnisse in meinem wwwroot/lib/-Ordner zu installieren. Ich musste nur die Abhängigkeit zu meinem _Layout.cshtml hinzufügen und alles funktionierte einwandfrei.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
    asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>

Ich finde es ziemlich schwierig, herauszufinden, wie Garne oder npm verwendet werden, um die gleiche "Leichtigkeit" in Visual Studio 2017 zu erreichen. Ich habe bereits Zugriff auf das Minimieren von Dateien durch das BundlerMinifier.Core NuGet-Paket, und ich glaube, dass dies automatisch für Dateien in meinem geschieht ist also keine Voraussetzung für die Lösung, die ich verwenden möchte.

Ich habe Googeln versucht, aber es scheint, dass dies kein sehr häufiges Problem ist. Und alle Links, die ich gefunden habe, schlugen vor, npm zu verwenden und gulp für das Verschieben von Dateien nach wwwroot/lib/ einzurichten. Ich habe es versucht, aber ich bekomme dabei einige seltsame Fehler.

Wie kann ich mit yarn Pakete mit ähnlichen Paketen installieren wie mit bower? oder sollte ich stattdessen npm verwenden?

38
Zeliax

Ich hatte die gleiche Frage wie Sie und stellte fest, dass Yarn nicht zu schwer zu benutzen ist. Hier bespreche ich die Installation von Yarn, Änderungen an Visual Studio 17 und den Projektablauf.

Garneinbau

Um Yarn auszuführen, müssen Sie zwei Dinge installieren:

  • Die Voraussetzung, Node.js .
  • Das Befehlszeilen-Dienstprogramm Yarn .

NPM in Visual Studio 2017 deaktivieren

Yarn verwendet eine Datei in Ihrem Projekt, package.json, um zu verfolgen, was es installiert hat. NPM verwendet auch dieselbe Datei. Um Konflikte zu vermeiden, habe ich die NPM-Hooks in Visual Studio deaktiviert. Wenn diese Hooks aktiviert sind, werden diese Pakete durch NPM geladen, wenn sich package.json ändert.

Um NPM zu deaktivieren, rufen Sie das Menü Tools auf und wählen Sie Optionen .... Gehen Sie im linken Baum zu: Projekte und Lösungen -> Webpaketverwaltung -> Paketwiederherstellung. Deaktivieren Sie auf der rechten Seite die NPM-Hooks, indem Sie beide Optionen in False ändern:

 Disable NPM in Visual Studio

Im Bild oben habe ich auch die Haken für Bower deaktiviert. Dies ist optional - ich habe es getan, damit Bower nicht versehentlich Pakete installiert.

Projekteinrichtung für Garn

Um Yarn mit Ihrem Projekt zu verwenden, müssen Sie ein paar Dinge tun:

  • Stellen Sie sicher, dass das Projekt eine package.json -Datei hat. Es sollte sich unterhalb des Projektverzeichnisses befinden. Anfangs sollte der Inhalt der Datei eine offene Klammer und eine geschlossene Klammer enthalten:

{
}
  • Stellen Sie sicher, dass sich unter wwwroot ein Verzeichnis lib befindet.

Die folgende Verzeichnisstruktur zeigt ein Beispielprojekt mit diesen beiden Dingen:

+ Solution
    + Project
        + wwwroot
            + lib
        + Program.cs
        + Startup.cs
        + package.json

Garnverbrauch/Projektablauf 

Hier ist der Teil, auf den Sie gewartet haben. Öffnen Sie zuerst die Paket-Manager-Konsole. Die Konsole ist nur eine Powershell-Konsole in VS. Nach dem Öffnen befinden Sie sich im Lösungsverzeichnis, so dass Sie eine CD in das Projektverzeichnis aufnehmen müssen. Danach können Sie mit Yarn Bibliotheken hinzufügen:

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib [email protected]

Pakete werden jetzt unter wwwroot\lib installiert, da Sie Yarn anweisen, sie zu installieren.

Hinzufügen einer Garnverknüpfung in Visual Studio 2017

Wenn Sie der Meinung sind, dass der vorherige Abschnitt zu viel Eingabe betraf, können Sie dies durch Hinzufügen einer Verknüpfung in VS vereinfachen. Wenn dies eingerichtet ist, wird Yarn automatisch aus dem Projektverzeichnis ausgeführt und gibt den Zielordner an. Sie müssen lediglich angeben, welches Paket installiert werden soll.

Klicken Sie in Visual Studio im Menü auf Tools> External Tools .... Klicken Sie im Popup auf die Schaltfläche Add und füllen Sie die Felder wie folgt aus:

  • Titel: Garn hinzufügen
  • Befehl (Ihr Verzeichnis kann anders sein): C:\Programme (x86)\Yarn\bin\yarn.cmd
  • Argumente: add --modules-folder = wwwroot\lib
  • Ausgangsverzeichnis: $ (ProjectDir)

Aktivieren Sie auch diese Kontrollkästchen:

  • Ausgabefenster verwenden
  • Fordern Sie Argumente an

Klicken Sie auf die Schaltfläche OK, um die Verknüpfung zu speichern.

Sie sollten sich also unter dem Menüpunkt Tools einen Yarn Add -Eintrag befinden. Klicken Sie darauf und Sie werden in einem Popup nach Eingabeargumenten gefragt:

 Yarn Popup

Sie müssen lediglich auf das erste Bearbeitungsfeld klicken und Ihr Paket hinzufügen. So fügen Sie beispielsweise Jquery hinzu:

 Yarn Add JQuery

Klicken Sie im Popup-Fenster auf OK, und Yarn sollte seinen Zauber wirken und Ihr Paket installieren.

Andere Überlegungen

  • Ich mache keine Node-Entwicklung, daher habe ich nicht überlegt, wie sich das Obige darauf auswirken würde. Für diejenigen, die eine Node-Entwicklung durchführen, besteht der Versuch, mit Yarn Pakete im Ordner node_npm zu installieren und zu überprüfen, ob alles funktioniert.
  • Ich vermute, dass es derzeit Pakete gibt, die Bower installieren kann, die Yarn nicht kann. Hoffentlich wird diese Lücke mit der Zeit kleiner.
22
chue x

Garn und npm sind sehr ähnlich. Sie können entweder Garne oder npm verwenden, um dasselbe Ziel zu erreichen, indem Sie Knotenpakete installieren. Dies ist vergleichbar mit dem, was Bower zuvor für Sie getan hat, mit der Ausnahme, dass Bower sie anstelle von node_modules zu Ihren Projekt-Web-Assets hinzugefügt hat. 

WebPack ist ein Tool, das ausschließlich dazu dient, clientseitige Web-Assets zu erstellen und mit den Abhängigkeiten zu bündeln. 

Wenn Sie dies nicht benötigen, verwenden Sie weiterhin Bower oder Nuget für ältere Projekte. Verwenden Sie für neue Projekte WebPack und garn/npm. 

2
Martin

Meiner Meinung nach ist es einfacher, Garne zu verwenden und anzugeben, in welchem ​​Ordner Pakete mit einer RC-Datei installiert werden sollen. So machen Sie es:
1) Laden Sie Faden von Farns Site auf Ihren Computer . Wenn Sie Windows verwenden, müssen Sie sicherstellen, dass es im Pfad für Ihren Computer enthalten ist.
2) Erstellen Sie über die Befehlszeile ein package.json oder geben Sie "garne init" im Stammverzeichnis Ihres Projekts ein (wenn Sie "garit init" eingeben, werden Sie nach ein paar Informationen gefragt, um das format.json zu formatieren Datei). Beachten Sie den Abschnitt Engines der Datei package.json, der angibt, welche Garn-Engine verwendet wird:

{
    "version": "1.0.0",
    "dependencies": {
    "bootstrap": "4.1.3",
    "popper.js": "1.14.3",    
},
    "engines": {
    "yarn": ">= 1.0.0"
    }
}

Erstellen Sie dann eine .yarnrc-Datei, indem Sie dem Projekt eine neue Textdatei in Visual Studio hinzufügen. Der vollständige Name der Datei sollte ".yarnrc" und keine .txt-Datei sein. Das Projekt fügt die .yarnrc-Datei automatisch unter dem Paket hinzu. json, dann fügen Sie der rc-Datei Folgendes hinzu:

--modules-folder wwwroot/lib

Keine Zitate nötig.

Dann öffnen Sie einfach die Befehlszeile im Stammverzeichnis der Projekte und geben "garn" ein. Alle Pakete werden in dem in der .yarnrc-Datei angegebenen Ordner installiert.

0
Adam