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

Question

J'ai commencé à travailler sur un .Net application de Base autour de il y a 1 an. J'ai utilisé .Net de Base pour définir mon projet dans visual studio et l'habitude de Verdure à gérer de mon côté client, packages. Il semble bower est maintenue/abandonnées et les "personnes responsables" vous suggérons d'utiliser yarn ou webpack à la place.

Donc ma question est comment puis-je commencer à utiliser yarn au lieu de bower? (ou npm si cela est plus approprié)

Quand j'ai commencé mon projet, j'ai utilisé de verdure à partir de Visual Studio package manager, simplement en tapant:

bower install <package-name>

Et il a réussi à installer les fichiers/répertoires à l'intérieur de mon wwwroot/lib/ le dossier. J'ai juste eu à ajouter la dépendance à mon _Layout.cshtml et tout a fonctionné 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>

J'ai du mal à comprendre comment l'utiliser de la laine ou de la ngp pour atteindre le même "easyness" au sein de Visual Studio 2017. J'ai déjà accès à minifying des fichiers par le biais de l' BundlerMinifier.Core package NuGet, et je crois qu'il le fait automatiquement pour les fichiers à l'intérieur de mon , ce n'est donc pas une condition requise 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é a suggéré d'utiliser npm et configurer gulp pour déplacer des fichiers d' wwwroot/lib/ et j'ai essayé, mais j'obtiens des erreurs bizarres dans le faire.

Comment puis-je utiliser yarn pour installer des paquets similaires comme je l'ai fait avec bower? ou dois-je utiliser npm à la place?

Answer 1

J'ai eu la même question que vous et a trouvé que le Fil n'est pas trop dur à utiliser. Ici, je discuter de l'installation des Fils, des astuces pour Visual Studio 17, et de projet de flux de travail.

Fil D'Installation

Pour exécuter le Fil, vous devez installer deux choses:

• Le prequisite, Node.js.
• Le Fil utilitaire de ligne de commande.

Désactiver le mécanisme national de prévention de Visual Studio 2017

Fil 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é le MNP crochets dans Visual Studio. Si l'option est activée, ces crochets sera la cause de la NGP pour charger des packages à chaque paquet.json changements.

Pour désactiver MNP aller à la Outils menu et sélectionnez Options.... Dans l'arborescence sur la gauche, allez à: les Projets et les Solutions -> le Web de Gestion de paquets -> Package de Restauration. Sur le côté droit de désactiver le mécanisme national de prévention crochets en modifiant les options de Faux:

Dans l'image ci-dessus, j'ai aussi désactivé les crochets pour la Charmille. Cette option est facultative - je l'ai fait afin de ne pas accidentellement ont Bower installer tous les paquets.

Projet d'Installation pour les Fils

Utiliser du Fil avec votre projet, vous devez faire un certain nombre de choses:

• Assurez-vous que le projet a un paquet.json fichier. Il doit être situé sous le répertoire du projet. D'abord le contenu du fichier doit contenir un crochet ouvert et fermer la parenthèse:

 

{
}

• Assurez-vous que il ya une lib sous-répertoire wwwroot.

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

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

Fils De L'Utilisation/ De Projet De Flux De Travail

Ici est la partie que vous avez été en attente pour. Tout d'abord ouvrir le gestionnaire de paquets de la console. La console est juste une console powershell dans VS. Lorsqu'il est ouvert, vous serez dans la solution d'annuaire, de sorte que vous aurez besoin de CD dans le répertoire du projet. Après cela, vous pouvez ajouter des bibliothèques à l'aide de Fil:

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib bootstrap@v4.0.0

Les paquets sont maintenant installés sous wwwroot\lib, car c'est là que vous dites Fil pour les installer.

L'ajout d'un Fil de Raccourci dans Visual Studio 2017

Si vous pensez que l'état de la section impliquait trop de frappe, vous pouvez simplifier les choses en ajoutant un raccourci dans VS. Lors de ce Fil sera exécuté automatiquement à partir du répertoire du projet, en précisant le dossier cible. Tout ce que vous avez à faire est de lui dire ce paquet à installer.

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

• Titre: Fils De L'Ajouter
  
• Commande (votre dir peuvent être différents): C:\Program Files (x86)\de Fil\bin\de fil.cmd
  
• Arguments: ajouter --modules-dossier=wwwroot\lib
  
• Répertoire Initial: $(ProjectDir)

En outre permettre à ces cases à cocher:

• Utiliser La Fenêtre De Sortie
• Invite pour les arguments

Cliquez sur le OK bouton pour enregistrer le raccourci.

Alors maintenant, vous devriez avoir un Fil Ajouter des articles dans les Outils de menu. Cliquez dessus et vous obtiendrez une fenêtre demandant arguments d'entrée:

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:

Cliquez sur OK dans la fenêtre contextuelle et de Fils doit travailler sa magie et l'installation de votre colis.

D'Autres Considérations

• Je ne fais pas de Noeud de développement, donc je n'ai pas réfléchi à la manière de la ci-dessus aurait un impact sur elle. Pour ceux qui ne le Nœud de développement, de tenter quelque chose serait d'utiliser du Fil pour installer les paquets dans le node_npm dossier et voir si les choses fonctionnent.
• Je soupçonne que, actuellement, il y a des paquets qui Bower pouvez installer que les Fils ne peut pas. Espérons-le, au fil du temps, cet écart se rétrécit.

Answer 2

De fils et les mnp sont très près la même chose. Vous pouvez utiliser de la laine ou de la ngp pour atteindre exactement le même objectif, l'installation de nœud de paquets. Ceci est similaire à ce bower fait pour vous, auparavant, sauf que bower ajouté à votre projet web actifs au lieu de node_modules.

WebPack est un outil purement pour la construction de côté client web actifs et les regrouper avec les dépendances.

Si vous n'avez pas besoin pour cela, de continuer à utiliser la charmille ou Nuget pour les anciens projets. Pour les nouveaux projets, l'utilisation WebPack et de fils/mnp.

Answer 3

À mon avis, plus simplement, à l'aide de fils et de spécifier dans quel dossier installer des paquets en utilisant un fichier rc. Voici comment faire:
1) télécharger fil sur votre ordinateur à partir de fil du site, vous aurez besoin pour vous assurer qu'il est inclus dans le Chemin d'accès de votre ordinateur si vous utilisez Windows.
2) créer un package.json ou de type "fil init" à la racine de votre projet par le biais de la ligne de commande (si vous tapez "fils init" il va demander quelques éléments d'information à l'aide du format de l'emballage.fichier json). Avis des moteurs de la section de l'emballage.fichier json en précisant ce que le fil du moteur:

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

Puis créer un .yarnrc fichier par l'ajout d'un nouveau fichier texte à l'intérieur de visual studio pour le projet, le nom complet du fichier doit être ".yarnrc" pas de .txt après, le projet permettra d'ajouter automatiquement les .yarnrc fichier ci-dessous le paquet.json, puis ajoutez les lignes suivantes au fichier rc:

--modules-folder wwwroot/lib

Pas de guillemets nécessaires.

Puis il suffit d'ouvrir la ligne de commande dans les projets de dossier racine et de type "fil" et tous les paquets seront installés dans le dossier spécifié dans la .yarnrc fichier.