Soru Bower ve npm arasındaki fark nedir?


Arasındaki temel fark nedir bower ve npm? Sadece sade ve basit bir şey istiyorum. Bazı meslektaşlarımın kullanımını gördüm bower ve npm kendi projelerinde dönüşümlü olarak.


1612
2017-09-05 16:53


Menşei


İlgili cevap stackoverflow.com/a/21199026/1310070 - sachinjain024
olası kopyası Javascript bağımlılık yönetimi: npm vs bower vs volo? - anotherdave
Bu sorunun cevabı güncel değil. Kimse düz bağımlılığı destekleyen npm 3'ü kullanırsak 2016'da ne yapacağımızı söyleyebilir mi? Npm3 ve bower wince fark nedir ve şu anda en iyi uygulama nedir? - amdev
Alt satır, @amdev: bower şimdi kullanımdan kaldırıldı. npm (veya sadece hafif bir fark olan İplik), olduğu yerdedir. Herhangi bir uygulanabilir alternatifin farkında değilim. - XML


Cevaplar:


Tüm paket yöneticileri çok fazla downsides var. Sadece yaşayabileceğin birini seçmelisin.

Tarihçe

npm node.js modüllerini yönetmeye başladı (bu yüzden paketler node_modules varsayılan olarak), ancak ile birleştirildiğinde ön uç için de çalışır Browserify veya WebPack.

kameriye sadece ön uç için yaratılmış ve akılda tutularak optimize edilmiştir.

Repo büyüklüğü

npm, genel amaçlı JavaScript dahil olmak üzere, bower'dan çok daha büyüktür. country-data ülke bilgisi için veya sorts ön uçta veya arka uçta kullanılabilen işlevleri sıralamak için).

Bower'ın çok daha az miktarda paketi var.

Stilleri vb işleme

Bower stilleri vb içerir.

npm, JavaScript’e odaklanır. Stiller ayrı ayrı indirilir veya npm-sass veya sass-npm.

Bağımlılık yönetimi

En büyük fark, npm iç içe geçmiş bağımlılıklar (varsayılan olarak düzdür) olurken Bower düz bağımlılık ağacı gerektirir (bağımlılık yükünün yükünü kullanıcıya yükler).

İç içe geçmiş bir bağımlılık ağacı, bağımlılıklarınızın, kendilerine ait olabilecek kendi bağımlılıklarına sahip olabileceği anlamına gelir. Bu, iki modülün aynı bağımlılığın farklı sürümlerini gerektirmesine ve çalışmasına izin verir. Npm v3'ten beri, bağımlılık ağacı varsayılan olarak düz (yer tasarrufu) olacak ve yalnızca gerektiğinde yuva olacaktır, örneğin iki bağımlılık kendi alt sınıfının kendi sürümüne ihtiyaç duyarsa.

Bazı projelerin her ikisi de ön uç paketleri için Bower kullanması ve Yeoman, Grunt, Gulp, JSHint, CoffeeScript vb. Gibi geliştirici araçları için npm kullanmalarıdır.


kaynaklar


1828
2017-09-06 08:09



İç içe geçmiş bir bağımlılık ağacı neden ön tarafta böyle bir şey yapmıyor? - Lars Nyström
Bir ön uç npm paketi de bir düz bağımlılık ağacı olamaz mı? "Neden 2 paket yöneticisine ihtiyacımız var?" ikilem. - Steven Vachon
"Düz bağımlılık ağacı" ile ne demek istiyorsun? Düz ağaç nedir - bir liste? O zaman ağaç değil. - mvmn
Aslında bir yol da ağaçtır. Bu sadece özel bir durum. WikiPedia'dan: "Matematikte ve daha spesifik olarak grafik teorisinde, bir ağaç, herhangi iki noktanın tam olarak bir yolla bağlandığı, doğrulanmamış bir grafiktir." - Jørgen Fogh
npm 3 şimdi bir düz bağımlılık ağacını destekliyor. - vasa


Bu cevap Sindre Sorhus'un cevabına bir katkıdır. Npm ve Bower arasındaki en büyük fark, yinelemeli bağımlılıkları tedavi etme biçimidir. Tek bir projede birlikte kullanılabileceklerini unutmayın.

Üzerinde npm SSS: (6 Eylül 2015 tarihinden itibaren archive.org linki)

Bağlama olmadan çatışmaları önlemek için çok daha zor   bağımlılıklar. Bu, npm'nin çalışmasının temelidir ve   son derece başarılı bir yaklaşım olduğu kanıtlanmıştır.

üzerinde kameriye anasayfa:

Bower, ön uç için optimize edilmiştir. Bower düz bağımlılık kullanıyor   Her paket için sadece bir versiyon gerektiren, sayfa yükünü azaltan ağaç   asgari

Kısacası, npm kararlılık için amaçlamaktadır. Bower, minimum kaynak yükü için amaçlamaktadır. Bağımlılık yapısını çizerseniz, şunu göreceksiniz:

npm:

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Gördüğünüz gibi bazı bağımlılıkları tekrarlı olarak yükler. Bağımlılık A'nın üç yüklü örneği var!

Bower:

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Burada tüm bağımlılıkların aynı seviyede olduğunu görüyorsunuz.

Peki, npm kullanarak neden rahatsız?

Belki de bağımlılık B bağımlılık A'dan farklı bir bağımlılık A gerektirir. Npm bu bağımlılığın her iki sürümünü de yükler, böylece yine de işe yarayacaktır, ancak Bower size bir fikir ayrılığı çünkü çoğaltma yapmayı sevmez (çünkü aynı kaynağı bir web sayfasında yüklemek çok verimsiz ve maliyetlidir, ayrıca bazı ciddi hatalar verebilir). Yüklemek istediğiniz sürümü manuel olarak seçmeniz gerekecek. Bu, bağımlılıklardan birinin kırılacağına dair bir etkiye sahip olabilir, ancak bu yine de düzeltmeniz gereken bir şeydir.

Dolayısıyla, web sayfalarınızda yayınlamak istediğiniz paketler için yaygın kullanım Bower'dır (ör. Çalışma zamanı, çoğalmayı önlerseniz) ve npm'i test, bina, optimizasyon, kontrol vb. gibi diğer şeyler için kullanın (ör. geliştirme zamanıçoğaltmanın daha az endişe duyduğu yer).

Npm 3 için güncelleme:

npm 3 hala Bower ile karşılaştırıldığında farklı şeyler yapar. Bağımlılıkları küresel olarak kuracak, ancak sadece karşılaştığı ilk versiyon için. Diğer sürümler ağacın içine yüklenir (üst modül, sonra node_modules).

  • [Node_modules]
    • dep A v1.0
    • dep B v1.0
      • dep A v1.0 (kök sürümünü kullanır)
    • dep C v1.0
      • dep A v2.0 (bu sürüm kök sürümden farklıdır, dolayısıyla yuvalanmış bir kurulum olacaktır)

Daha fazla bilgi için, npm 3 dokümanları


338
2017-11-24 13:10



Şimdi neredeyse bir klişe, "yazılım geliştirme, her şeyden önce ticaret ile ilgilidir." Bu iyi bir örnektir. Birini seçmelisiniz ya daha fazla kararlılık npm  veya en az kaynak yükü bower. - jfmercer
@Shrek Aslında ikisini de kullanabileceğinizi söylüyorum. Son paragrafta belirttiğim gibi farklı amaçları var. Gözlerimde bir ticaret-off değil. - Justus Romijn
Ahh, anladım seni yanlış anladım. Ya da yeterince dikkatlice okumadım. Açıklama için teşekkürler. :-) Her ikisi de bir trade-off olmadan kullanılabilir. - jfmercer
@AlexAngas npm3 için bir güncelleme ekledim. Bower ile karşılaştırıldığında hala bazı büyük farklılıklar var. Bpm yapmazken npm muhtemelen her zaman bağımlılıkların birden çok sürümünü destekleyecektir. - Justus Romijn
npm 3 bower'a yaklaşıyor;) - ni3


TL; DR: Günlük kullanımdaki en büyük fark yuvalanmış bağımlılıklar değil, modüller ve globals arasındaki farktır.

Önceki posterlerin bazı temel ayrılıkları iyi karşıladığını düşünüyorum. (npm'in iç içe geçmiş bağımlılıkları kullanması, büyük ve karmaşık uygulamaların yönetiminde gerçekten çok faydalıdır, ancak bunun en önemli ayrım olduğunu düşünmüyorum.)

Bununla birlikte, hiç kimse Bower ve npm arasındaki en temel ayrımlardan birini açıkça açıklamadı. Yukarıdaki yanıtları okursanız, npm bağlamında sıklıkla kullanılan 'modüller' sözcüğünü görürsünüz. Ancak, sözel olarak, sadece bir sözdizimi farkı bile olabilir.

Ama bu ayrımı modüller vs globals (ya da 'scripts') modülleri muhtemelen Bower ve npm arasındaki en önemli farktır. Her şeyi modüllere koymanın npm yaklaşımı, tarayıcı için Javascript'i yazma şeklinizi değiştirmenizi gerektirir, neredeyse kesinlikle daha iyisi için.

Bower Yaklaşımı: Küresel Kaynaklar, Gibi <script> Etiketler

Kökte, Bower eski eski komut dosyalarını yüklemekle ilgilidir. Bu komut dosyaları ne olursa olsun, Bower bunları yükleyecektir. Temel olarak, Bower'ın sadece tüm betiklerinizi düz-eski gibi içerdiği anlamına gelir <script>içinde <head> HTML’nizin

Yani, alıştığınız temel yaklaşım, ancak bazı güzel otomasyon kolaylıkları elde edersiniz:

  • Proje bağımlılığınıza (geliştirirken) JS bağımlılıklarını eklemeniz veya CDN yoluyla almanız gerekirdi. Şimdi, bu ekstra indirme ağırlığını repoda atlayabilirsin, ve birileri hızlıca yapabilir bower installve yerel olarak ihtiyaç duydukları şeylere anında sahipler.
  • Bower bağımlılığı, kendi bağımlılıklarını kendi bower.jsonbunlar sizin için de indirilecek.

Ama bunun ötesinde, Bower javascript'i nasıl yazdığımızı değiştirmez. Bower tarafından yüklenen dosyaların içine giren şeylerin hiçbiri değişmemeli. Özellikle bu, Bower tarafından yüklenen komut dosyalarında sağlanan kaynakların (genellikle, ancak her zaman değil) hala olarak tanımlanacağı anlamına gelir. küresel değişkenlertarayıcı yürütme bağlamında herhangi bir yerden kullanılabilir.

Npm Yaklaşımı: Ortak JS Modülleri, Açık Bağımlılık Enjeksiyonu

Düğüm arazisindeki tüm kodlar (ve böylece npm yoluyla yüklenen tüm kodlar) modüller olarak yapılandırılmıştır (özellikle, CommonJS modülü formatıveya şimdi, bir ES6 modülü olarak). Dolayısıyla, tarayıcı tarafı bağımlılıkları (Browserify veya aynı işi yapan başka bir şey aracılığıyla) yönetmek için NPM kullanırsanız, kodunuzu, Node'nun yaptığı gibi yapılandırırsınız.

Daha akıllı insanlar, 'Neden modüller?' Sorusunu ele aldığımdan daha büyüktü, ama burada bir kapsül özeti:

  • Bir modülün içinde her şey etkilidir İsim alanlıYani, artık küresel bir değişken değil, ve istemeden başvurmak istemezsiniz.
  • Bir modülün içinde herhangi bir şey kullanılması için belirli bir içeriğe (genellikle başka bir modül) kasıtlı olarak enjekte edilmelidir.
  • Bu, uygulamanızın çeşitli bölümlerinde aynı dışsal bağımlılığın birden fazla sürümüne sahip olabileceğiniz anlamına gelir (aksi takdirde, söyleyelim) ve çakışmayacak / çakışmayacaktır. (Bu şaşırtıcı bir şekilde gerçekleşir, çünkü kendi kodunuz bağımlılığın bir versiyonunu kullanmak ister, fakat dışsal bağımlılıklarınızdan biri de çatışmaları işaret eder. Ya da her biri farklı bir versiyon isteyen iki dış bağımlılığa sahip olursunuz.)
  • Tüm bağımlılıklar belirli bir modüle manuel olarak enjekte edildiğinden, bunlar hakkında akıl yürütmek çok kolaydır. Bir gerçeği biliyorsunuz: "Bunun üzerinde çalışırken göz önünde bulundurmam gereken tek kod, burada enjekte etmek için kasıtlı olarak seçtiğim şey".
  • Çünkü enjekte edilen modüllerin içeriği bile kapsüllenmiş Onu atadığınız değişkenin arkasında ve tüm kod sınırlı bir kapsam içinde yürütülür, sürprizler ve çarpışmalar çok olanaksız hale gelir. Bağımlılıklarınızdan birisinin, onu fark etmeden bir global değişkeni yanlışlıkla yeniden tanımlayacağı ya da bunu yapacağınız çok daha az olasıdır. (O kutu olur, ama genellikle bir şey gibi, bunu yapmak için yolumdan gitmek zorunda window.variable. Hala meydana gelme eğilimi olan tek kaza this.variablebunu farketmeden this aslında window mevcut bağlamda.)
  • Tek bir modülü test etmek istediğinizde, kolayca öğrenebilirsiniz: modülün içinde çalışan kodu etkileyen başka ne (bağımlılıklar)? Ve, her şeyi açıkça enjekte ettiğin için, bu bağımlılıkları kolayca atabilirsin.

Bana göre, ön uç kodları için modüllerin kullanımı şu şekildedir: mantığın daha kolay anlaşılması ve test edilmesi ve neler olup bittiği hakkında daha fazla kesinlik elde etmek için çok daha dar bir bağlamda çalışmak.


CommonJS / Node modülü sözdiziminin nasıl kullanılacağını öğrenmek yaklaşık 30 saniye sürer. Bir modül olacak bir belirli JS dosyası içinde, öncelikle kullanmak istediğiniz herhangi bir dış bağımlılıkları bildirirsiniz:

var React = require('react');

Dosyanın / modülün içinde, normalde ne yaparsanız yapın ve dışarıdaki kullanıcılara göstermek isteyeceğiniz bazı nesne veya işlevler yaratabilirsiniz. myModule.

Bir dosyanın sonunda, dünyayla paylaşmak istediğiniz her şeyi dışa aktarırsınız.

module.exports = myModule;

Ardından, tarayıcıda bir CommonJS tabanlı iş akışı kullanmak için, tüm bireysel modül dosyalarını kapmak, içeriğini çalışma zamanında kapsüllemek ve gerektiğinde birbirine enjekte etmek için Browserify gibi araçları kullanacaksınız.

VE, ES6 modülleri (muhtemelen Babil veya benzerleri ile ES5'e geçeceksiniz) geniş kabul görüyor ve hem tarayıcıda hem de Düğüm 4.0'da çalışıyor olduğundan iyi bir bakış Bunlardan da.

Modüller ile çalışmak için desenler hakkında daha fazla bilgi bu güverte.


EDIT (Şubat 2017): Facebook'un İplik bu günlerde npm için çok önemli bir potansiyel ikame / tamamlayıcıdır: npm'in size verdiği değerlere dayanan hızlı, deterministik, çevrimdışı paket yönetimi. Herhangi bir JS projesine bir göz atmaya değer, özellikle de onu takas etmek çok kolay.


256
2017-07-26 03:12



Bu cevabın burada olduğuna sevindim, diğer popüler cevaplar bu detaydan bahsetmiyor. npm, modüler kod yazmanızı zorlaştırır. - Juan Mendes


2017-Ekim güncellemesi

Bower nihayet oldu kullanımdan kaldırıldı. Hikayenin sonu.

Eski cevap

Mattias Petter Johansson'dan, Spotify'da JavaScript geliştiricisi:

Hemen hemen her durumda, Browserify ve npm Bower üzerinden kullanmak daha uygundur. Ön uç uygulamaları için Bower'dan daha iyi bir çözümdür. Spotify'da, tüm web modüllerini (html, css, js) paketlemek için npm kullanırız ve çok iyi çalışır.

Bower, kendisini web için paket yöneticisi olarak tanıtıyor. Bu doğru olsaydı harika olurdu - ön uç geliştirici olarak hayatımı daha iyi hale getiren bir paket yöneticisi harika olurdu. Sorun şu ki Bower, amaç için özel bir takım sunmuyor. Bu, npm'nin bilmediği ve özellikle ön uç geliştiriciler için özellikle kullanışlı olan hiçbiri NO araçlarını sunuyor. Bower'ı npm üzerinden kullanabilmek için bir ön uç geliştiricinin yararı yoktur.

Bower'ı kullanmayı bırakmalı ve npm etrafında konsolide olmalıyız. Neyse ki, bu ne oluyor:

Module counts - bower vs. npm

Browserify veya webpack ile, tüm modüllerinizin özellikle mobil cihazlar için performans açısından harika olan büyük küçültülmüş dosyalara birleştirilmesi çok kolay hale gelir. Aynı etkiyi elde etmek için önemli ölçüde daha fazla iş gücü gerektiren Bower ile değil.

npm ayrıca, aynı anda birden çok modül sürümünü kullanabilmenizi sağlar. Çok fazla uygulama geliştirme işlemi yapmadıysanız, bu başlangıçta size kötü bir şey olarak çarpabilir, ancak birkaç kez geçtiğinizde Bağımlılık cehennem Bir modülün birden çok sürümüne sahip olma yeteneğinin oldukça hoş bir özellik olduğunu anlayacaksınız. Npm'in çok kullanışlı olduğunu unutmayın. tekil aracı otomatik olarak, bir modülün yalnızca iki sürümünü kullandığınızdan emin olursanız var - iki modül de varsa kutu Bir modülün aynı sürümünü kullanacaklar, yapacaklar. Ama eğer onlar olamazÇok kullanışlı bir şey var.

(Bunu not et webpack ve toplaması Ağustos 2016 itibariyle Browserify'den daha iyi olduğu kabul edilmektedir.)


117
2017-07-04 10:48



webpack ve npm daha iyi olduğunu düşünüyorum .. - refactor
<sarcasm> Lütfen 'merhaba dünya' npm projesinin bile 300+ modüle ihtiyaç duyduğunu aklınızda bulundurun ... </ sarcasm>: O - Mariusz Jamro
"Büyük küçültülmüş dosyalar" ın "özellikle mobil cihazlar için performans açısından harika" olduğunu kabul etmiyorum. Tam tersi: Sınırlı bant genişliği, istek üzerine yüklenmiş küçük dosyalar gerektirir. - Michael Franzl
Çok iyi bir tavsiye değil. Çoğu npm paketi sadece nodejs arka uçlarıdır. Eğer arka uçta javascript yapmıyorsanız veya bir modül sisteminiz yoksa, Bower ihtiyaçlarınızı daha iyi karşılayacağından, paketlerin sayısı alakasızdır. - Gerardo Grignoli
@GerardoGrignoli: Bower çıkıyor. - Dan Dascalescu


Bower modüllerin tek bir sürümünü korur, sadece sizin için doğru / en iyi olanı seçmenize yardımcı olur.

Javascript bağımlılık yönetimi: npm vs bower vs volo?

NPM, düğüm modülleri için daha iyidir çünkü bir modül sistemi vardır ve yerel olarak çalışıyorsunuzdur. Bower, tarayıcı için iyidir çünkü şu anda yalnızca global kapsam vardır ve birlikte çalıştığınız sürüm hakkında çok seçici olmak istiyorsunuz.


43
2017-07-19 20:59



Sindre'nin iç içe bağımlılıktan bahsettiğinde bahseder. - Games Brainiac
@GamesBrainiac senin doğru, sadece kendi sözlerime koyduğumu düşündüm. - Sagivf
@Sagivf Bunlar DEĞİL kendi cevabını, orijinal cevabı kimin verdiği İşte - dayuloli
@Sagivf Kopyalamada yanlış bir şey yok ** ilgili parçalar Başkalarının cevapları burada kendilerine bir cevap vermediler. Az önce bana "biraz önce kendi sözlerime koyduğumu düşündüm" dedin. Kredi, vadesi gereken yere gitmelidir. - dayuloli
Bu cevabı neden bu kadar çok tercih ettiniz bilmiyorum. Bana bu cevapta gerçekten yeni bir bilgi / bakış açısı var. - Calvin


Ekibim Bower’dan ayrıldı ve npm’ye taşındı çünkü:

  • Programatik kullanım ağrılıydı
  • Bower'ın arayüzü değişmeye devam etti
  • Url shorthand gibi bazı özellikler tamamen bozuldu
  • Aynı projede hem Bower hem de npm kullanımı ağrılıdır
  • Git etiketleri ile senkronize bower.json sürüm alanı tutmak ağrılı
  • Kaynak kontrolü! = Paket yönetimi
  • CommonJS desteği basit değil

Daha fazla bilgi için bkz. "Neden ekibim bower yerine npm kullanıyor?".


31
2018-02-16 21:04





Bu yararlı açıklama bulundu http://ng-learn.org/2013/11/Bower-vs-npm/

Bir yandan npm, node.js ortamında kullanılan modülleri veya node.js, Karma, tiftik, minik düzenleyiciler vb. Kullanılarak oluşturulan geliştirme araçlarını kurmak için oluşturuldu. npm modülleri yerel olarak bir projeye (node_modules'de varsayılan olarak) veya global olarak birden çok proje tarafından kullanılmak üzere kurabilir. Büyük projelerde bağımlılıkları belirtme yolu, bağımlılıkların listesini içeren package.json adlı bir dosya oluşturmaktır. Npm kurulumunu çalıştırdığınızda bu liste npm tarafından tanınır, daha sonra bunları sizin için indirir ve yükler.

Öte yandan ön taraf bağımlılıklarınızı yönetmek için bower oluşturuldu. JQuery, AngularJS, alt çizgi, vb. Gibi kitaplıklar npm'de olduğu gibi bower.json adında bir bağımlılık listesi belirtebileceğiniz bir dosya vardır. Bu durumda ön uç bağımlılıklarınız, varsayılan olarak bunları bower_components adlı bir klasöre yükleyen bower yüklemesini çalıştırarak yüklenir.

Gördüğünüz gibi, benzer bir görevi yerine getirmelerine rağmen, çok farklı bir kütüphane kümesini hedef alırlar.


14
2017-10-03 00:08



Gelişiyle npm dedupeBu biraz modası geçmiş. Görmek Mattias'ın cevabı. - Dan Dascalescu


Node.js ile çalışan birçok kişi için, bower'ın en büyük faydası, javascript olmayan bağımlılıkları yönetmek içindir. Javascript'i derleyen dillerle çalışıyorlarsa, npm bağımlılıklarının bir kısmını yönetmek için kullanılabilir. Ancak, tüm bağımlılıkları node.js modülleri olmayacaktır. Javascript için derleyenlerin bazıları, kaynak kodlarını bekledikleri zaman, bu seçeneklerin bir javascript olarak derlenmemesini sağlayan garip kaynak diline özgü manganlamalara sahip olabilirler.

Bir npm paketindeki her şey kullanıcılara yönelik javascript olmak zorunda değildir, ancak npm kütüphane paketleri için en azından bir kısmı olmalıdır.


4
2017-10-11 20:42



Bu npmjs blog yayını "Paketiniz, ES6, istemci tarafı JS, hatta HTML ve CSS olsun, herhangi bir şey içerebilir. Bunlar, JavaScript'in yanı sıra doğal olarak ortaya çıkan şeylerdir, bu yüzden onları buraya yerleştirin." - Dan Dascalescu
Arasında bir fark var içerebilir, ve içermeli. Tabii ki herhangi bir şey içerebilirler, ama genelde içermeli commonJS için bir çeşit arabirim. Sonuçta 'düğüm paketi yöneticisi'. İlgili bölüm Bunlar doğal olarak ortaya çıkan şeyler Javascript yanında