Come utilizzare npm con ASP.NET Core

Question

Sto utilizzando npm per gestire le librerie client jQuery, Bootstrap, Font Awesome e simili di cui ho bisogno per la mia applicazione ASP.NET Core.

L'approccio che ha funzionato per me iniziata con l'aggiunta di un file package.json al progetto, che assomiglia a questo:

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

npm ripristina questi pacchetti nella cartella node_modules che è allo stesso livello come wwwroot nella directory del progetto:

Come ASP.NET Nucleo serve i file statici dalla cartella wwwroot, e node_modules non c'è, ho dovuto fare un paio di modifiche per fare questo lavoro, il primo : Inserisci ing app.UseFileServer destra prima app.UseStaticFiles nel mio file Startup.cs:

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

app.UseStaticFiles(); 

e la seconda, tra cui node_modules nei miei publishOptions nel file project.json:

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

Questo funziona in il mio ambiente di sviluppo e funziona anche quando lo distribuisco all'istanza del servizio app di Azure, i file statici jquery, bootstrap e font-awesome vengono serviti correttamente, ma non sono sicuro di questa implementazione.

Qual è l'approccio giusto per farlo?

Questa soluzione è arrivata dopo aver raccolto un sacco di informazioni da varie fonti e provandone alcune che non funzionavano, e sembra un po 'strano dover servire questi file al di fuori di wwwroot.

Qualsiasi consiglio sarà molto apprezzato.

Answer 1

Con la pubblicazione di tutta la vostra node_modules cartella che si sta distribuendo gran lunga più file di quello che sarà effettivamente bisogno in produzione.

Invece, utilizzare un task runner come parte del processo di compilazione per impacchettare quei file necessari e distribuirli nella cartella wwwroot. Ciò ti consentirà anche di concatenare e minimizzare le tue risorse allo stesso tempo, piuttosto che dover servire ciascuna singola biblioteca separatamente.

È inoltre possibile rimuovere completamente la configurazione FileServer e rispondere su UseStaticFiles.

Attualmente, gulp è il runner di attività VS di scelta. Aggiungi un gulpfile.js alla radice del progetto e configuralo per elaborare i file statici in fase di pubblicazione.

Ad esempio, è possibile aggiungere il scripts seguente sezione al vostro project.json:

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

che lavorerebbe con il seguente gulpfile (l'impostazione predefinita quando ponteggi con 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

Invece di provare a servire la cartella dei moduli del nodo, è anche possibile utilizzare Gulp per copiare ciò che è necessario su wwwroot.

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

Questo potrebbe aiutare anche

Visual Studio 2015 ASP.NET 5, Gulp task not copying files from node_modules

Answer 3

• Utilizzando npm per la gestione di librerie lato client è una buona scelta (al contrario di Bower o NuGet), stai pensando nella giusta direzione :)
• Split lato server (ASP.NET Core) e lato client (ad es. Angular 2, Ember, React) proietta in cartelle separate (altrimenti il ​​tuo progetto ASP.NET potrebbe avere un sacco di test di unità di rumore per il codice lato client, la cartella node_modules, gli artefatti di build, ecc.). Gli sviluppatori front-end che lavorano nello stesso team con te ti ringrazieranno :)
• Ripristina i moduli npm a livello di soluzione (allo stesso modo in cui ripristini i pacchetti tramite NuGet - non nella cartella del progetto), in questo modo puoi avere unità e test di integrazione in una cartella separata (invece di avere test JavaScript sul lato client all'interno del progetto ASP.NET Core).
• L'utilizzo potrebbe non richiedere FileServer, avere StaticFiles dovrebbe essere sufficiente per servire file statici (.js, immagini ecc.)
• Usa Webpack per impacchettare il codice lato client in uno o più pezzi (bundle)
• You might not need Gulp/Grunt se si sta usando un bundler modulo quali Webpack
• scrivere script di automazione di costruzione in ES2015 + JavaScript (al contrario di bash o PowerShell), lavoreranno cross-platform ed essere più accessibili a varietà di sviluppatori web (tutti parlano JavaScript giorno d'oggi)
• Rinominare wwwroot-public, altrimenti la struttura delle cartelle in Azure Web Apps sarà confondere (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
• Pubblica o solo l'output compilato in App Web di Azure (non si dovrebbe mai spingere lo node_modules in un server di hosting Web). Vedi tools/deploy.js come esempio.

Visita ASP.NET Core Starter Kit su GitHub (disclaimer: io sono l'autore)

Answer 4

Qual è l'approccio giusto per farlo?

Ci sono molti approcci "giusti", hai appena deciso quale meglio soddisfa le tue esigenze. Sembra come se si sta equivoco come utilizzare node_modules ...

Se si ha familiarità con NuGet si dovrebbe pensare di NPM come la sua controparte sul lato client. Dove la directory node_modules è come la directory bin per NuGet. L'idea è che questa directory è solo una posizione comune per la memorizzazione dei pacchetti, a mio parere è meglio prendere uno dependency sui pacchetti necessari, come hai fatto nello package.json. Quindi utilizzare un task runner come Gulp ad esempio per copiare i file necessari nella posizione desiderata di wwwroot.

ho scritto un blog post su questo a gennaio che i dettagli NPM, Gulp e un sacco di altri dettagli che sono ancora attuali. Inoltre, qualcuno ha richiamato l'attenzione sulla mia domanda SO che ho chiesto e alla fine mi ha risposto here, che è probabilmente utile.

Ho creato un Gist che mostra il gulpfile.js come un esempio.

Nella tua Startup.cs è comunque importante utilizzare file statici:

app.UseStaticFiles(); 

Questo farà sì che l'applicazione può accedere a ciò di cui ha bisogno.

Answer 5

Installare il Bundler and Minifier in Visual Studio Extensions

quindi si crea un bundleconfig.json e immettere il seguente tipo:

// 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 
    } 
] 

Così Bundler e minifier (gulp based) ha accesso ai file di origine (che dovrebbe essere escluso da Visual Studio ed anche escluso da GIT) e inserirli in wwwroot come specificato

solo effetti collaterali ogni volta che lo si salva verrà eseguito (oppure è possibile impostarlo o eseguirlo manualmente)

Answer 6

Shawn Wildermuth ha una bella guida qui: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

link dell'articolo per la gulpfile su GitHub dove ha implementato la strategia in questo articolo. Si potrebbe semplicemente copiare e incollare la maggior parte dei contenuti gulpfile in yours, ma essere sicuri di aggiungere i pacchetti adeguati nella package.json sotto devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream