Menggunakan LibMan dengan ASP.NET Core di Visual Studio

Artikel
11/30/2023

Oleh Scott Addie

Visual Studio memiliki dukungan bawaan untuk LibMan dalam proyek ASP.NET Core, termasuk:

Dukungan untuk mengonfigurasi dan menjalankan operasi pemulihan LibMan pada build.
Item menu untuk memicu operasi pemulihan dan pembersihan LibMan.
Dialog pencarian untuk menemukan pustaka dan menambahkan file ke proyek.
Mengedit dukungan untuk libman.json—file manifes LibMan.

Melihat atau mengunduh kode sampel (cara mengunduh)

Prasyarat

Visual Studio 2019 dengan beban kerja pengembangan ASP.NET dan web

Menambahkan file pustaka

File pustaka dapat ditambahkan ke proyek ASP.NET Core dengan dua cara berbeda:

Gunakan dialog Tambahkan Pustaka Sisi Klien
Mengonfigurasi entri file manifes LibMan secara manual

Gunakan dialog Tambahkan Pustaka Sisi Klien

Ikuti langkah-langkah berikut untuk menginstal pustaka sisi klien:

Di Penjelajah Solusi, klik kanan folder proyek tempat file harus ditambahkan. Pilih Tambahkan>Pustaka Sisi Klien. Dialog Tambahkan Pustaka Sisi Klien muncul:
Pilih penyedia pustaka dari menu drop-down Penyedia . CDNJS adalah penyedia default.
Ketik nama pustaka untuk diambil dalam kotak teks Pustaka . IntelliSense menyediakan daftar pustaka yang dimulai dengan teks yang disediakan.
Pilih pustaka dari daftar IntelliSense. Perhatikan bahwa nama pustaka ditampung dengan @ simbol dan versi stabil terbaru yang diketahui oleh penyedia yang dipilih.
Tentukan file mana yang akan disertakan:
- Pilih tombol radio Sertakan semua file pustaka untuk menyertakan semua file pustaka.
- Pilih tombol radio Pilih file tertentu untuk menyertakan subset file pustaka. Ketika tombol radio dipilih, pohon pemilih file diaktifkan. Centang kotak di sebelah kiri nama file untuk diunduh.
Tentukan folder proyek untuk menyimpan file dalam kotak teks Lokasi Target. Sebagai rekomendasi, simpan setiap pustaka di folder terpisah.

Folder Lokasi Target yang disarankan didasarkan pada lokasi tempat dialog diluncurkan:
- Jika diluncurkan dari akar proyek:
  - wwwroot/lib digunakan jika wwwroot ada.
  - lib digunakan jika wwwroot tidak ada.
- Jika diluncurkan dari folder proyek, nama folder yang sesuai akan digunakan.
Saran folder dicukupkan dengan nama pustaka. Tabel berikut ini mengilustrasikan saran folder saat menginstal jQuery dalam Razor proyek Pages.

Luncurkan lokasi Folder yang disarankan

akar proyek (jika wwwroot ada) wwwroot/lib/jquery/

akar proyek (jika wwwroot tidak ada) lib/jquery/

Folder Halaman dalam proyek Halaman/jquery/
Klik tombol Instal untuk mengunduh file, sesuai konfigurasi di libman.json.

Luncurkan lokasi	Folder yang disarankan
akar proyek (jika wwwroot ada)	wwwroot/lib/jquery/
akar proyek (jika wwwroot tidak ada)	lib/jquery/
Folder Halaman dalam proyek	Halaman/jquery/

Tinjau umpan Manajer Pustaka dari jendela Output untuk detail penginstalan. Contohnya:

Restore operation started...
Restoring libraries for project LibManSample
Restoring library jquery@3.3.1... (LibManSample)
wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
Restore operation completed
1 libraries restored in 2.32 seconds

Mengonfigurasi entri file manifes LibMan secara manual

Semua operasi LibMan di Visual Studio didasarkan pada konten manifes LibMan akar proyek (libman.json). Anda dapat mengedit libman.json secara manual untuk mengonfigurasi file pustaka untuk proyek. Visual Studio memulihkan semua file pustaka setelah libman.json disimpan.

Untuk membuka libman.json pengeditan, opsi berikut ini ada:

Klik dua libman.json kali file di Penjelajah Solusi.
Klik kanan proyek di Penjelajah Solusi dan pilih Kelola Pustaka Sisi Klien. †
Pilih Kelola Pustaka Sisi Klien dari menu Visual Studio Project . †

† Jika libman.json file belum ada di akar proyek, file tersebut akan dibuat dengan konten templat item default.

Visual Studio menawarkan dukungan pengeditan ON yang kaya JSseperti pewarnaan, pemformatan, IntelliSense, dan validasi skema. Skema ON manifes JSLibMan ditemukan di https://json.schemastore.org/libman.

Dengan file manifes berikut, LibMan mengambil file per konfigurasi yang ditentukan dalam libraries properti . Penjelasan tentang literal objek yang ditentukan dalam libraries hal berikut:

Subset jQuery versi 3.3.1 diambil dari penyedia CDNJS . Subset ditentukan dalam files properti —jquery.min.js, jquery.js, dan jquery.min.map. File ditempatkan di folder wwwroot/lib/jquery proyek.
Keseluruhan Bootstrap versi 4.1.3 diambil dan ditempatkan di folder wwwroot/lib/bootstrap . Properti literal provider objek mengambil alih defaultProvider nilai properti. LibMan mengambil file Bootstrap dari penyedia unpkg.
Subset Lodash disetujui oleh badan yang mengatur dalam organisasi. File lodash.js dan lodash.min.js diambil dari sistem file lokal di C:\temp\lodash\. File disalin ke folder wwwroot/lib/lodash proyek.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@4.1.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "provider": "filesystem",
      "library": "C:\\temp\\lodash\\",
      "files": [
        "lodash.js",
        "lodash.min.js"
      ],
      "destination": "wwwroot/lib/lodash/"
    }
  ]
}

Catatan

LibMan hanya mendukung satu versi setiap pustaka dari setiap penyedia. File libman.json gagal validasi skema jika berisi dua pustaka dengan nama pustaka yang sama untuk penyedia tertentu.

Memulihkan file pustaka

Untuk memulihkan file pustaka dari dalam Visual Studio, harus ada file yang valid libman.json di akar proyek. File yang dipulihkan ditempatkan dalam proyek di lokasi yang ditentukan untuk setiap pustaka.

File pustaka dapat dipulihkan dalam proyek ASP.NET Core dengan dua cara:

Memulihkan file selama build
Memulihkan file secara manual

Memulihkan file selama build

LibMan dapat memulihkan file pustaka yang ditentukan sebagai bagian dari proses build. Secara default, perilaku restore-on-build dinonaktifkan.

Untuk mengaktifkan dan menguji perilaku restore-on-build:

libman.json Klik kanan di Penjelajah Solusi dan pilih Aktifkan Pulihkan Pustaka Sisi Klien pada Build dari menu konteks.
Klik tombol Ya saat diminta untuk menginstal paket NuGet. Paket NuGet Microsoft.Web.LibraryManager.Build ditambahkan ke proyek:
```
<PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.113" />
```
Bangun proyek untuk mengonfirmasi pemulihan file LibMan terjadi. Paket ini Microsoft.Web.LibraryManager.Build menyuntikkan target MSBuild yang menjalankan LibMan selama operasi build proyek.

Tinjau umpan Build dari jendela Output untuk log aktivitas LibMan:

1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------
1>
1>Restore operation started...
1>Restoring library jquery@3.3.1...
1>Restoring library bootstrap@4.1.3...
1>
1>2 libraries restored in 10.66 seconds
1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

Saat perilaku restore-on-build diaktifkan, libman.json menu konteks menampilkan opsi Nonaktifkan Nonaktifkan Pustaka Sisi Klien pada Build . Memilih opsi ini akan menghapus Microsoft.Web.LibraryManager.Build referensi paket dari file proyek. Akibatnya, pustaka sisi klien tidak lagi dipulihkan pada setiap build.

Terlepas dari pengaturan restore-on-build, Anda dapat memulihkan secara manual kapan saja dari libman.json menu konteks. Untuk informasi selengkapnya, lihat Memulihkan file secara manual.

Memulihkan file secara manual

Untuk memulihkan file pustaka secara manual:

Untuk semua proyek dalam solusi:
- Klik kanan nama solusi di Penjelajah Solusi.
- Pilih opsi Pulihkan Pustaka Sisi Klien.
Untuk proyek tertentu:
- Klik kanan file di libman.json Penjelajah Solusi.
- Pilih opsi Pulihkan Pustaka Sisi Klien.

Saat operasi pemulihan sedang berjalan:

Ikon Pusat Status Tugas (TSC) pada bilah status Visual Studio akan dianimasikan dan akan membaca Operasi pemulihan dimulai. Mengklik ikon membuka tipsalat yang mencantumkan tugas latar belakang yang diketahui.

Pesan akan dikirim ke bilah status dan umpan Manajer Pustaka dari jendela Output . Contohnya:

Restore operation started...
Restoring libraries for project LibManSample
Restoring library jquery@3.3.1... (LibManSample)
wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
Restore operation completed
1 libraries restored in 2.32 seconds

Menghapus file pustaka

Untuk melakukan operasi bersih , yang menghapus file pustaka yang sebelumnya dipulihkan di Visual Studio:

Klik kanan file di libman.json Penjelajah Solusi.
Pilih opsi Bersihkan Pustaka Sisi Klien.

Untuk mencegah penghapusan file non-pustaka yang tidak disengaja, operasi bersih tidak menghapus seluruh direktori. Ini hanya menghapus file yang disertakan dalam pemulihan sebelumnya.

Saat operasi bersih sedang berjalan:

Ikon TSC pada bilah status Visual Studio akan dianimasikan dan akan membaca operasi Pustaka klien dimulai. Mengklik ikon membuka tipsalat yang mencantumkan tugas latar belakang yang diketahui.
Pesan dikirim ke bilah status dan umpan Manajer Pustaka dari jendela Output . Contohnya:

Clean libraries operation started...
Clean libraries operation completed
2 libraries were successfully deleted in 1.91 secs

Operasi bersih hanya menghapus file dari proyek. File pustaka tetap berada di cache untuk pengambilan yang lebih cepat pada operasi pemulihan di masa mendatang. Untuk mengelola file pustaka yang disimpan di cache komputer lokal, gunakan LibMan CLI.

Menghapus instalasi file pustaka

Untuk menghapus instalan file pustaka:

Buka libman.json.
Posisikan tanda sisipan di dalam objek yang sesuai libraries secara harfiah.
Klik ikon bola lampu yang muncul di margin kiri, dan pilih Hapus instalan <library_name>@<library_version>:

Atau, Anda dapat mengedit dan menyimpan manifes LibMan secara manual (libman.json). Operasi pemulihan berjalan ketika file disimpan. File pustaka yang tidak lagi didefinisikan libman.json dihapus dari proyek.

Memperbarui versi pustaka

Untuk memeriksa versi pustaka yang diperbarui:

Buka libman.json.
Posisikan tanda sisipan di dalam objek yang sesuai libraries secara harfiah.
Klik ikon bola lampu yang muncul di margin kiri. Arahkan mouse ke atas Periksa pembaruan.

LibMan memeriksa versi pustaka yang lebih baru dari versi yang diinstal. Hasil berikut dapat terjadi:

Pesan Tidak ada pembaruan yang ditemukan ditampilkan jika versi terbaru sudah diinstal.
Versi stabil terbaru ditampilkan jika belum diinstal.
Jika pra-rilis yang lebih baru dari versi yang diinstal tersedia, pra-rilis akan ditampilkan.

Untuk menurunkan ke versi pustaka yang lebih lama, edit libman.json file secara manual. Saat file disimpan, operasi pemulihan LibMan:

Menghapus file redundan dari versi sebelumnya.
Menambahkan file baru dan yang diperbarui dari versi baru.

Bagikan melalui