Voglio aggiornare Bootstrap in ASP.NET Core con NuGet. Ho usato questo:
Install-Package bootstrap -Version 4.0.0
Ha aggiunto le dipendenze, ma come posso aggiungerlo al mio progetto ora? Qual è il percorso per le dipendenze NuGet locali?
Voglio aggiornare Bootstrap in ASP.NET Core con NuGet. Ho usato questo:
Install-Package bootstrap -Version 4.0.0
Ha aggiunto le dipendenze, ma come posso aggiungerlo al mio progetto ora? Qual è il percorso per le dipendenze NuGet locali?
Risposte:
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:
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 wwwroot
cartella contiene semplicemente una cartella lib
che 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.bundle
file 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 wwwroot
cartella. Possiamo anche creare una lib
cartella 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.cshtml
file 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.
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.json
file 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_modules
cartella. Quindi ciò che resta da fare è trasferire i file da lì nella nostra wwwroot
cartella. Ci sono alcune opzioni per farlo:
bundleconfig.json
per raggruppamento e minificazionePossiamo usare uno dei vari modi per consumare un bundleconfig.json
per 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.json
alla 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.css
e vendor.js.css
vengono creati correttamente. Quindi tutto ciò che dobbiamo fare è regolare di _Layouts.html
nuovo 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>
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.js
nella 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.json
per avere dipendenze da gulp
e 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 .csproj
per 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, default
viene eseguita l' build-vendor
attività Gulp, che esegue le attività, che quindi costruisce le nostre vendor.min.css
e vendor.min.js
proprio come abbiamo fatto prima. Quindi, dopo aver regolato il nostro _Layout.cshtml
come sopra, possiamo fare uso di jQuery e Bootstrap.
Sebbene la configurazione iniziale di Gulp sia un po 'più complicata di bundleconfig.json
quella 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.
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 wwwroot
cartella 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.
node -v
e ottenere una versione corrente qui su nodejs.org
Esaminando questo, sembra che l'approccio LibMan funzioni meglio per le mie esigenze con l'aggiunta di Bootstrap. Mi piace perché ora è integrato in Visual Studio 2017 (15.8 o successivo) e ha le proprie finestre di dialogo.
Aggiornamento 6/11/2020: bootstrap 4.1.3 è ora aggiunto per impostazione predefinita con VS-2019.5 (grazie a Harald S. Hanssen per averlo notato).
Il metodo predefinito che VS aggiunge ai progetti usa Bower ma sembra che sia in via di uscita. Nell'intestazione della pergola di Microsoft pagina scrivono:
A seguito di un paio di collegamenti portano a Usa LibMan con ASP.NET Core in Visual Studio dove mostra come le librerie possono essere aggiunte utilizzando una finestra di dialogo incorporata:
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella del progetto in cui devono essere aggiunti i file. Scegli Aggiungi> Libreria lato client. Viene visualizzata la finestra di dialogo Aggiungi libreria lato client: [fonte: Scott Addie 2018 ]
Quindi per bootstrap basta (1) selezionare unpkg, (2) digitare "bootstrap @ .." (3) Install. Dopo questo, ti consigliamo di verificare che tutti gli include in _Layout.cshtml o in altri posti siano corretti. Dovrebbero essere qualcosa come href = "~ / lib / bootstrap / dist / js / bootstrap ..." )
Prova Libman , è semplice come Bower e puoi specificare wwwroot / lib / come cartella di download.
Qual è il trucco per me è:
1) Fare clic con il tasto destro su wwwroot> Aggiungi> Libreria lato client
2) Digitato "bootstrap" nella casella di ricerca
3) Seleziona "Scegli file specifici"
4) Scorri verso il basso e seleziona una cartella. Nel mio caso ho scelto "twitter-bootstrap"
5) Controlla "css" e "js"
6) Fare clic su "Installa".
Pochi secondi dopo li ho tutti nella cartella wwwroot. Fai lo stesso per tutti i pacchetti lato client che desideri aggiungere.
Libman sembra essere lo strumento preferito da Microsoft ora. È integrato in Visual Studio 2017 (15.8).
Questo articolo descrive come usarlo e anche come impostare un ripristino eseguito dal processo di compilazione.
La documentazione di Bootstrap ti dice di quali file hai bisogno nel tuo progetto.
Il seguente esempio dovrebbe funzionare come configurazione per libman.json.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "twitter-bootstrap@4.2.1",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.bundle.js",
"css/bootstrap.min.css"
]
},
{
"library": "jquery@3.3.1",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
}
]
}
Usiamo bootstrap 4 in asp.net core ma facciamo riferimento alle librerie da "npm" usando l'estensione "Package Installer" e abbiamo trovato che questo è migliore di Nuget per le librerie Javascript / CSS.
Quindi usiamo l'estensione "Bundler & Minifier" per copiare i file rilevanti per la distribuzione (dalla cartella npm node_modules, che si trova all'esterno del progetto) in wwwroot come ci piace per lo sviluppo / distribuzione.
Sfortunatamente, avrai difficoltà a usare NuGet per installare Bootstrap (o la maggior parte degli altri framework JavaScript / CSS) su un progetto .NET Core. Se guardi l'installazione di NuGet ti dice che è incompatibile:
se devi sapere dove sono le dipendenze dei pacchetti locali, ora si trovano nella directory del tuo profilo locale. vale a dire%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts
.
Tuttavia, suggerisco di passare a npm, o bower, come nella risposta di Saineshwar.
BS4 è ora disponibile su .NET Core 2.2 . Sul programma di installazione SDK 2.2.105 x64 di sicuro. Eseguo Visual Studio 2017 con esso. Fin qui tutto bene per i nuovi progetti di applicazioni web.
Perché non utilizzare semplicemente un CDN? A meno che non sia necessario modificare il codice di BS, è sufficiente fare riferimento ai codici in CDN.
Vedere BS 4 CDN qui:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Nella parte inferiore della pagina.
Usa il file di configurazione nmp (aggiungilo al tuo progetto web) quindi aggiungi i pacchetti necessari nello stesso modo in cui abbiamo fatto con bower.json e salva. Visual Studio lo scaricherà e lo installerà. Troverai il pacchetto sotto il nodo nmp del tuo progetto.