Visual Studio'da npm paketlerini yönetme

npm, hem Node.js hem de ASP.NET Core uygulamalarında kullanılmak üzere paketleri yüklemenize ve yönetmenize olanak tanır. Visual Studio, npm ile etkileşim kurmayı ve kullanıcı arabirimi aracılığıyla veya doğrudan npm komutları göndermeyi kolaylaştırır. npm'yi bilmiyorsanız ve daha fazla bilgi edinmek istiyorsanız npm belgelerine gidin.

Proje türünüze bağlı olarak npm ile Visual Studio tümleştirmesi farklıdır.

• CLI tabanlı projeler (.esproj)
• ASP.NET Core
• Klasörü aç (Node.js)

Önemli

npm, proje kökünde node_modules klasörünü ve package.json bekler. Uygulamanızın klasör yapısı farklıysa, Visual Studio kullanarak npm paketlerini yönetmek istiyorsanız klasör yapınızı değiştirmeniz gerekir.

CLI tabanlı proje (.esproj)

Visual Studio 2022'den başlayarak, npm paket yöneticisi CLI tabanlı projelerde kullanılabilir, dolayısıyla artık npm modüllerini ASP.NET Core projeleri için NuGet paketlerini indirme yönteminize benzer şekilde indirebilirsiniz. Ardından paketleri değiştirmek ve silmek için package.json kullanabilirsiniz.

Paket yöneticisini açmak için Çözüm Gezgini' den projenizdeki npm düğümüne sağ tıklayın.

Ardından, npm paketlerini arayabilir, birini seçebilir ve Paketi Yükle'yi seçerek yükleyebilirsiniz.

ASP.NET Core projeleri

ASP.NET Core projeleri gibi projeler için projenize npm desteği ekleyebilir ve npm kullanarak paketleri yükleyebilirsiniz.

Not

ASP.NET Core projelerinde istemci tarafı JavaScript ve CSS dosyalarını yüklemek için npm yerine Library Manager veya yarn da kullanabilirsiniz. MsBuild veya npm tarafından sağlanmayan paket yönetimi için dotnet CLI ile tümleştirme gerekiyorsa bu seçeneklerden biri gerekli olabilir.

Projeniz henüz bir package.json dosyası içermiyorsa, projeye bir package.json dosyası ekleyerek npm desteğini etkinleştirmek için bir dosya ekleyebilirsiniz.

1. package.json dosyasını eklemek için, Çözüm Gezgini'da projeye sağ tıklayın ve Yeni Öğe Ekle'yi>seçin (veya Ctrl + SHIFT A tuşlarına + basın). npm dosyasını bulmak için arama kutusunu kullanın, npm Yapılandırma Dosyası'nı seçin, varsayılan adı kullanın ve Ekle'ye tıklayın.

2. package.json veya bölümüne bir veya devDependencies daha fazla npm paketi dependencies ekleyin. Örneğin, aşağıdakini dosyaya ekleyebilirsiniz:

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

   Dosyayı kaydettiğinizde, Visual Studio paketi Çözüm Gezgini Bağımlılıklar / npm düğümü altına ekler. Düğümü görmüyorsanız, package.json sağ tıklayın ve Paketleri Geri Yükle'yi seçin. Paket yükleme durumunu görüntülemek için Çıkış penceresinde npm çıkışını seçin.

   kullanarak package.jsonnpm paketlerini yapılandırabilirsiniz. Doğrudan açın package.json veya Çözüm Gezgini'da npm düğümüne sağ tıklayın ve package.json Aç'ı seçin.

npm paketleriyle ilgili sorunları giderme

• Uygulamanızı oluştururken veya TypeScript kodunu çevirirken herhangi bir hata görürseniz olası hata kaynağı olarak npm paketi uyumsuzluklarını denetleyin. Hataları tanımlamaya yardımcı olmak için, bu makalede daha önce açıklandığı gibi paketleri yüklerken npm Çıkış penceresini denetleyin. Örneğin, bir veya daha fazla npm paketi sürümü kullanım dışı bırakıldıysa ve hatayla sonuçlanırsa, hataları düzeltmek için daha yeni bir sürüm yüklemeniz gerekebilir. npm paketi sürümlerini denetlemek için package.json kullanma hakkında bilgi için bkz. yapılandırma package.json.

• Bazı ASP.NET Core senaryolarında, Çözüm Gezgini burada açıklanan bilinen bir sorun nedeniyle yüklü npm paketleri için doğru durumu göstermeyebilir. Örneğin, paket yüklendiğinde yüklü değil gibi görünebilir. Çoğu durumda, package.json silerek, Visual Studio'yu yeniden başlatarak ve bu makalenin önceki bölümlerinde açıklandığı gibi package.json dosyasını yeniden ekleyerek Çözüm Gezgini güncelleştirebilirsiniz. Veya paketleri yüklerken, yükleme durumunu doğrulamak için npm Çıkış penceresini kullanabilirsiniz.

• Bazı ASP.NET Core senaryolarında, projeyi derledikten sonra Çözüm Gezgini'daki npm düğümü görünür olmayabilir. Düğümün yeniden görünür olmasını sağlamak için proje düğümüne sağ tıklayın ve Projeyi Kaldır'ı seçin. Ardından proje düğümüne sağ tıklayın ve Projeyi Yeniden Yükle'yi seçin.