Come altri già menzionati, il gestore di pacchetti Bower , che di solito veniva utilizzato per dipendenze come questa in applicazioni che non si basano su un pesante scripting lato client, è in via di uscita e consiglia attivamente di passare ad altre soluzioni:
..psst! Mentre Bower viene mantenuto, consigliamo filato e webpack per nuovi progetti front-end!
Quindi, anche se puoi ancora usarlo in questo momento, Bootstrap ha anche annunciato di abbandonare il supporto per esso . Di conseguenza, i modelli ASP.NET Core incorporati vengono lentamente modificati per allontanarsi anche da esso.
Sfortunatamente, non esiste un percorso chiaro da seguire. Ciò è principalmente dovuto al fatto che le applicazioni Web si spostano continuamente ulteriormente sul lato client, richiedendo sistemi di compilazione complessi sul lato client e molte dipendenze. Quindi, se stai costruendo qualcosa del genere, potresti già sapere come risolverlo e puoi espandere il tuo processo di compilazione esistente per includere semplicemente anche Bootstrap e jQuery lì.
Ma ci sono ancora molte applicazioni web là fuori che non sono così pesanti sul lato client, dove l'applicazione viene ancora eseguita principalmente sul server e il server offre come risultato visualizzazioni statiche. Bower in precedenza ha riempito questo aspetto semplificando la pubblicazione delle dipendenze lato client senza un gran processo.
Nel mondo .NET abbiamo anche NuGet e con le versioni precedenti di ASP.NET, potremmo usare anche NuGet per aggiungere dipendenze ad alcune dipendenze lato client poiché NuGet posizionerebbe correttamente il contenuto nel nostro progetto. Sfortunatamente, con il nuovo.csproj formato e il nuovo NuGet, i pacchetti installati si trovano al di fuori del nostro progetto, quindi non possiamo semplicemente fare riferimento a quelli.
Questo ci lascia con alcune opzioni su come aggiungere le nostre dipendenze:
Installazione una tantum
Questo è ciò che fanno attualmente i modelli ASP.NET Core, che non sono applicazioni a pagina singola. Quando li usi per creare una nuova applicazione, la wwwrootcartella contiene semplicemente una cartella libche contiene le dipendenze:
Se guardi attentamente i file attualmente, puoi vedere che erano stati originariamente posizionati lì con Bower per creare il modello, ma è probabile che cambierà presto. L'idea di base è che i file vengano copiati una volta inwwwroot cartella in modo da poter dipendere da loro.
Per fare ciò, possiamo semplicemente seguire l'introduzione di Bootstrap e scaricare direttamente i file compilati . Come menzionato sul sito di download, questo non include jQuery , quindi dobbiamo scaricarlo anche separatamente; esso contiene Popper.js anche se si sceglie di utilizzare il bootstrap.bundlefile in seguito, cosa che faremo. Per jQuery, possiamo semplicemente ottenere un singolo file "compresso, di produzione" dal sito di download (fare clic con il pulsante destro del mouse sul collegamento e selezionare "Salva collegamento con nome ..." dal menu).
Questo ci lascia con alcuni file che verranno semplicemente estratti e copiati nella wwwrootcartella. Possiamo anche creare una libcartella per rendere più chiaro che si tratta di dipendenze esterne:
Questo è tutto ciò di cui abbiamo bisogno, quindi ora dobbiamo solo regolare il nostro _Layout.cshtmlfile per includere quelle dipendenze. Per questo, aggiungiamo il seguente blocco a <head>:
<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>
E il blocco seguente alla fine del <body>:
<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>
Puoi anche includere solo le versioni minimizzate e saltare gli <environment>helper dei tag qui per renderlo un po 'più semplice. Ma è tutto ciò che devi fare per farti iniziare.
Dipendenze da NPM
Il modo più moderno, anche se si desidera mantenere aggiornate le proprie dipendenze, sarebbe ottenere le dipendenze dal repository dei pacchetti NPM. Puoi usare NPM o Yarn per questo; nel mio esempio, userò NPM.
Per iniziare, dobbiamo creare un package.jsonfile per il nostro progetto, in modo da poter specificare le nostre dipendenze. Per fare ciò, lo facciamo semplicemente dalla finestra di dialogo "Aggiungi nuovo elemento":
Una volta che lo abbiamo, dobbiamo modificarlo per includere le nostre dipendenze. Dovrebbe assomigliare a questo:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Salvando, Visual Studio eseguirà già NPM per installare le dipendenze per noi. Verranno installati nella node_modulescartella. Quindi ciò che resta da fare è trasferire i file da lì nella nostra wwwrootcartella. Ci sono alcune opzioni per farlo:
bundleconfig.json per raggruppamento e minificazione
Possiamo usare uno dei vari modi per consumare un bundleconfig.jsonper raggruppamento e minificazione, come spiegato nella documentazione . Un modo molto semplice consiste nell'usare semplicemente il pacchetto NuGet BuildBundlerMinifier che imposta automaticamente un'attività di compilazione per questo.
Dopo aver installato quel pacchetto, dobbiamo creare un bundleconfig.jsonalla radice del progetto con i seguenti contenuti:
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": { "enabled": false }
}
]
Questo fondamentalmente configura quali file combinare in cosa. E quando costruiamo, possiamo vedere che vendor.min.csse vendor.js.cssvengono creati correttamente. Quindi tutto ciò che dobbiamo fare è regolare di _Layouts.htmlnuovo il nostro per includere quei file:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Utilizzando un task manager come Gulp
Se vogliamo muoverci un po 'di più nello sviluppo lato client, possiamo anche iniziare a utilizzare strumenti che utilizzeremmo lì. Ad esempio Webpack che è uno strumento di compilazione molto comunemente usato per davvero tutto. Ma possiamo anche iniziare con un task manager più semplice come Gulp e fare da soli i pochi passaggi necessari.
Per questo, aggiungiamo un gulpfile.jsnella radice del nostro progetto, con i seguenti contenuti:
const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('build-vendor-css', () => {
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));
gulp.task('default', gulp.series('build-vendor'));
Ora, dobbiamo anche modificare il nostro package.jsonper avere dipendenze da gulpe gulp-concat:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Infine, modifichiamo il nostro .csprojper aggiungere la seguente attività che assicura che la nostra attività Gulp venga eseguita quando creiamo il progetto:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Ora, quando creiamo, defaultviene eseguita l' build-vendorattività Gulp, che esegue le attività, che quindi costruisce le nostre vendor.min.csse vendor.min.jsproprio come abbiamo fatto prima. Quindi, dopo aver regolato il nostro _Layout.cshtmlcome sopra, possiamo fare uso di jQuery e Bootstrap.
Sebbene la configurazione iniziale di Gulp sia un po 'più complicata di bundleconfig.jsonquella sopra, ora siamo entrati nel mondo dei nodi e possiamo iniziare a utilizzare tutti gli altri fantastici strumenti presenti. Quindi potrebbe valere la pena iniziare con questo.
Conclusione
Anche se improvvisamente questo è diventato molto più complicato rispetto al solo utilizzo di Bower, otteniamo anche molto controllo con queste nuove opzioni. Ad esempio, ora possiamo decidere quali file sono effettivamente inclusi nella wwwrootcartella e come appaiono esattamente. E possiamo anche usarlo per fare i primi passi nel mondo dello sviluppo lato client con Node, che almeno dovrebbe aiutare un po ' con la curva di apprendimento.
