Come utilizzare npm con ASP.NET Core

Sto usando npm per gestire jQuery, Bootstrap, Carattere Fantastico e simili librerie client ho bisogno per il mio ASP.NET applicazione principale.

L’approccio che ha funzionato per me è iniziato con l’aggiunta di un pacchetto.file json per il 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 in node_modules cartella che si trova sullo stesso livello come wwwroot nella directory del progetto:

Come utilizzare npm con ASP.NET Core

Come ASP.NET Core serve il file statici dalla cartella wwwroot e node_modules non c’è, ho dovuto fare un paio di modifiche per rendere questo lavoro, il primo: l’aggiunta di app.UseFileServer a destra prima app.UseStaticFiles a 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 la seconda, tra node_modules nel mio publishOptions nel progetto.file json:

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

Questo funziona nel mio ambiente di sviluppo, e funziona anche quando ho distribuire ai miei Azure App istanza di Servizio, jquery, bootstrap e font-awesome file statici ottenere servito bene, ma io non sono sicuro di questa implementazione.

Qual è l’approccio giusto per fare questo?

Questa soluzione è venuto dopo la raccolta di un sacco di bit di informazioni da diverse fonti e provare un po ‘che non lavoro, e sembra un po’ strano dover servire questi file dall’esterno wwwroot.

Qualsiasi consiglio sarà molto apprezzato.



10 Replies
  1. 39

    Pubblicando il tutto node_modules cartella si distribuisce molto più file che si sarà effettivamente bisogno in produzione.

    Invece, utilizzare un task runner come parte del processo di creazione di un pacchetto i file che avete bisogno di, e di distribuirli ai vostri wwwroot cartella. Questo vi permetterà anche di concat e minimizzare le risorse allo stesso tempo, piuttosto che dover servire ogni singola biblioteca separatamente.

    È inoltre possibile rimuovere completamente il FileServer di configurazione e si basano su UseStaticFiles invece.

    Attualmente, gulp è il VS compito corridore di scelta. Aggiungi un gulpfile.js alla radice del progetto, e configurarlo per elaborare i file statici su pubblica.

    Per esempio, è possibile aggiungere i seguenti scripts sezione project.json:

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

    Che dovrebbe funzionare con il seguente gulpfile (impostazione predefinita quando ponteggio 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"]);
    • Io sono un po ‘ confuso su come questo è la risposta alla domanda. Questo è quasi esattamente quello che Microsoft ha per la configurazione Gulp qui (docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp). Tuttavia, per quanto posso dire questo non abbia contenuto dal mio node_modules directory e aggiungere ‘lib’ o renderlo utilizzabile in qualsiasi dei miei file… sono molto nuovo a questo, così incredibilmente confuso dai apparentemente incredibilmente complicato mondo nuovo di Sviluppo Web…
    • Complicato e va bene. Io sono pronto ad abbandonare il front-end di tutto e di lavoro alle Api.
    • Questo è l’approccio giusto in generale, ma la risposta lascia fuori un passaggio cruciale: copiare i file dalla node_modules cartella wwwroot come una Boccata di attività. Iniziare con var nodeRoot = ‘./node_modules/’; e aggiungere un’attività di copie desiderato sottocartella nodeRoot nella sottocartella appropriata di webroot. Nessun tempo per elaborare, ma se vi è interesse, posso aggiungere dettagli più tardi.
    • Perché nessuno ha sollevato la ovvia: “Perché dobbiamo fare questa domanda!” Perché abbiamo intenzionalmente installare i file in una posizione in cui essi non possono essere utilizzati? Quindi, perché il nostro file non sono accessibili, l’installazione e la configurazione di un elaborato programma di utilità per copiare in una posizione in cui possono essere utilizzati. È davvero ridicolo.
    • Perché, in generale, sono lo sviluppo di dipendenze, non la produzione di dipendenze. Sono d’accordo, è un onere, di passare attraverso la danza solo per ottenere un’app di installazione, ma penso Mads Kristensen può avere alcune cose all’orizzonte per semplificare i casi semplici
    • c’è interesse in ciò che compito sembra. In particolare, se si dispone di più node_modules; dobbiamo scrivere a ciascuno dei compiti in modo esplicito/separatamente? Suppongo che si potrebbe usare un array, e forEach, ma c’è un modo migliore? (“attività di copie desiderato sottocartella nodeRoot nella sottocartella appropriata”)
    • Questa non è una risposta a quella domanda. L’unica cosa è proprio qui che Gulp può essere utilizzato per il nodo di moduli di attività di pubblicazione.
    • Perché il utensileria qui è una schifezza, fondamentalmente. Utilizzando npm è così npm, proprio come si farebbe per il nulla. Non c’è nulla di specifico per ASP.NET Core. Tutto va in node_modules perché è quello che npm fa. Gulp attività è necessaria per spostare le cose nel posto giusto, cioè dove realmente bisogno di loro. Penso che il problema è che Microsoft ha fornito una bella integrazione con Pergola, ma ora Bower è morto (o almeno di morire) e Microsoft non ha fornito alcuna alternativa utensili.
    • È solo in anteprima, al momento, ma Microsoft sta passando da Pergola a una alternativa leggera chiamato LibraryManager. Non funziona per tutti i casi di utilizzo (ossia SPA apps), ma per il semplice “caduta di jQuery in una cartella” dovrebbe essere una buona opzione. blogs.msdn.microsoft.com/webdev/2018/04/17/…
    • E ‘la mia comprensione che NPM pacchetti in node_modules è costituito anche il “codice sorgente” per il pacchetto e le sue dipendenze sì? A meno che non siamo come gli sviluppatori hanno un requisito, inoltre, eseguire il debug e il passaggio attraverso il codice javascript di un pacchetto, tutti siamo davvero interessati sono i file nel ‘dist’ cartella giusto? Quindi, uno strumento a che fare solo con la copia di file da dist ovunque si desidera in modo statico servire i file nel nostro progetto è ciò che è richiesto. Serve node_modules sembra sbagliato. Sono nuovo di webdev quindi la mia comprensione potrebbe essere sbagliato e io sono felice di essere istruiti su questo.
    • Ehi Doug – hai detto che ci sta qualche altro codice, ti dispiacerebbe prendere un picco a questo, vedere se si può aiutare? stackoverflow.com/questions/51050816/…
    • progetto.json non è più una cosa del genere in ASP.NET progetti Core, ma che cosa è l’equivalente XML di costruire questi compiti? Può questa risposta essere modificato per includere questo campione?
    • No dico. Libman è terribile e una perdita di tempo! Il cdnjs provider è inadeguata selezione di anche il più comunemente usato librerie. C’è un bootstrap e su twitter bootstrap. Il secondo è la versione 4, mentre il primo è la versione 3. Libman del autosuggest funzione non elenco entrambe queste librerie digitando ‘bootstrap’! Mi ci volle quasi un’ora per trovare la versione 4 ed è stato inutile in quanto non include il sass file che fa parte della distribuzione ufficiale.

  2. 41

    Come utilizzare npm con ASP.NET Core

    • Utilizzando npm per la gestione di librerie sul lato client è una buona scelta (invece di Bower o NuGet), stai pensando nel modo giusto 🙂
    • Split lato server (ASP.NET Core) e lato client (es. Angolare 2, Ember, Reagire) progetti in cartelle separate (in caso contrario il ASP.NET il progetto può avere un sacco di rumore – test di unità per il codice lato client, node_modules cartella, costruire manufatti, etc.). Front-end di sviluppatori che lavorano in squadra con voi, vi ringrazio per questo 🙂
    • Ripristino npm moduli a livello di soluzione (allo stesso modo come il ripristino di pacchetti tramite NuGet – non nella cartella del progetto), in questo modo è possibile avere unità e test di integrazione in una cartella separata e (al contrario di avere JavaScript lato client test all’interno del proprio ASP.NET Nucleo centrale del progetto).
    • Uso potrebbe non essere necessario FileServer, avendo StaticFiles dovrebbe essere sufficiente per servire i file statici (.js, immagini etc.)
    • Utilizzare Webpack per aggregare il codice lato client in uno o più blocchi (bundle)
    • Potrebbe non essere necessario Gulp/Grunt se si sta utilizzando un modulo bundler come Webpack
    • Scrivere build script di automazione in ES2015+ JavaScript (invece di Bash o PowerShell), lavorano, cross-platform e di essere più accessibile per varietà di sviluppatori web (tutti parlano JavaScript oggi)
    • Rinominare wwwroot per public, altrimenti la struttura di cartelle in Azure Web Apps di confusione (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
    • Pubblicare solo l’output compilato per Azure Web Apps (non si dovrebbe mai spingere node_modules di un web server di hosting). Vedere tools/deploy.js come un esempio.

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

    • Bella risposta, complimenti per il vostro lavoro a fornire alla comunità con un starter kit!
    • Ho costruito con successo un pubblico enorme Angolare app per un importante marchio BRITANNICO all’inizio di quest’anno, e ancora non riuscivo neanche a capire la maggior parte di questa risposta. Non posso nemmeno cominciare a imparare come tutto il luogo. Letteralmente avere una crisi di carriera.
    • questo è un buon riassunto di cosa Fare e Dont di scrittura e di gestione lato client script e file. Salvato il mio tempo e la ricerca. Complimenti a te!
    • Purtroppo, Visual Studio (stupidamente IMHO) considera “wwwroot” directory appositamente, in base al suo nome da solo, conferendogli una “radice del web” icona in esplora soluzioni di marcatura e il suo contenuto come “Nessuno” per impostazione predefinita, piuttosto che il “Contenuto”. Se l’intenzione è di porre in modo statico servita file, e si utilizza Visual Studio, probabilmente si dovrebbe lasciare il nome “wwwroot”. Sono d’accordo che è un brutto nome però.
  3. 26

    Installare il Bundler e Minifier in Estensioni di Visual Studio

    Quindi si crea un bundleconfig.json e immettere il seguente 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
      }
    ]

    Così bundler e minifier (gulp base) ha accesso al file di origine (che dovrebbero essere esclusi da Visual Studio e, inoltre, esclusi dal GIT) e li inserisce in wwwroot come specificato

    unico effetto collaterale è che ogni volta che si salva verrà eseguito questo (o è possibile impostare o eseguire manualmente)

    • Dopo aver visto Bower è morto e non riesco più ad aggiornare il Bootstrap senza passare per NPM, questo sembra essere il mio approccio preferito. Gulp o Webpack sembrare eccessivo rispetto a questa semplice soluzione, che è già l’ultima MVC modelli di progetto. Grazie per la condivisione!
    • Come le immagini di riferimento nel css essere trattati qui ? Mi trovo di fronte a un problema con le immagini ancora in node_modules cartella dove come css e js sono stati spostati a www. Qualsiasi idea di come risolvere questo problema ?
    • È questo IDE-agnostico? Come funzionerà se qualche team utilizza VS Codice, e non come questo gioco in un CD costruire pipeline?
    • Quando si installa l’Insaccatrice e Minifier pacchetto NuGet, i documenti dicono che inietta costruire obiettivi che corrono a costruire e pulite tempo. Suppongo che una volta che è a posto, funziona bene, indipendentemente che l’IDE è utilizzato, giusto? Vedi di più: docs.microsoft.com/en-gb/aspnet/core/client-side/…
    • Quest’ultimo è utile solo per la definizione di questi script al di fuori dell’ambiente di Sviluppo. Dal mio _Layout pagina ho ancora il manuale di riferimento il file JS e CSS che ho bisogno, ma il node_modules cartella è al di fuori del sito… quindi non credo che questo risolva il problema correttamente, hai ancora bisogno di una Boccata di script per copiare i file necessari per la mia cartella wwwroot.
  4. 16

    Vi do due risposte. npm combinato con altri strumenti è potente, ma richiede un po ‘ di lavoro di preparazione. Se si desidera solo per scaricare alcune librerie, si potrebbe desiderare di utilizzare Library Manager invece (pubblicato in Visual Studio 15.8).

    NPM (Avanzato)

    Prima di aggiungere pacchetto.json nella root del tuo progetto. Aggiungere 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"
      }
    }

    Questo renderà NPM scaricare Bootstrap, JQuery e altre librerie che viene utilizzato in un nuovo asp.net nucleo centrale del progetto in una cartella denominata node_modules. Il prossimo passo è quello di copiare il file in un luogo adeguato. Per fare questo useremo gulp, che inoltre è stato scaricato da NPM.
    Quindi aggiungere un nuovo file nella root del tuo progetto denominato gulpfile.js. Aggiungere 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 è costruire e pulito. E ‘ di copiare tutti i file necessari per lib2 (non lib – si può facilmente cambiare questo). Ho usato la stessa struttura in un nuovo progetto, ma è facile modificare i file in una posizione diversa. Se si sposta il file, assicurarsi di aggiornare anche _Layout.cshtml. Nota che tutti i file di lib2-directory verrà rimosso quando il progetto è pulito.

    Se si fa clic destro su gulpfile.js, è possibile selezionare Attività Runner Explorer. Da qui è possibile eseguire gulp manualmente copiare o pulire i file.

    Gulp potrebbe essere utile anche per altre operazioni, come minify JavaScript e CSS file:

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

    Library Manager (Semplice)

    Fare clic destro sul progetto e selezionare Gestione lato client-librerie. Il file libman.json è ora aperto. In questo file si specifica che la biblioteca e il file che si desidera utilizzare e dove devono essere memorizzati in locale. Davvero semplice! Le seguenti copie di file di librerie predefinite che viene utilizzato durante la creazione di un nuovo ASP.NET Core 2.1 progetto:

    {
      "version": "1.0",
      "defaultProvider": "cdnjs",
      "libraries": [
        {
          "library": "[email protected]",
          "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
          "destination": "wwwroot/lib/jquery/dist/"
        },
        {
          "library": "[email protected]",
          "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
          "destination": "wwwroot/lib/jquery-validation/dist/"
        },
        {
          "library": "[email protected]",
          "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
          "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
        },
        {
          "library": "[email protected]",
          "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": "[email protected]",
          "files": [ "list.js", "list.min.js" ],
          "destination": "wwwroot/lib/listjs"
        }
      ]
    }

    Se si sposta il file, assicurarsi di aggiornare anche _Layout.cshtml.

    • Library Manager-mai sentito parlare, ma è esattamente ciò di cui ho bisogno! Questa dovrebbe essere la risposta corretta.
    • Per evitare una boccata di errore, ho dovuto cambiare la prima linea di attività predefinita nel file gulpfile.js per gulp.task('default', function (done) { e poi aggiungere come ultima riga in funzione i seguenti: done(); Altrimenti avrei ricevuto il messaggio di errore The following tasks did not complete: Did you forget to signal async completion?
  5. 7

    Invece di cercare di servire il nodo moduli cartella, è possibile utilizzare anche Gulp di copiare ciò che è necessario per wwwroot.

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

    Questo potrebbe aiutare troppo

    Visual Studio 2015 ASP.NET 5, Gulp compito non è la copia di file da node_modules

    • Mi piace molto il secondo link, sembra in qualche modo familiare. 😉
    • Non è molto comodo quando si mescolano ASP.NET Core web app i file di origine con npm e moduli di codice lato client costruire uscita. Che è il motivo per cui ASP.NET la squadra è la rimozione di Gulp, pacchetto.json da default ASP.NET MVC modelli di progetto.
    • Non sapevo che. Quando ero alla VS Live nel mese di Marzo, erano tutti su di esso, ma non è cambiato molto da allora.
  6. 5

    Qual è l’approccio giusto per fare questo?

    Ci sono un sacco di “destra” si avvicina, devi solo decidere quale meglio si adatta alle vostre esigenze. Sembra come se si sta incomprensione come utilizzare node_modules

    Se hai dimestichezza con NuGet si dovrebbe pensare di npm come il suo lato client controparte. Dove il node_modules directory è come il bin directory per NuGet. L’idea è che questa directory è solo un percorso comune per l’archiviazione di pacchetti, a mio parere è meglio prendere un dependency su pacchetti che ti servono, come avete fatto in package.json. Quindi utilizzare un task runner come Gulp per esempio, per copiare i file di cui avete bisogno nel vostro desiderato wwwroot posizione.

    Ho scritto un post del blog su questo a gennaio che dettagli npm, Gulp e un sacco di altri dettagli che sono attuali ancora oggi. Inoltre, qualcuno ha chiamato l’attenzione per la mia domanda che ho fatto e, in definitiva, ha risposto a me stesso qui, che è probabilmente utile.

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

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

    app.UseStaticFiles();

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

    • “Ho scritto un post su questo blog a gennaio che dettagli npm, Gulp e un sacco di altri dettagli che sono attuali ancora oggi.” il fatto che da gennaio a giugno e si deve parlare ancora sta rilevante è esattamente il mio problema con la briga di imparare qualsiasi di questo fly-by-night roba. Ho troppo da imparare già senza sprecare il mio tempo su mode. Non è colpa tua, David, sei stato molto utile, ma non mi piace questo effimero mondo nuovo.
  7. 1

    Ho trovato un modo migliore di come gestire JS pacchetti a mio progetto con NPM Gulp/Grugnito attività di corridori. Non mi piace l’idea di avere un NPM con un altro strato di libreria javascript per gestire il “automazione”, e la mia esigenza è di semplice esecuzione npm aggiornamento senza altre preoccupazioni circa se ho bisogno di correre gulp roba, se è riuscito a copiare tutto e viceversa.

    NPM modo:

    • JS minifier è già incluso nel ASP.net core, cercare bundleconfig.json quindi questo non è un problema per me (non compilare
      qualcosa di personalizzato)
    • La cosa buona di NPM è che una buona struttura di file così posso sempre trovare la pre-compilato/minified versioni delle dipendenze
      sotto il node_modules/modulo/dist
    • Sto usando un NPM node_modules/.ganci/{eventname} script che gestisce il copia/update/delete del
      Progetto/wwwroot/lib/module/dist/.js file, è possibile trovare l’
      documentazione qui https://docs.npmjs.com/misc/scripts (io aggiornare lo script che sto usando per git, una volta sarò più lucido) non ho bisogno di
      ulteriori attività di corridori (
      .js strumenti che non mi piace) che mantiene il mio progetto semplice e pulito.

    Python modo:

    https://pypi.python.org/pyp… ma in questo caso è necessario mantenere
    le fonti manualmente

  8. 1

    Molto l’approccio più semplice è quello di utilizzare OdeToCode.UseNodeModules pacchetto Nuget. Ho appena provato con .Net Core 3.0. Tutto quello che dovete fare è aggiungere il pacchetto per la soluzione di riferimento e nel metodo di Configurazione di Avvio della classe:

    app.UseNodeModules();

    Ho imparato su di esso dall’eccellente La costruzione di una Web App con ASP.NET Core, MVC, Entity Framework Core, Bootstrap, e Angolare Pluralsight corso da Shawn Wildermuth.

    • E come si fa ad aggiungere npm pacchetti?
    • Ci sono diversi modi per aggiungere npm pacchetti per il vostro progetto. Io preferisco basta digitare il pacchetto.file json sotto le dipendenze del nodo, come spiegato qui: stackoverflow.com/a/49264424/5301317
  9. 0

    Scusate la lunghezza di questo post.

    Questo è un esempio di utilizzo ASP.NET Core versione 2.5.

    Qualcosa di nota è che il progetto.json è obsoleto (vedi qui)
    in favore di .csproj. Un problema con .csproj. il file è la grande quantità di funzioni e
    il fatto che non esiste in posizione centrale per la documentazione (vedi qui).

    Una cosa di più, questo esempio è in esecuzione ASP.NET core in una finestra Mobile di Linux alpino (3.9) contenitore;
    così le strade che riflettono. Esso utilizza anche gulp ^4.0. Tuttavia, con alcuni
    la modifica, dovrebbe funzionare con le versioni precedenti di ASP.NET Core, Gulp,
    NodeJS, e anche senza Mobile.

    Ma ecco una risposta:

    gulpfile.js vedere la reale exmple 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
    };
    

    Aggiungere un Target in .csproj file. Notare che abbiamo anche aggiunto un Guarda per guardare
    e escludere se si approfitta di dotnet run watch comando.

    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 build viene eseguito anche installare e costruire nodo moduli.

Lascia un commento