Sto usando 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 è iniziato aggiungendo 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 si trova allo stesso livello di wwwroot nella directory del progetto:

Poiché ASP.NET Core serve i file statici dalla cartella wwwroot e node_modules non è presente, ho dovuto apportare un paio di modifiche per farlo funzionare, il primo: l'aggiunta di app.UseFileServer subito prima di app.UseStaticFiles nel mio avvio. cs file:

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

app.UseStaticFiles();

e il secondo, includendo node_modules nelle mie publishOptions nel file project.json:

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

Funziona nel mio ambiente di sviluppo e funziona anche quando lo distribuisco nella mia istanza del servizio app di Azure, i file statici jquery, bootstrap e fantastici per i tipi di carattere vengono serviti bene, ma non sono sicuro di questa implementazione.

Qual è l'approccio giusto per farlo?

Questa soluzione è arrivata dopo aver raccolto molte informazioni da diverse fonti e provato alcune che non hanno funzionato, e sembra un po 'strano dover servire questi file dall'esterno di wwwroot.

Qualsiasi consiglio sarà molto apprezzato.

Pubblicando il tuo intero node_modules cartella si distribuiscono molti più file di quelli effettivamente necessari in produzione.

Utilizza invece un task runner come parte del processo di compilazione per impacchettare i file necessari e distribuirli nel tuo file wwwroot cartella. Ciò ti consentirà anche di concatenare e minimizzare le tue risorse allo stesso tempo, invece di dover servire ogni singola libreria separatamente.

È quindi possibile anche rimuovere completamente la FileServerconfigurazione e fare affidamento su UseStaticFiles.

Attualmente, gulp è il task runner preferito da VS. Aggiungi un gulpfile.jsalla radice del tuo progetto e configuralo per elaborare i tuoi file statici durante la pubblicazione.

Ad esempio, puoi aggiungere la seguente scriptssezione a project.json:

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

Che funzionerebbe con il seguente gulpfile (l'impostazione predefinita quando si esegue lo scaffolding 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"]);

• utilizzando npm per la gestione delle librerie lato client è una buona scelta (al contrario di Bower o NuGet), stai pensando nella giusta direzione :)
• Suddividi i progetti lato server (ASP.NET Core) e lato client (ad esempio Angular 2, Ember, React) in cartelle separate (altrimenti il ​​tuo progetto ASP.NET potrebbe avere molto rumore - unit test per il codice lato client, node_modules cartella, costruire artefatti ecc.). Gli sviluppatori front-end che lavorano nella stessa squadra con te ti ringrazieranno per questo :)
• Ripristina i moduli npm a livello di soluzione (analogamente a come ripristini i pacchetti tramite NuGet, non nella cartella del progetto), in questo modo puoi avere anche test unitari e di integrazione in una cartella separata (invece di avere test JavaScript lato client all'interno del tuo Progetto ASP.NET Core).
• L'uso potrebbe non essere necessario FileServer, avendoStaticFiles dovrebbe essere sufficiente per servire file statici (.js, immagini ecc.)
• Utilizza Webpack per raggruppare il codice lato client in uno o più blocchi (bundle)
• Potresti non aver bisogno di Gulp / Grunt se si utilizza un bundler di moduli come Webpack
• Scrivi script di automazione della build in ES2015 + JavaScript (al contrario di Bash o PowerShell), funzioneranno su più piattaforme e saranno più accessibili a una varietà di sviluppatori web (tutti parlano JavaScript al giorno d'oggi)
• Rinomina wwwrootin public, altrimenti la struttura delle cartelle in App Web di Azure creerà confusione ( D:\Home\site\wwwroot\wwwrootrispetto aD:\Home\site\wwwroot\public )
• Pubblica solo l'output compilato in App Web di Azure (non dovresti mai eseguire il push node_modulesa un server di hosting Web). Vedi tools/deploy.jscome esempio.

Visita ASP.NET Core Starter Kit su GitHub (dichiarazione di non responsabilità: sono l'autore)

Installa Bundler e Minifier nelle estensioni di Visual Studio

Quindi crei un bundleconfig.jsone inserisci quanto segue come:

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

Quindi il bundler e il minifier (basato su gulp) hanno accesso ai file sorgente (che dovrebbero essere esclusi da Visual Studio e anche esclusi da GIT) e li inserisce in wwwroot come specificato

l'unico effetto collaterale ogni volta che lo salvi eseguirà questo (ma puoi impostarlo per eseguirlo manualmente)

Ti do due risposte. npm combinato con altri strumenti è potente ma richiede un po 'di lavoro per l'installazione. Se desideri scaricare solo alcune librerie, potresti invece utilizzare Library Manager (rilasciato in Visual Studio 15.8).

NPM (avanzato)

Per prima cosa aggiungi package.json nella radice del tuo progetto. Aggiungi il seguente contenuto:

{
  "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"
  }
}

Ciò consentirà a NPM di scaricare Bootstrap, JQuery e altre librerie utilizzate in un nuovo progetto principale asp.net in una cartella denominata node_modules. Il passaggio successivo consiste nel copiare i file in una posizione appropriata. Per fare questo useremo gulp, anch'esso scaricato da NPM. Quindi aggiungi un nuovo file nella radice del tuo progetto chiamato gulpfile.js . Aggiungi il seguente contenuto:

/// <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"));
});

Questo file contiene un codice JavaScript che viene eseguito quando il progetto viene compilato e pulito. Copierà tutti i file necessari su lib2 ( non lib - puoi cambiarlo facilmente ). Ho usato la stessa struttura di un nuovo progetto, ma è facile cambiare i file in una posizione diversa. Se sposti i file, assicurati di aggiornare anche _Layout.cshtml . Nota che tutti i file nella directory lib2 verranno rimossi quando il progetto viene pulito.

Se fai clic con il pulsante destro del mouse su gulpfile.js , puoi selezionare Task Runner Explorer . Da qui puoi eseguire gulp manualmente per copiare o pulire i file.

Gulp potrebbe anche essere utile per altre attività come minimizzare i file JavaScript e CSS:

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

Library Manager (semplice)

Fare clic con il pulsante destro del mouse sul progetto e selezionare Gestisci librerie lato client . Il file libman.json è ora aperto. In questo file si specifica quale libreria e file utilizzare e dove devono essere archiviati localmente. Veramente semplice! Il file seguente copia le librerie predefinite utilizzate durante la creazione di un nuovo progetto 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"
    }
  ]
}

Se sposti i file, assicurati di aggiornare anche _Layout.cshtml .

Invece di provare a servire la cartella dei moduli del nodo, puoi anche usare Gulp per copiare ciò che ti serve in wwwroot.

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

Anche questo potrebbe aiutare

Visual Studio 2015 ASP.NET 5, attività Gulp non copia i file da node_modules

Qual è l'approccio giusto per farlo?

Ci sono molti approcci "giusti", devi solo decidere quale si adatta meglio alle tue esigenze. Sembra che tu stia fraintendendo come usare node_modules...

Se hai familiarità con NuGet , dovresti considerare npm come la sua controparte lato client. Dove la node_modulesdirectory è come la bindirectory per NuGet . L'idea è che questa directory sia solo una posizione comune per l'archiviazione dei pacchetti, secondo me è meglio prendere a dependencysui pacchetti che ti servono come hai fatto in package.json. Quindi utilizzare un task runner come Gulpad esempio per copiare i file necessari nella wwwrootposizione desiderata .

Ho scritto un post sul blog su questo a gennaio che descrive in dettaglio npm , Gulp e un sacco di altri dettagli che sono ancora rilevanti oggi. Inoltre, qualcuno ha richiamato l'attenzione sulla mia domanda SO che ho posto e alla fine mi sono risposto qui , il che probabilmente è utile.

Ho creato un Gistche mostra il gulpfile.jscome esempio.

Nel tuo Startup.csè comunque importante utilizzare file statici:

app.UseStaticFiles();

Ciò garantirà che la tua applicazione possa accedere a ciò di cui ha bisogno.

Un approccio molto più semplice consiste nell'usare il pacchetto Nuget OdeToCode.UseNodeModules . L'ho appena testato con .Net Core 3.0. Tutto quello che devi fare è aggiungere il pacchetto alla soluzione e referenziarlo nel metodo Configure della classe Startup:

app.UseNodeModules();

L'ho imparato dall'eccellente corso Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap e Angular Pluralsight di Shawn Wildermuth.

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

L'articolo si collega al gulpfile su GitHub dove ha implementato la strategia nell'articolo. Potresti semplicemente copiare e incollare la maggior parte dei contenuti gulpfile nel tuo, ma assicurati di aggiungere i pacchetti appropriati in package.json sotto devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

Ho trovato un modo migliore per gestire i pacchetti JS nel mio progetto con i task runner NPM Gulp / Grunt. Non mi piace l'idea di avere un NPM con un altro livello di libreria javascript per gestire l '"automazione", e il mio requisito numero uno è eseguire semplicemente l'aggiornamento npm senza altre preoccupazioni se devo eseguire roba gulp, se ha copiato tutto con successo e viceversa.

Il modo NPM:

• Il minifier JS è già in bundle nel core ASP.net, cerca bundleconfig.json quindi questo non è un problema per me (non compilare qualcosa di personalizzato)
• La cosa buona di NPM è che ha una buona struttura dei file in modo da poter sempre trovare le versioni precompilate / minimizzate delle dipendenze sotto node_modules / module / dist
• Sto utilizzando uno script NPM node_modules / .hooks / {eventname} che gestisce la copia / aggiornamento / cancellazione dei file Project / wwwroot / lib / module / dist / .js, puoi trovare la documentazione qui https: // docs.npmjs.com/misc/scripts (aggiornerò lo script che sto usando per git una volta che sarà più lucido) Non ho bisogno di runner di attività aggiuntivi ( strumenti .js che non mi piacciono) ciò che mantiene il mio progetto pulito e semplice.

La via del pitone:

https://pypi.python.org/pyp ... ma in questo caso è necessario mantenere i sorgenti manualmente

Per favore scusa la lunghezza di questo post.

Questo è un esempio funzionante che utilizza ASP.NET Core versione 2.5.

Qualcosa di degno di nota è che project.json è obsoleto ( vedi qui ) a favore di .csproj . Un problema con .csproj . file è la grande quantità di funzionalità e il fatto che non c'è una posizione centrale per la sua documentazione ( vedi qui ).

Un'altra cosa, questo esempio sta eseguendo ASP.NET core in un container Docker Linux (alpine 3.9); quindi i percorsi lo rifletteranno. Utilizza anche gulp ^ 4.0. Tuttavia, con alcune modifiche, dovrebbe funzionare con le versioni precedenti di ASP.NET Core, Gulp, NodeJS e anche senza Docker.

Ma ecco una risposta:

gulpfile.js vede il vero esempio di lavoro qui

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

Aggiungi una destinazione nel file .csproj . Si noti che abbiamo anche aggiunto un Watch per guardare ed escludere se sfruttiamo il dotnet run watchcomando.

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>

Ora, quando dotnet run buildviene eseguito, installerà e creerà anche i moduli del nodo.