Mengelola paket npm di Visual Studio

npm memungkinkan Anda untuk menginstal dan mengelola paket untuk digunakan di 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)
• Inti ASP.NET
• Buka folder (Node.js)

Penting

npm mengharapkan folder node_modules dan package.json di akar proyek. Jika struktur folder aplikasi Anda 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 node npm di proyek Anda.

Selanjutnya, Anda dapat mencari paket npm, memilih salah satu, dan menginstalnya 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.

Catatan

Untuk proyek ASP.NET Core, Anda juga dapat menggunakan Pengelola Pustaka atau yarn alih-alih npm untuk memasang 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 devDependencies dari package.json. Misalnya, Anda dapat menambahkan yang hal berikut ke file:

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

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

   Anda dapat mengonfigurasi paket npm menggunakan package.json. Buka package.json secara langsung, atau klik kanan node 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 penggunaan package.json untuk mengontrol versi paket npm, lihat konfigurasi package.json.

• Dalam beberapa skenario ASP.NET Core, Penjelajah Solusi mungkin tidak menunjukkan status yang benar untuk paket npm yang diinstal karena masalah umum 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, menghidupkan 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 node terlihat lagi, klik kanan node proyek dan pilih Bongkar Proyek. Lalu klik kanan node proyek dan pilih Muat Ulang Proyek.