web-dev-qa-db-fra.com

Quitter Bower (discontinué) pour utiliser Yarn/Npm à la place (.Net Core MVC) VS2017

J'ai commencé à travailler sur une application .Net Core il y a environ un an. J'ai utilisé .Net Core pour configurer mon projet dans Visual Studio et Bower pour gérer les packages côté client. Il semble que bower soit en cours de maintenance/discontinué et les "responsables" suggèrent d'utiliser plutôt yarn ou webpack. 

Ma question est donc comment commencer à utiliser yarn au lieu de bower? (ou npm si c'est plus approprié)

Lorsque j'ai commencé mon projet, j'ai utilisé bower à partir du gestionnaire de packages Visual Studio en tapant simplement:

bower install <package-name>

Et il a réussi à installer les fichiers/répertoires dans mon dossier wwwroot/lib/. Je devais juste ajouter la dépendance à mon _Layout.cshtml et tout fonctionnait parfaitement.

<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>

Je trouve assez difficile de comprendre comment utiliser fil ou npm pour obtenir la même "facilité" dans Visual Studio 2017. J'ai déjà accès à la minification des fichiers via le package BundlerMinifier.Core NuGet. , ce n’est donc pas une exigence pour la solution que je veux utiliser.

J'ai essayé de googler, mais il semble que ce n'est pas un problème très commun. Et tous les liens que j'ai trouvés suggéraient d'utiliser npm et de configurer gulp pour déplacer des fichiers vers wwwroot/lib/ et je l'ai essayé, mais je reçois des erreurs étranges en le faisant.

Comment puis-je utiliser yarn pour installer des packages avec les mêmes fonctionnalités que celles avec bower? ou devrais-je utiliser npm à la place?

npmasp.net-core-mvcvisual-studio-2017boweryarnpkg
38
Zeliax

J'ai eu la même question que vous et découvert que le fil n'est pas trop difficile à utiliser. Ici, je discute de l’installation de Yarn, des modifications apportées à Visual Studio 17 et du flux de travail du projet.

Installation du fil

Pour exécuter Yarn, vous devez installer deux choses:

  • Le pré-requis, Node.js .
  • Utilitaire de ligne de commande Yarn .

Désactiver NPM dans Visual Studio 2017

Yarn utilise un fichier dans votre projet, package.json, pour garder une trace de ce qu'il a installé. NPM utilise également le même fichier. Pour éviter tout conflit, j'ai désactivé les points d'ancrage NPM dans Visual Studio. Si cette fonction est activée, NPM chargera les packages chaque fois que package.json sera modifié.

Pour désactiver NPM, accédez au menu Outils et sélectionnez Options .... Dans l'arborescence de gauche, accédez à: Projets et solutions -> Gestion des packages Web -> Restauration du package. Sur le côté droit, désactivez les points d'ancrage NPM en modifiant les deux options en False:

 Disable NPM in Visual Studio

Dans l'image ci-dessus, j'ai également désactivé les crochets pour Bower. Ceci est facultatif - je l’ai fait pour éviter que Bower n’installe accidentellement un paquet.

Configuration du projet pour le fil

Pour utiliser Yarn avec votre projet, vous devez effectuer quelques opérations:

  • Assurez-vous que le projet contient un fichier package.json. Il devrait être situé sous le répertoire du projet. Initialement, le contenu du fichier doit contenir un crochet ouvert et un crochet fermé:

{
}
  • Assurez-vous qu'il y a un répertoire lib sous wwwroot.

La structure de répertoires suivante montre un exemple de projet avec ces deux choses:

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

Utilisation du fil/Workflow du projet 

Voici la partie que vous attendiez. Commencez par ouvrir la console du gestionnaire de paquets. La console est juste une console PowerShell au sein de VS. Une fois ouvert, vous serez dans le répertoire de la solution, vous aurez donc besoin de CD dans le répertoire du projet. Après cela, vous pouvez ajouter des bibliothèques en utilisant Yarn:

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

Les packages sont maintenant installés sous wwwroot\lib, car c’est là que vous indiquez à Yarn de les installer.

Ajout d'un raccourci de fil dans Visual Studio 2017

Si vous pensez que la section précédente impliquait trop de frappe, vous pouvez simplifier les choses en ajoutant un raccourci dans VS. Lorsque cela est configuré, Yarn s'exécutera automatiquement à partir du répertoire du projet, en spécifiant le dossier cible. Tout ce que vous avez à faire est de lui dire quel paquet installer.

Dans Visual Studio, cliquez sur Outils> Outils externes ... dans le menu. Dans la fenêtre contextuelle, cliquez sur le bouton Ajouter et remplissez les champs comme suit:

  • Titre: Yarn Add
  • Commande (votre répertoire peut être différent): C:\Program Files (x86)\Yarn\bin\yarn.cmd
  • Arguments: add --modules-folder = wwwroot\lib
  • Répertoire initial: $ (ProjectDir)

Activez également ces cases à cocher:

  • Utiliser la fenêtre de sortie
  • Demander des arguments

Cliquez sur le bouton OK pour enregistrer le raccourci.

Alors maintenant, vous devriez avoir un élément Ajout de fil dans le menu Outils. Cliquez dessus et vous obtiendrez une fenêtre contextuelle vous demandant des arguments d'entrée:

 Yarn Popup

Tout ce que vous avez à faire est de cliquer sur la première zone d’édition et d’ajouter votre paquet. Par exemple, pour ajouter jquery:

 Yarn Add JQuery

Cliquez sur OK dans le menu contextuel et Yarn devrait fonctionner comme par magie et installer votre paquet.

Autres considérations

  • Je ne fais pas de développement de nœud, je n'ai donc pas envisagé l'impact que ce qui précède aurait sur lui. Pour ceux qui développent des nœuds, essayez d’utiliser Yarn pour installer des paquetages dans le dossier node_npm et voir si tout fonctionne.
  • Je soupçonne qu’il existe actuellement des paquets que Bower peut installer mais que Yarn ne peut pas installer. Espérons qu'avec le temps, cet écart se resserre.
22
chue x

Le fil et le npm sont très semblables. Vous pouvez utiliser soit fil, soit npm pour atteindre exactement le même objectif, en installant des packages de nœuds. Ceci est similaire à ce que bower a fait pour vous précédemment, sauf que bower les a ajoutés aux ressources Web de votre projet au lieu de node_modules. 

WebPack est un outil permettant uniquement de créer des ressources Web côté client et de les regrouper avec les dépendances. 

Si vous n'en avez pas besoin, continuez à utiliser Bower ou Nuget pour les projets existants. Pour les nouveaux projets, utilisez WebPack et yarn/npm. 

2
Martin

À mon avis, une option plus simple consiste à utiliser du fil et à spécifier le dossier dans lequel installer les packages à l'aide d'un fichier rc. Voici comment vous le faites:
1) Téléchargez le fil sur votre ordinateur à partir du site du fil , vous devez vous assurer qu'il est inclus dans le chemin d'accès de votre ordinateur si vous utilisez Windows.
2) Créez un package.json ou tapez "yarn init" à la racine de votre projet via la ligne de commande (si vous tapez "yarn init", il vous demandera quelques informations pour vous aider à formater le package.json. fichier). Notez la section moteurs du fichier package.json spécifiant quel moteur de fil:

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

Créez ensuite un fichier .yarnrc en ajoutant un nouveau fichier texte dans Visual Studio au projet. Le nom complet du fichier doit être ".yarnrc" no .txt après, le projet ajoutera automatiquement le fichier .yarnrc sous le package. json, puis ajoutez ce qui suit au fichier rc:

--modules-folder wwwroot/lib

Aucune citation nécessaire.

Ensuite, ouvrez simplement la ligne de commande dans le dossier racine du projet et tapez "fil" et tous les packages seront installés dans le dossier spécifié dans le fichier .yarnrc.

0
Adam