Mengelola paket npm di Visual Studio

npm memungkinkan Anda menginstal dan mengelola paket untuk digunakan dalam aplikasi Node.js dan ASP.NET Core. Visual Studio memudahkan untuk berinteraksi dengan npm dan mengeluarkan perintah npm melalui UI atau secara langsung. Jika Anda tidak terbiasa dengan npm dan ingin mempelajari lebih lanjut, buka dokumentasi npm.

Integrasi Visual Studio dengan npm berbeda tergantung pada jenis proyek Anda.

• Proyek berbasis CLI (.esproj)
• ASP.NET Core
• Buka folder (Node.js)

Penting

npm mengharapkan folder node_modules dan package.json di akar proyek. Jika struktur folder aplikasi Berbeda, Anda harus memodifikasi struktur folder jika ingin mengelola paket npm menggunakan Visual Studio.

Proyek berbasis CLI (.esproj)

Mulai visual Studio 2022, pengelola paket npm tersedia untuk proyek berbasis CLI, sehingga Anda sekarang dapat mengunduh modul npm mirip dengan cara Anda mengunduh paket NuGet untuk proyek ASP.NET Core. Kemudian Anda dapat menggunakan package.json untuk mengubah dan menghapus paket.

Untuk membuka manajer paket, dari Penjelajah Solusi, klik kanan simpul npm di proyek Anda dan pilih Tambahkan paket npm.

Selanjutnya, Anda dapat mencari paket npm, memilih satu, dan menginstal dengan memilih Instal Paket.

proyek ASP.NET Core

Untuk proyek seperti proyek ASP.NET Core, Anda dapat menambahkan dukungan npm di proyek Anda dan menggunakan npm untuk menginstal paket.

Nota

Untuk proyek ASP.NET Core, Anda juga dapat menggunakan Library Manager atau yarn alih-alih npm untuk menginstal file JavaScript dan CSS sisi klien. Salah satu opsi ini mungkin diperlukan jika Anda memerlukan integrasi dengan MSBuild atau CLI dotnet untuk manajemen paket, yang tidak disediakan oleh npm.

Jika proyek Anda belum menyertakan file package.json , Anda dapat menambahkannya untuk mengaktifkan dukungan npm dengan menambahkan file package.json ke proyek.

1. Untuk menambahkan file package.json , klik kanan proyek di Penjelajah Solusi dan pilih Tambahkan>Item Baru (atau tekan Ctrl + SHIFT + A). Gunakan kotak pencarian untuk menemukan file npm, pilih File Konfigurasi npm, gunakan nama default, dan klik Tambahkan.

2. Sertakan satu atau beberapa paket npm di bagian dependencies atau devDependenciespackage.json. Misalnya, Anda dapat menambahkan yang berikut ini ke file:

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   Saat Anda menyimpan file, Visual Studio menambahkan paket di bawah simpul Dependensi / npm di Penjelajah Solusi. Jika Anda tidak melihat simpul, klik kanan package.json dan pilih Pulihkan Paket. Untuk melihat status penginstalan paket, pilih output npm di jendela Output.

   Nota

   Simpul npm tersedia untuk sebagian besar jenis proyek ASP.NET Core, termasuk Blazor. Untuk proyek MAUI Blazor, Anda harus menggunakan baris perintah npm karena tidak ada simpul npm yang akan ada di Penjelajah Solusi.

   Anda dapat mengonfigurasi paket npm menggunakan package.json. package.json Buka secara langsung, atau klik kanan simpul npm di Penjelajah Solusi dan pilih Buka package.json.

Pemecahan masalah paket npm

• Jika Anda melihat kesalahan saat membuat aplikasi atau menerjemahkan kode TypeScript, periksa ketidaksesuaian paket npm sebagai sumber kesalahan potensial. Untuk membantu mengidentifikasi kesalahan, periksa jendela Output npm saat menginstal paket, seperti yang dijelaskan sebelumnya dalam artikel ini. Misalnya, jika satu atau beberapa versi paket npm tidak digunakan lagi dan mengakibatkan kesalahan, Anda mungkin perlu menginstal versi yang lebih baru untuk memperbaiki kesalahan. Untuk informasi tentang menggunakan package.json untuk mengontrol versi paket npm, lihat konfigurasipackage.json.

• Dalam beberapa skenario ASP.NET Core, Penjelajah Solusi mungkin tidak menunjukkan status yang benar untuk paket npm yang diinstal karena masalah yang diketahui yang dijelaskan di sini. Misalnya, paket mungkin muncul sebagai tidak diinstal saat diinstal. Dalam kebanyakan kasus, Anda dapat memperbarui Penjelajah Solusi dengan menghapus package.json, memulai ulang Visual Studio, dan menambahkan kembali file package.json seperti yang dijelaskan sebelumnya dalam artikel ini. Atau, saat menginstal paket, Anda dapat menggunakan jendela Output npm untuk memverifikasi status penginstalan.

• Dalam beberapa skenario ASP.NET Core, simpul npm di Penjelajah Solusi mungkin tidak terlihat setelah Anda membangun proyek. Untuk membuat simpul terlihat lagi, klik kanan simpul proyek dan pilih Bongkar Proyek. Kemudian klik kanan simpul proyek dan pilih Muat Ulang Proyek.