Comment utiliser NGP avec ASP.NET de base

Question

Je suis l'aide de mnp à gérer le jQuery, Bootstrap, la Police Génial et le client similaires bibliothèques dont j'ai besoin pour mon ASP.NET application de Base.

L'approche qui a fonctionné pour moi a commencé par l'ajout d'un package.fichier json pour le 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 paquets dans le dossier node_modules qui est sur le même niveau que wwwroot dans le répertoire du projet:

Comme ASP.NET de Base sert à la statique des fichiers à partir du dossier wwwroot et node_modules n'est pas là, j'ai dû faire quelques modifications à effectuer ce travail, le premier: l'ajout d'application.UseFileServer juste avant l'application.UseStaticFiles dans mon Démarrage.cs fichier:

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

app.UseStaticFiles();

et la deuxième, y compris node_modules dans mon publishOptions dans le projet.fichier json:

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

Cela fonctionne dans mon environnement de développement et il fonctionne aussi quand je le déployer à mon Azure App instance de Service, jquery, bootstrap et font-awesome statique, les fichiers ont bien servi, mais je ne suis pas sûr au sujet de cette mise en œuvre.

Quelle est la bonne approche pour ce faire?

Cette solution est venue après la collecte de beaucoup de morceaux de l'info à partir de plusieurs sources et essayer quelques-uns qui n'ont pas de travail, et il semble un peu étrange d'avoir à servir ces fichiers à partir de l'extérieur wwwroot.

Tous les conseils seront grandement appréciés.

Answer 1

Par la publication de l'ensemble de votre node_modules le dossier que vous déployez beaucoup plus de fichiers que vous aurez réellement besoin de la production.

Au lieu de cela, utiliser une tâche coureur dans le cadre de votre processus de génération de paquet les fichiers dont vous avez besoin, et de les déployer à vos wwwroot le dossier. Cela vous permettra également de concat et minifier vos actifs en même temps, plutôt que d'avoir à servir chaque bibliothèque séparément.

Vous pouvez également supprimer complètement l' FileServer de configuration et de s'appuyer sur UseStaticFiles à la place.

Actuellement, gulp est la VS task runner de choix. Ajouter un gulpfile.js à la racine de votre projet, et de le configurer pour traiter vos fichiers statiques sur publier.

Par exemple, vous pouvez ajouter le suivant scripts section de votre project.json:

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

Qui travaillerait avec la suite de gulpfile (la valeur par défaut lors de l'échafaudage 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"]);

Answer 2

• À l'aide de npm pour la gestion des bibliothèques côté client est un bon choix (par opposition à la Charmille ou NuGet), vous êtes en train de penser dans le bon sens :)
• Split côté serveur (ASP.NET le Noyau) et côté client (par exemple, Angulaire 2, Ember, Réagir) projets dans des dossiers distincts (sinon votre ASP.NET le projet peut avoir beaucoup de bruit - les tests unitaires pour le code côté client, dossier node_modules, de construire des artefacts, etc.). Avant la fin de développeurs qui travaillent dans la même équipe avec vous merci pour ça :)
• Restaurer mnp modules au niveau de la solution (même la façon dont vous restaurer paquets via NuGet - pas dans le projet du dossier), de cette façon, vous pouvez avoir des tests unitaires et d'intégration dans un dossier séparé (plutôt que d'avoir JavaScript côté client des tests à l'intérieur de votre ASP.NET projet de Base).
• L'utilisation peut ne pas besoin d' FileServer, ayant StaticFiles devrait être suffisant pour servir les fichiers statiques (.js, images, etc.)
• Utilisation Webpack de regrouper votre code côté client en un ou plusieurs morceaux (bundles)
• Vous ne pourriez pas besoin Gulp/Grunt si vous utilisez un module de bundler comme Webpack
• Écrire l'automatisation de la génération des scripts dans ES2015+ JavaScript (par opposition à Bash ou PowerShell), ils travailleront de la croix-plate-forme et d'être plus accessible à la variété de développeurs web (tout le monde parle de JavaScript de nos jours)
• Renommer wwwroot de public, sinon la structure de dossiers dans Azure Web Apps sera source de confusion (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
• Publier uniquement la sortie compilée à Azure Web Apps (vous ne devriez jamais vous pousser node_modules d'un serveur d'hébergement web). Voir tools/deploy.js comme un exemple.

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

Answer 3

Installer le système de regroupement et Minifier dans les Extensions Visual Studio

Ensuite, vous créez un bundleconfig.json et entrez les informations suivantes 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 système de regroupement et minifier (gulp) a accès aux fichiers sources (qui devrait être exclue à partir de Visual Studio et également exclus de GIT) et les place dans le dossier wwwroot comme spécifié

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

Answer 4

Au lieu de chercher à servir le nœud le dossier des modules, vous pouvez également utiliser Gorgée de copier ce que vous avez besoin de wwwroot.

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

Cela peut aider aussi

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

Answer 5

Quelle est la bonne approche pour ce faire?

Il y a beaucoup de "droit" des approches, vous avez juste à décider lequel convienne à vos besoins. Il semble comme si vous êtes à l'incompréhension comment utiliser node_modules...

Si vous êtes familier avec NuGet , vous devriez penser à npm que de son côté client homologue. Où l' node_modules répertoire est comme l' bin répertoire pour NuGet. L'idée est que ce répertoire est juste un emplacement commun pour le stockage 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 l' package.json. Ensuite, utilisez une tâche coureur comme Gulp par exemple, pour copier les fichiers dont vous avez besoin dans votre choix wwwroot emplacement.

J'ai écrit un post de blog sur ce sujet en janvier que les détails de la ngp, Gorgée , et tout un tas d'autres détails sont encore pertinentes aujourd'hui. En outre, quelqu'un a appelé l'attention sur moi DONC, la question, j'ai demandé et finalement répondu à moi-même ici, ce qui est probablement utile.

J'ai créé un Gist qui montre l' gulpfile.js comme un exemple.

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

app.UseStaticFiles();

Cela permettra d'assurer que votre application peut accéder à ce dont il a besoin.