Seperti yang telah disebutkan orang lain, manajer paket Bower , yang biasanya digunakan untuk dependensi seperti ini dalam aplikasi yang tidak bergantung pada skrip sisi klien yang berat, sedang keluar dan secara aktif merekomendasikan untuk pindah ke solusi lain:
..psst! Sementara Bower dipertahankan, kami merekomendasikan benang dan webpack untuk proyek front-end baru!
Jadi meskipun Anda masih dapat menggunakannya sekarang, Bootstrap juga telah mengumumkan untuk menghentikan dukungannya . Akibatnya, template ASP.NET Core bawaan perlahan-lahan diedit untuk menjauh darinya juga.
Sayangnya, tidak ada jalan yang jelas ke depan. Hal ini sebagian besar disebabkan oleh fakta bahwa aplikasi web terus bergerak lebih jauh ke sisi klien, membutuhkan sistem build sisi klien yang kompleks dan banyak ketergantungan. Jadi jika Anda membangun sesuatu seperti itu, Anda mungkin sudah tahu cara menyelesaikannya, dan Anda dapat memperluas proses pembuatan yang ada untuk menyertakan Bootstrap dan jQuery di sana.
Namun masih banyak aplikasi web di luar sana yang tidak terlalu berat di sisi klien, di mana aplikasi tersebut masih berjalan terutama di server dan sebagai hasilnya server menyajikan tampilan statis. Bower sebelumnya mengisi ini dengan membuatnya mudah untuk hanya mempublikasikan dependensi sisi klien tanpa banyak proses.
Di dunia .NET kami juga memiliki NuGet dan dengan versi ASP.NET sebelumnya, kami dapat menggunakan NuGet juga untuk menambahkan dependensi ke beberapa dependensi sisi klien karena NuGet hanya akan menempatkan konten ke dalam proyek kami dengan benar. Sayangnya, dengan .csprojformat baru dan NuGet baru, paket yang diinstal berada di luar proyek kami, jadi kami tidak bisa begitu saja mereferensikannya.
Ini memberi kita beberapa opsi bagaimana menambahkan dependensi kita:
Instalasi satu kali
Inilah yang sedang dilakukan oleh template ASP.NET Core, yang bukan aplikasi halaman tunggal. Saat Anda menggunakannya untuk membuat aplikasi baru, wwwrootfolder tersebut hanya berisi folder libyang berisi dependensi:
Jika Anda melihat lebih dekat pada file saat ini, Anda dapat melihat bahwa mereka awalnya ditempatkan di sana dengan Bower untuk membuat template, tetapi kemungkinan akan segera berubah. Ide dasarnya adalah bahwa file tersebut disalin sekali ke wwwrootfolder sehingga Anda dapat bergantung padanya.
Untuk melakukan ini, kita cukup mengikuti pengenalan Bootstrap dan mengunduh file yang dikompilasi secara langsung. Seperti yang disebutkan di situs unduhan, ini tidak termasuk jQuery , jadi kita perlu mengunduhnya secara terpisah juga; itu memang berisi Popper.js meskipun jika kita memilih untuk menggunakan bootstrap.bundlefile nanti — yang akan kita lakukan. Untuk jQuery, kita cukup mendapatkan satu file "terkompresi, produksi" dari situs download (klik kanan link tersebut dan pilih "Save link as ..." dari menu).
Ini menyisakan kami dengan beberapa file yang hanya akan diekstrak dan disalin ke dalam wwwrootfolder. Kami juga dapat membuat libfolder untuk memperjelas bahwa ini adalah dependensi eksternal:
Hanya itu yang kami butuhkan, jadi sekarang kami hanya perlu menyesuaikan _Layout.cshtmlfile kami untuk menyertakan dependensi tersebut. Untuk itu, kami menambahkan blok berikut 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 blok berikut di bagian paling akhir dari <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 juga dapat menyertakan versi yang diperkecil dan melewati <environment>penolong tag di sini untuk membuatnya sedikit lebih sederhana. Tetapi hanya itu yang perlu Anda lakukan untuk membuat Anda tetap memulai.
Ketergantungan dari NPM
Cara yang lebih modern, juga jika Anda ingin terus memperbarui dependensi Anda, adalah dengan mendapatkan dependensi dari repositori paket NPM. Anda dapat menggunakan NPM atau Benang untuk ini; dalam contoh saya, saya akan menggunakan NPM.
Untuk memulai, kita perlu membuat package.jsonfile untuk proyek kita, jadi kita bisa menentukan dependensi kita. Untuk melakukan ini, kita cukup melakukannya dari dialog "Tambahkan Item Baru":
Setelah kami memilikinya, kami perlu mengeditnya untuk memasukkan dependensi kami. Seharusnya 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 menyimpan, Visual Studio sudah akan menjalankan NPM untuk menginstal dependensi untuk kita. Mereka akan dipasang ke dalam node_modulesfolder. Jadi yang tersisa untuk dilakukan adalah memasukkan file dari sana ke wwwrootfolder kita . Ada beberapa opsi untuk melakukannya:
bundleconfig.json untuk bundling dan minifikasi
Kita dapat menggunakan salah satu dari berbagai cara untuk menggunakan a bundleconfig.jsonuntuk bundling dan minifikasi, seperti yang dijelaskan dalam dokumentasi . Cara yang sangat mudah adalah dengan menggunakan paket BuildBundlerMinifier NuGet yang secara otomatis menyiapkan tugas build untuk ini.
Setelah menginstal paket itu, kita perlu membuat bundleconfig.jsondi root proyek dengan konten 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 akan digabungkan menjadi apa. Dan saat kami membangun, kami dapat melihat bahwa filevendor.min.css dan vendor.js.cssdibuat dengan benar. Jadi yang perlu kita lakukan adalah menyesuaikan _Layouts.htmllagi untuk memasukkan file-file itu:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Menggunakan pengelola tugas seperti Gulp
Jika kita ingin beralih sedikit ke pengembangan sisi klien, kita juga bisa mulai menggunakan alat yang akan kita gunakan di sana. Misalnya Webpack yang merupakan alat build yang sangat umum digunakan untuk segala hal. Tapi kita juga bisa mulai dengan pengelola tugas yang lebih sederhana seperti Gulp dan melakukan sendiri beberapa langkah yang diperlukan.
Untuk itu, kami menambahkan file gulpfile.js ke root proyek kami, dengan konten 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 package.jsonagar ketergantungan kita pada gulpdangulp-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, kami mengedit file .csproj untuk menambahkan tugas berikut yang memastikan bahwa tugas Gulp kami berjalan saat kami membangun proyek:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Sekarang, saat kami membangun, defaulttugas Gulp berjalan, yang menjalankan build-vendortugas, yang kemudian membangun kami vendor.min.cssdanvendor.min.js seperti yang kami lakukan sebelumnya. Jadi setelah menyesuaikan_Layout.cshtml seperti di atas, kita bisa menggunakan jQuery dan Bootstrap.
Sedangkan pengaturan awal Gulp sedikit lebih rumit daripada bundleconfig.json atas, kita sekarang telah memasuki dunia Node dan dapat mulai menggunakan semua alat keren lainnya di sana. Jadi mungkin ada baiknya untuk memulai dengan ini.
Kesimpulan
Meskipun ini tiba-tiba menjadi jauh lebih rumit daripada hanya menggunakan Bower, kami juga mendapatkan banyak kendali dengan opsi baru tersebut. Misalnya, sekarang kita dapat memutuskan file apa yang sebenarnya disertakan dalam wwwrootfolder dan bagaimana tampilannya. Dan kita juga bisa menggunakan ini untuk membuat langkah pertama ke dunia pengembangan sisi klien dengan Node yang setidaknya akan membantu sedikit dengan kurva pembelajaran.
