Saya ingin update di Bootstrap ASP.NET Inti dengan NuGet. Saya menggunakan ini:
Install-Package bootstrap -Version 4.0.0
Hal itu tambahkan dependensi tapi bagaimana saya menambahkannya ke proyek saya sekarang? Apa yang adalah jalan untuk NuGet lokal dependensi?
Seperti orang lain yang sudah disebutkan, manajer paket Bower, yang biasanya digunakan untuk dependensi seperti ini di aplikasi yang tidak bergantung pada berat client-side scripting, adalah keluar dan secara aktif merekomendasikan untuk pindah ke solusi lain:
..psst! Sementara Bower dipertahankan, kami sarankan benang dan webpack untuk front-end baru proyek! Jadi meskipun anda masih dapat menggunakannya sekarang, Bootstrap juga telah mengumumkan untuk drop dukungan untuk itu. Akibatnya, built-in ASP.NET Inti template perlahan-lahan sedang diedit untuk menjauh dari itu juga. Sayangnya, tidak ada jalan yang jelas ke depan. Ini adalah sebagian besar karena fakta bahwa aplikasi web yang terus bergerak lebih jauh ke sisi klien, memerlukan kompleks client-side membangun sistem dan banyak dependensi. Jadi jika anda sedang membangun sesuatu seperti itu, anda mungkin sudah tahu bagaimana untuk memecahkan masalah ini kemudian, dan anda dapat memperluas yang sudah ada membangun proses yang cukup juga mencakup Bootstrap dan jQuery di sana. Namun masih banyak aplikasi web di luar sana yang tidak begitu berat pada sisi client, di mana aplikasi masih berjalan terutama pada server dan server menyajikan pandangan statis sebagai hasilnya. Bower sebelumnya diisi ini dengan membuatnya mudah untuk mempublikasikan client-side dependensi tanpa banyak proses. Di .Dunia NET kami juga memiliki NuGet dan dengan sebelumnya ASP.NET versi, kita bisa menggunakan NuGet dan juga untuk menambah dependensi untuk beberapa client-side dependensi sejak NuGet hanya akan menempatkan konten ke proyek kami dengan benar. Sayangnya, dengan baru
.csproj
format dan baru NuGet, paket terinstall berada di luar dari proyek kami, jadi kita tidak bisa hanya referensi mereka. Ini meninggalkan kita dengan beberapa pilihan cara untuk menambah ketergantungan kita:Instalasi satu kali
Ini adalah apa yang ASP.NET Inti template, yang tidak satu halaman aplikasi, saat ini sedang melakukan. Ketika anda menggunakan mereka untuk membuat sebuah aplikasi baru,
wwwroot
folder hanya berisi folderlib
yang berisi dependensi: Jika anda melihat dekat pada file saat ini, anda bisa melihat bahwa mereka awalnya ditempatkan di sana dengan Bower untuk membuat template, tapi itu mungkin akan segera berubah. Ide dasarnya adalah bahwa file yang akan disalin setelah kewwwroot
folder sehingga anda dapat bergantung pada mereka. Untuk melakukan ini, kita hanya bisa mengikuti Bootstrap pengenalan dan download dikompilasi file secara langsung. Seperti yang disebutkan pada situs download, ini tidak termasuk jQuery, jadi kita perlu untuk men-download secara terpisah juga; itu berisi Popper.js meskipun jika kita memilih untuk menggunakanbootstrap.bundel
file selanjutnya yang akan kita lakukan. Untuk jQuery, kita hanya bisa mendapatkan satu "dikompresi, produksi" file dari situs download. Ini meninggalkan kita dengan beberapa file yang akan cukup ekstrak dan copy kewwwroot
folder. Kita juga dapat membuatlib
folder untuk membuatnya lebih jelas bahwa ini adalah dependensi eksternal: Itu semua yang kita butuhkan, jadi sekarang kita hanya perlu menyesuaikan_Layout.cshtml
file untuk memasukkan orang-orang ketergantungan. Untuk itu, kita tambahkan kode berikut ini di blok ke<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>
Dan berikut blok di akhir <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>
Anda dapat juga hanya mencakup versi minified dan melewatkan <lingkungan>
tag pembantu di sini untuk membuatnya sedikit lebih sederhana. Tapi itu semua yang perlu anda lakukan untuk membuat anda mulai.
Dengan cara yang lebih modern, juga jika anda ingin membuat anda ketergantungan diperbarui, akan mendapatkan dependensi dari NPM paket repositori. Anda dapat menggunakan salah NPM atau Benang untuk ini; dalam contoh saya, saya akan menggunakan NPM.
Untuk memulai, kita perlu untuk membuat sebuah paket.json
file untuk proyek kami, sehingga kami dapat menentukan ketergantungan kita. Untuk melakukan ini, kita cukup melakukannya dari "Add New Item" dialog:
Setelah kita memiliki itu, kita perlu mengeditnya untuk memiliki ketergantungan kita. Itu harus sesuatu yang terlihat seperti ini:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Dengan menabung, Visual Studio akan sudah menjalankan NPM untuk menginstal dependensi bagi kita. Mereka akan diinstal ke node_modules
folder. Jadi apa yang tersisa untuk dilakukan adalah untuk mendapatkan file dari sana ke kami wwwroot
folder. Ada beberapa pilihan untuk melakukan hal itu:
bundleconfig.json
untuk bundling and minificationKita dapat menggunakan salah satu dari berbagai cara untuk mengkonsumsi bundleconfig.json
untuk bundling and minification, seperti yang dijelaskan dalam dokumentasi. Cara yang sangat mudah adalah dengan hanya menggunakan BuildBundlerMinifier NuGet paket yang secara otomatis mengatur tugas untuk membangun ini.
Setelah menginstal paket tersebut, kita perlu membuat bundleconfig.json
pada akar dari proyek dengan isi sebagai berikut:
[
{
"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 }
}
]
Ini pada dasarnya mengkonfigurasi file mana yang ingin bergabung menjadi apa. Dan ketika kita bangun, kita dapat melihat bahwa vendor.min.css
dan vendor.js.css
dibuat dengan benar. Jadi semua yang perlu kita lakukan adalah untuk menyesuaikan _Layouts.html
lagi untuk memasukkan file-file tersebut:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Jika kita ingin bergerak sedikit lebih ke klien-sisi pembangunan, kita juga dapat mulai menggunakan alat-alat yang akan kita gunakan di sana. Misalnya Webpack yang sangat umum digunakan membangun alat untuk benar-benar segalanya. Tapi kita juga dapat memulai dengan sederhana task manager seperti Tegukan dan melakukan beberapa langkah-langkah yang diperlukan diri kita sendiri.
Untuk itu, kita tambahkan gulpfile.js
kami ke root proyek, dengan isi sebagai berikut:
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'));
Sekarang, kita juga perlu menyesuaikan paket.json
untuk memiliki ketergantungan pada menelan
dan 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"
}
}
Akhirnya, kita edit kita .csproj
untuk menambahkan tugas berikut yang akan memastikan bahwa kami Tegukan menjalankan tugas ketika kita membangun proyek:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Sekarang, ketika kita membangun, default
Gulp berjalan, yang berjalan build-vendor
tugas-tugas, yang kemudian membangun vendor.min.css
dan vendor.min.js
seperti yang kita lakukan sebelumnya. Jadi setelah menyesuaikan kami _Layout.cshtml
seperti di atas, kita bisa menggunakan jQuery dan Bootstrap.
Sedangkan pengaturan awal Gulp adalah sedikit lebih rumit dari bundleconfig.json
satu di atas, kita sekarang telah memasuki Node-dunia dan dapat mulai untuk membuat penggunaan semua alat keren lain di sana. Jadi mungkin layak untuk mulai dengan ini.
Saat ini tiba-tiba saja jauh lebih rumit daripada hanya dengan menggunakan Bower, kami juga mendapatkan banyak kontrol dengan orang-orang pilihan baru. Misalnya, kita sekarang dapat menentukan file apa yang sebenarnya termasuk dalam wwwroot
folder dan bagaimana mereka terlihat seperti. Dan kita juga dapat menggunakan ini untuk membuat langkah pertama ke klien-sisi perkembangan dunia dengan Node yang setidaknya harus membantu sedikit dengan kurva belajar.
Melihat ke dalam ini, sepertinya LibMan pendekatan yang terbaik untuk kebutuhan saya dengan menambahkan Bootstrap. Aku suka itu, karena itu sekarang dibangun ke Visual Studio 2017(15.8 atau lambat), dan kotak dialog.
Metode standar VS menambah proyek-proyek yang menggunakan Bower tapi sepertinya itu adalah di jalan keluar. Di header Microsofts bower halaman mereka menulis:
Berikut beberapa link yang mengarah ke Gunakan LibMan dengan ASP.NET Inti dalam Visual Studio di mana ia menunjukkan bagaimana libs dapat ditambahkan dengan menggunakan built-in Dialog:
Dalam Solusi Explorer, klik kanan-atas folder proyek di mana file yang harus ditambahkan. Pilih Add > Client-Side Perpustakaan. Tambahkan Client-Side Perpustakaan muncul dialog: [sumber: Scott Addie 2018]
Kemudian untuk bootstrap hanya (1) pilih unpkg, (2) ketik "bootstrap@.." (3) Menginstal. Setelah ini, anda hanya akan ingin untuk memverifikasi semua termasuk dalam _Layout.cshtml atau tempat-tempat lain yang benar. Mereka harus menjadi sesuatu seperti href="~/lib/bootstrap/dist/js/bootstrap...")
Apa trik untuk saya adalah:
klik Kanan pada wwwroot > Add > Sisi Client Library
Mengetik "bootstrap" pada kotak pencarian
Pilih "Memilih file tertentu"
Gulir ke bawah dan pilih folder. Dalam kasus saya, saya memilih "twitter bootstrap"
Periksa "css" dan "js"
Klik "Install".
Beberapa detik kemudian aku memiliki mereka semua folder wwwroot. Lakukan hal yang sama untuk semua client side paket yang ingin anda tambahkan.
Sayangnya, anda're akan memiliki waktu yang sulit dengan menggunakan NuGet untuk menginstal Bootstrap (atau JavaScript/CSS framework) pada .NET Inti proyek. Jika anda melihat NuGet menginstalnya memberitahu anda itu adalah kompatibel:
jika anda harus tahu mana paket-paket dependensi, mereka sekarang dalam profil lokal direktori. yaitu %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts
.
Namun, saya sarankan beralih ke npm atau bower seperti di Saineshwar's jawaban.
Libman tampaknya menjadi alat yang disukai oleh Microsoft sekarang. Hal ini terintegrasi dalam Visual Studio 2017(15.8).
Artikel ini menjelaskan bagaimana cara menggunakannya dan bahkan cara mengatur mengembalikan dilakukan oleh proses membangun.
Bootstrap's dokumentasi memberitahu anda apa file yang anda butuhkan dalam proyek anda.
Contoh berikut harus bekerja sebagai sebuah konfigurasi untuk libman.json.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.bundle.js",
"css/bootstrap.min.css"
]
},
{
"library": "[email protected]",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
}
]
}
Kami menggunakan bootstrap 4 di asp.net inti tapi referensi dari perpustakaan "npm" menggunakan "Paket Installer" ekstensi dan menemukan ini untuk menjadi lebih baik dari Nuget untuk Javascript/CSS perpustakaan.
Kemudian kita menggunakan "Bundler & Minifier" ekstensi untuk menyalin file yang relevan untuk distribusi (dari npm folder node_modules, yang duduk di luar proyek) ke wwwroot seperti yang kita suka untuk pengembangan/penerapan.
Gunakan nmp file konfigurasi (menambahkannya ke proyek web anda) kemudian menambahkan paket-paket yang diperlukan dengan cara yang sama kita lakukan menggunakan bower.json dan simpan. Visual studio akan men-download dan menginstalnya. Anda'll menemukan paket yang di bawah nmp node dari proyek anda.