• utiliser npm pour gérer les bibliothèques côté client est un bon choix (par opposition à Bower ou NuGet), vous pensez dans la bonne direction:)
• Split server-side (ASP.NET Core) et côté client (par exemple Angular 2, Ember, React) projets dans des dossiers séparés (sinon votre ASP.NET le projet peut comporter de nombreux essais d'Unité de mesure du bruit pour le code côté client., node_modules dossier, construire des artefacts, etc.). Les développeurs Front-end travaillant dans la même équipe que vous vous remercieront pour cela:)
• restaurer les modules npm au niveau de la solution (de la même façon que vous restaurer les paquets via NuGet - pas dans le dossier du projet), de cette façon, vous pouvez avoir des tests d'unité et d'intégration dans un dossier séparé ainsi (par opposition à avoir des tests JavaScript côté client à l'intérieur de votre ASP.NET projet de base).
• utilisation peut ne pas être nécessaire FileServer , d'avoir StaticFiles devrait être suffisant pour servir les fichiers statiques (.js, images, etc.)
• utilisez Webpack pour regrouper votre code côté client en un ou plusieurs morceaux (paquets)
• Vous ne pourriez pas besoin Gulp/Grunt si vous utilisez un module de bundler comme Webpack
• écrire construire des scripts d'automatisation dans ES2015 + JavaScript (par opposition à Bash ou PowerShell), ils fonctionneront sur plusieurs plateformes et seront plus accessible à divers développeurs web (Tout le monde parle JavaScript de nos jours)
• renommer wwwroot en public , sinon la structure du dossier dans les applications Web Azure sera confuse ( D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public )
• ne publie que la sortie compilée pour les applications Web Azure (vous ne devez jamais pousser node_modules vers un serveur d'hébergement web). Voir tools/deploy.js à titre d'exemple.

visite ASP.NET Core Starter Kit on GitHub (disclaimer: i'm the author)

Install the Bundler and Miniifier into Visual Studio Extensions

ensuite vous créez un bundleconfig.json et entrez ce qui suit comme:

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

ainsi le bundler et le mini-chargeur (basé sur gulfp) a accès aux fichiers source (qui devraient être exclus de Visual Studio et aussi exclus de GIT) et les met dans le wwwroot comme spécifié

seul effet secondaire chaque fois que vous l'enregistrez sera exécuter cette (ou vous pouvez le mettre ou l'exécuter manuellement)

au lieu d'essayer de servir le dossier node modules, vous pouvez également utiliser Gulfp pour copier ce dont vous avez besoin pour wwwroot.

https://docs.asp.net/en/latest/client-side/using-gulp.html

Cela pourrait aider trop

Visual Studio 2015 ASP.NET 5, Gulfp tâche ne copiant pas les fichiers à partir de node_modules

Quelle est la bonne approche pour ce faire?

il y a beaucoup de" bonnes " approches, vous avez juste à décider lequel est le mieux adapté à vos besoins. Il semble que vous vous mépreniez sur la façon d'utiliser node_modules ...

si vous connaissez NuGet vous devriez penser à npm comme son homologue côté client. Où est le répertoire node_modules le répertoire bin pour NuGet . L'idée est que ce répertoire est juste un emplacement commun pour stocker des paquets, à mon avis il est préférable de prendre un dependency sur les paquets dont vous avez besoin comme vous l'avez fait dans le package.json . Ensuite, utilisez un gestionnaire de tâches comme Gulp par exemple pour copier les fichiers dont vous avez besoin dans votre emplacement wwwroot désiré.

j'ai écrit un post de blog à propos ce retour en janvier que les détails mnp , Gulp et tout un tas d'autres détails sont encore pertinentes aujourd'hui. En outre, quelqu'un a attiré l'attention sur ma question ainsi j'ai demandé et finalement répondu moi-même ici , ce qui est probablement utile.

j'ai créé un Gist qui montre le gulpfile.js comme un exemple.

dans votre Startup.cs il est toujours important d'utiliser des fichiers statiques:

app.UseStaticFiles();

cela permettra à votre application d'accéder à ce dont elle a besoin.

je vous donne deux réponses. npm combiné avec d'autres outils est puissant, mais nécessite un certain travail de configuration. Si vous voulez simplement télécharger quelques bibliothèques, vous pouvez utiliser Library Manager à la place (publié dans Visual Studio 15.8).

NPM (avancé)

ajouter D'abord le paquet .json dans le projet root of you. Ajouter le contenu suivant:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

cela permettra de télécharger npm Bootstrap, jQuery et d'autres bibliothèques qui est utilisé dans une nouvelle asp.net projet de base vers un dossier nommé node_modules. La prochaine étape consiste à copier les fichiers à un endroit approprié. Pour ce faire, nous allons utiliser gulp, qui a également été téléchargé par NPM. Puis Ajouter un nouveau fichier dans la racine de votre projet nommé gulpfile.js . Ajouter le contenu suivant:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

ce fichier contient un code JavaScript qui est exécuté lorsque le le projet est construit et nettoyé. Il copie tous les fichiers nécessaires à lib2 ( pas lib – vous pouvez facilement changer cela ). J'ai utilisé la même structure que dans un nouveau projet, mais il est facile de modifier des fichiers vers un autre emplacement. Si vous déplacez les fichiers, assurez-vous de mettre à jour _Layout.cshtml . Notez que tous les fichiers du répertoire lib2-seront supprimés lorsque le projet sera nettoyé.

Si vous faites un clic droit sur gulffile.js , vous pouvez sélectionner Task Runner Explorer . De là, vous pouvez exécuter gulp manuellement pour copier ou nettoyer des fichiers.

Gulfp pourrait également être utile pour d'autres tâches comme minify JavaScript et CSS-files:

https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

Directeur De Bibliothèque (Simple)

Right cliquez sur votre projet et sélectionnez Gérer les bibliothèques côté client . Le fichier libman.json est maintenant ouvert. Dans ce fichier, vous spécifiez quelle bibliothèque et quels fichiers utiliser et où ils doivent être stockés localement. Vraiment simple! Le fichier suivant copie les bibliothèques par défaut qui est utilisé lors de la création d'un nouveau ASP.NET projet Core 2.1:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.17.0",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.10",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "twitter-bootstrap@3.3.7",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "list.js@1.5.0",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

si vous déplacez les fichiers, assurez-vous de mettre à jour _Layout.CSHTML .

Shawn Wildermuth a un joli guide ici: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

l'article est lié au gulpfile sur GitHub où il a mis en œuvre la stratégie de l'article. Vous pouvez simplement copier et coller la plupart du contenu de gulffile dans le vôtre, mais assurez-vous d'ajouter les paquets appropriés dans le paquet.json sous devDependencies: Gulp gulp-uglify gulp-concat rimraf merge-stream

j'ai trouvé une meilleure façon de gérer les paquets JS dans mon projet avec NPM Gulfp/Grunt task Runner. Je n'aime pas l'idée d'avoir un NPM avec une autre couche de bibliothèque javascript pour gérer l ' "automation", et mon exigence numéro un est d'exécuter simplement la mise à jour du npm sans autres soucis si je dois exécuter des trucs gulfp, si elle a copié avec succès tout et vice versa.

Le MNP:

• le Le minificateur JS est déjà ASP.net core, cherche bundleconfig.json donc ce n'est pas un problème pour moi (pas de compilation quelque chose de personnalisé)
• la bonne chose à propos de NPM est que c'est d'avoir une bonne structure de fichier donc je peux toujours trouver les versions pré-compilées/modifiées des dépendances sous le node_modules / module / dist
• j'utilise un NPM node_modules/.hooks / {eventname} script qui traite la copie / mise à jour / suppression de la Project / wwwroot/lib/module/ dist / .js fichiers, vous pouvez trouver la documentation ici https://docs.npmjs.com/misc/scripts (je vais mettre à jour le script que j'utilise pour git une fois qu'il sera plus poli) je n'ai pas besoin coureurs de tâches supplémentaires ( ).js outils que je n'aime pas), ce qui maintient mon projet propre et simple.

Le python": 151910920"

https://pypi.python.org/pyp ... mais dans ce cas, vous devez maintenir les sources manuellement