J'utilise npm pour gérer les bibliothèques client jQuery, Bootstrap, Font Awesome et similaires dont j'ai besoin pour mon application ASP.NET Core.

L'approche qui a fonctionné pour moi a commencé par l'ajout d'un fichier package.json au projet, qui ressemble à ceci:

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm restaure ces packages dans le dossier node_modules qui est au même niveau que wwwroot dans le répertoire du projet:

Comme ASP.NET Core sert les fichiers statiques du dossier wwwroot et que node_modules n'est pas là, j'ai dû apporter quelques modifications pour que cela fonctionne, le premier: ajouter app.UseFileServer juste avant app.UseStaticFiles dans mon démarrage. fichier cs:

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

et le second, y compris node_modules dans mes publishOptions dans le fichier project.json:

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

Cela fonctionne dans mon environnement de développement et cela fonctionne également lorsque je le déploie sur mon instance Azure App Service, les fichiers statiques jquery, bootstrap et font-awesome sont bien servis, mais je ne suis pas sûr de cette implémentation.

Quelle est la bonne approche pour y parvenir?

Cette solution est venue après avoir collecté beaucoup d'informations à partir de plusieurs sources et en avoir essayé certaines qui n'ont pas fonctionné, et il semble un peu étrange de devoir servir ces fichiers depuis l'extérieur de wwwroot.

Tout conseil sera grandement apprécié.

En publiant votre tout node_modules dossier, vous déployez bien plus de fichiers que vous n'en aurez réellement besoin en production.

Au lieu de cela, utilisez un exécuteur de tâches dans le cadre de votre processus de génération pour empaqueter les fichiers dont vous avez besoin et les déployer sur votre wwwroot dossier. Cela vous permettra également de concaténer et de réduire vos ressources en même temps, plutôt que d'avoir à desservir chaque bibliothèque individuellement.

Vous pouvez ensuite supprimer complètement la FileServerconfiguration et vous fier à la UseStaticFilesplace.

Actuellement, gulp est le lanceur de tâches VS de choix. Ajoutez un gulpfile.jsà la racine de votre projet et configurez-le pour traiter vos fichiers statiques lors de la publication.

Par exemple, vous pouvez ajouter la scriptssection suivante à votre project.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

Ce qui fonctionnerait avec le gulpfile suivant (par défaut lors de l'échafaudage avec yo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

• En utilisant 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 :)
• Divisez les projets côté serveur (ASP.NET Core) et côté client (par exemple Angular 2, Ember, React) dans des dossiers séparés (sinon votre projet ASP.NET peut avoir beaucoup de bruit - tests unitaires pour le code côté client, node_modules dossier, construire des artefacts, etc.). Les développeurs front-end travaillant dans la même équipe avec vous vous en remercieront :)
• Restaurez les modules npm au niveau de la solution (de la même manière que vous restaurez les packages via NuGet - pas dans le dossier du projet), de cette façon, vous pouvez également avoir des tests unitaires et d'intégration dans un dossier séparé (par opposition à des tests JavaScript côté client dans votre Projet ASP.NET Core).
• L'utilisation pourrait ne pas avoir besoin FileServer, ayantStaticFiles devrait suffire pour servir des fichiers statiques (.js, images, etc.)
• Utilisez Webpack pour regrouper votre code côté client en un ou plusieurs morceaux (bundles)
• Vous n'aurez peut-être pas besoin de Gulp / Grunt si vous utilisez un bundler de modules tel que Webpack
• Écrire des scripts d'automatisation de construction en ES2015 + JavaScript (par opposition à Bash ou PowerShell), ils fonctionneront sur plusieurs plates-formes et seront plus accessibles à une variété de développeurs Web (tout le monde parle JavaScript de nos jours)
• Renommez wwwrooten public, sinon la structure des dossiers dans Azure Web Apps sera déroutante ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
• Publiez uniquement la sortie compilée sur Azure Web Apps (vous ne devez jamais pousser node_modulesvers un serveur d'hébergement Web). Voir à tools/deploy.jstitre d'exemple.

Visitez ASP.NET Core Starter Kit sur GitHub (avertissement: je suis l'auteur)

Installez le Bundler et le Minifier dans les extensions Visual Studio

Ensuite, vous créez un bundleconfig.jsonet 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 minifier (basés sur gulp) ont accès aux fichiers source (qui doivent être exclus de Visual Studio et également exclus de GIT) et les placent dans wwwroot comme spécifié

seul effet secondaire à chaque fois que vous enregistrez, il l'exécutera (mais vous pouvez le configurer pour l'exécuter manuellement)

Je vous donne deux réponses. npm combiné à d'autres outils est puissant mais nécessite un certain travail de configuration. Si vous souhaitez simplement télécharger certaines bibliothèques, vous souhaiterez peut-être utiliser Library Manager à la place (publié dans Visual Studio 15.8).

NPM (avancé)

Ajoutez d'abord package.json à la racine de votre projet. Ajoutez 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 obligera NPM à télécharger Bootstrap, JQuery et d'autres bibliothèques utilisées dans un nouveau projet principal asp.net dans un dossier nommé node_modules. L'étape suivante consiste à copier les fichiers dans un endroit approprié. Pour ce faire, nous utiliserons gulp, qui a également été téléchargé par NPM. Ajoutez ensuite un nouveau fichier à la racine de votre projet nommé gulpfile.js . Ajoutez 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 projet est généré et nettoyé. Il copiera tous les fichiers nécessaires vers 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 changer les fichiers vers un emplacement différent. Si vous déplacez les fichiers, assurez-vous également de mettre à jour _Layout.cshtml . Notez que tous les fichiers du répertoire lib2 seront supprimés lorsque le projet sera nettoyé.

Si vous cliquez avec le bouton droit sur gulpfile.js , vous pouvez sélectionner Task Runner Explorer . De là, vous pouvez exécuter gulp manuellement pour copier ou nettoyer des fichiers.

Gulp pourrait également être utile pour d'autres tâches telles que la réduction des fichiers JavaScript et CSS:

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

Gestionnaire de bibliothèque (simple)

Cliquez avec le bouton droit 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 la bibliothèque et les fichiers à utiliser et où ils doivent être stockés localement. Vraiment simple! Le fichier suivant copie les bibliothèques par défaut utilisées lors de la création d'un nouveau projet ASP.NET 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 également de mettre à jour _Layout.cshtml .

Au lieu d'essayer de servir le dossier des modules de nœuds, vous pouvez également utiliser Gulp pour copier ce dont vous avez besoin sur wwwroot.

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

Cela pourrait aussi aider

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

Quelle est la bonne approche pour y parvenir?

Il existe de nombreuses "bonnes" approches, il vous suffit de décider laquelle correspond le mieux à vos besoins. Il semble que vous ne compreniez pas comment utiliser node_modules...

Si vous connaissez NuGet, vous devriez penser à npm comme son équivalent côté client. Où le node_modulesrépertoire est comme le binrépertoire de NuGet . L'idée est que ce répertoire n'est qu'un emplacement commun pour stocker les paquets, à mon avis, il est préférable de prendre un dependencysur les paquets dont vous avez besoin comme vous l'avez fait dans le package.json. Ensuite, utilisez un exécuteur de tâches comme Gulppar exemple pour copier les fichiers dont vous avez besoin dans l' wwwrootemplacement souhaité .

J'ai écrit un article de blog à ce sujet en janvier qui détaille npm , Gulp et tout un tas d'autres détails qui sont toujours pertinents aujourd'hui. De plus, quelqu'un a attiré l'attention sur ma question SO que j'ai posée et m'a finalement répondu ici , ce qui est probablement utile.

J'ai créé un Gistqui montre le gulpfile.jscomme exemple.

Dans votre, Startup.csil est toujours important d'utiliser des fichiers statiques:

app.UseStaticFiles();

Cela garantira que votre application peut accéder à ce dont elle a besoin.

Une approche beaucoup plus simple consiste à utiliser le package Nuget OdeToCode.UseNodeModules. Je viens de le tester avec .Net Core 3.0. Tout ce que vous avez à faire est d'ajouter le package à la solution et de le référencer dans la méthode Configure de la classe Startup:

app.UseNodeModules();

Je l'ai appris grâce à l'excellent cours Construire une application Web avec ASP.NET Core, MVC, Entity Framework Core, Bootstrap et Angular Pluralsight de Shawn Wildermuth.

Shawn Wildermuth a un bon 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 dans l'article. Vous pouvez simplement copier et coller la plupart du contenu de gulpfile dans le vôtre, mais assurez-vous d'ajouter les packages appropriés dans package.json sous devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

J'ai trouvé un meilleur moyen de gérer les packages JS dans mon projet avec les exécuteurs de tâches NPM Gulp / Grunt. Je n'aime pas l'idée d'avoir un NPM avec une autre couche de bibliothèque javascript pour gérer l '«automatisation», et mon exigence numéro un est de simplement exécuter la mise à jour de npm sans aucun autre souci si je dois exécuter des trucs gulp, s'il réussit à tout copier et vice versa.

La manière NPM:

• Le minificateur JS est déjà inclus dans le noyau ASP.net, recherchez bundleconfig.json donc ce n'est pas un problème pour moi (ne pas compiler quelque chose de personnalisé)
• La bonne chose à propos de NPM est qu'il a une bonne structure de fichiers afin que je puisse toujours trouver les versions précompilées / minifiées des dépendances sous le node_modules / module / dist
• J'utilise un script NPM node_modules / .hooks / {eventname} qui gère la copie / mise à jour / suppression des fichiers Project / wwwroot / lib / module / dist / .js, vous pouvez trouver la documentation ici https: // docs.npmjs.com/misc/scripts (je mettrai à jour le script que j'utilise pour git une fois qu'il sera plus poli) Je n'ai pas besoin d'exécuteurs de tâches supplémentaires ( outils .js que je n'aime pas) ce qui garde mon projet propre et simple.

La manière python:

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

Veuillez excuser la longueur de ce message.

Il s'agit d'un exemple de travail utilisant ASP.NET Core version 2.5.

Il est à noter que project.json est obsolète ( voir ici ) au profit de .csproj . Un problème avec .csproj . fichier est la grande quantité de fonctionnalités et le fait qu'il n'y a pas d'emplacement central pour sa documentation ( voir ici ).

Encore une chose, cet exemple exécute ASP.NET core dans un conteneur Docker Linux (Alpine 3.9); donc les chemins refléteront cela. Il utilise également gulp ^ 4.0. Cependant, avec quelques modifications, il devrait fonctionner avec les anciennes versions d'ASP.NET Core, Gulp, NodeJS et également sans Docker.

Mais voici une réponse:

gulpfile.js voir le vrai exemple de travail ici

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

Ajoutez une cible dans le fichier .csproj . Notez que nous avons également ajouté une montre à surveiller et à exclure si nous profitons de la dotnet run watchcommande.

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

Maintenant, lorsqu'il dotnet run buildest exécuté, il installera et construira également des modules de nœuds.