Manajemen ketergantungan JavaScript: npm vs bower vs volo [ditutup]

160

Bagaimana Anda membandingkan npm, bowerdan volo?

Ketiganya dapat digunakan untuk menginstal dependensi JavaScript untuk proyek UI. Saya mengerti npmlebih spesifik node.

Jadi, kapan harus menggunakan apa?

npmmasih berdiri jauh, tetapi bowerdan volotampaknya menyelesaikan masalah yang persis sama, meskipun saya tidak dapat menarik garis antara npmdan bower-volo.

javascript node.js npm bower volojs Yugal Jindle
sumber
stackoverflow.com/questions/18641899/…
Stefan
1
Jika Anda di sini membaca pertanyaan ini dan menginginkan jawaban dari tahun 2015, lihat jawaban saya yang diperbarui.
gustavohenke
2
Bower mungkin digabung menjadi npm lebih cepat.
Dan Dascalescu

Jawaban:

104

Deskripsi yang paling menjelaskan perbedaan antara npm dan bower adalah: npm mengelola modul JavaScript yang disebut paket dan Bower mengelola komponen front-end (yaitu css, html, dan JavaScript) yang disebut komponen. npm juga digunakan untuk menginstal bower. Berikut ini adalah artikel yang luas tentang npm dan bower (tidak mencakup volo) yang masuk ke banyak detail.

cekikan
sumber
88
Ini bukan deskripsi yang sangat bagus. Npm tentu dapat digunakan untuk menginstal komponen front-end.
BT
Meskipun saya telah memperhatikan beberapa perpustakaan "frontend" di npm menjadi ditinggalkan demi rekan-rekan bower mereka. Ambil contoh Ember , yang belum diterbitkan dalam setahun.
briangonzalez
4
@Nate Namanya adalah awal mulanya. NPM sekarang menjadi sistem manajemen paket yang sangat umum. Saya secara teratur menggunakan npm untuk menginstal modul front-end. Tidak ada perbedaan dalam menggunakan NPM untuk modul commonjs, vs amd, vs apa pun. Anda dapat menggunakan npm juga untuk modul non-javascript. Oleh karena itu, itu sama sekali bukan perbedaan antara npm dan bower. Apakah Anda menyebut mereka paket atau komponen, keduanya sama karena keduanya merupakan kumpulan file sewenang-wenang.
BT
2
Ini adalah jawaban yang sangat menyesatkan mengingat bower tidak memiliki kebijakan untuk berurusan dengan html, css, dan, javascript. npm tidak memiliki kebijakan, kecuali bahwa hampir semua yang ada di npm ditulis untuk setidaknya mendukung commonjs dan terkadang format lain. Anda dapat menempatkan html dan css dalam paket npm seperti yang Anda bisa dengan bower. Ada banyak paket frontend-only di npm, termasuk paket yang menyertakan css dan html.
subtack
3
Jika Anda menggunakan browserify , npm adalah pengelola paket yang sempurna. Saya tidak berpikir itu penting manajer paket mana yang Anda gunakan, tetapi saya pribadi akan tetap hanya satu per proyek.
Eruant
72

punjung

Ini masih sangat populer di kalangan pengembang front-end, meskipun memiliki fitur yang sangat sedikit. Setiap paket front-end menggunakannya. Ada juga inisiatif untuk menggabungkan bower menjadi npm .

Bower dioptimalkan untuk sisi klien dan hanya mendukung pohon dependensi rata, yaitu setiap perpustakaan harus digunakan hanya sekali (karena mahal untuk mengirimkan versi berbeda dari perpustakaan yang sama ke klien), dan batasan ketergantungan harus diselesaikan oleh pengguna .

Anda dapat berharap untuk menemukan apa pun yang terkait front-end dalam registri bower ( bower search <some keyword>) - menurut pendapat saya, itulah keuntungan terbesar dari bower dalam kaitannya dengan manajer paket lainnya.

volo

Saya masih belum menggunakannya selama lebih dari 5 menit dalam beberapa tahun. Tidak tahu tentang itu, tetapi dari apa yang saya lihat itu memang termasuk beberapa alat membangun, yang sangat akrab bagi pengguna Grunt.

npm

Ya, npm adalah kependekan dari Node Package Manager. Tetapi saat ini Anda dapat menggunakannya untuk semuanya; orang tidak lagi hanya npm installmemikirkan hal-hal dan mengharapkan mereka bekerja hanya di lingkungan Node. Misalnya, ada banyak paket npm untuk Twitter Bootstrap .

Npm dioptimalkan untuk penggunaan sisi server, dengan pohon dependensi bersarang. Setiap ketergantungan dapat memiliki ketergantungannya sendiri yang dapat dimiliki sendiri, dan seterusnya. Ini menghilangkan konflik versi ketergantungan karena setiap ketergantungan dapat menggunakan versi mereka sendiri, misalnya Underscore. Namun, npm versi 3 yang akan datang akan meratakan pohon dependensi :

Dengan npm @ 3, direktori node_modules Anda akan jauh lebih bagus. Semua dependensi Anda dan sebagian besar subdependensi Anda (dan (sub) + dependensi) akan duduk bersebelahan di tingkat atas. Hanya ketika ada konflik modul akan dipasang di tingkat yang lebih dalam. Ini seharusnya membuat banyak hal lebih mudah bagi pengguna Windows.

Beberapa keuntungan yang saya lihat saat menggunakan npm:

  • Ini digunakan oleh semua manajer paket lainnya (komponen, bower, volo, JSPM, dll);
  • Mengizinkan menggunakan skrip build;
  • Banyak alat yang tersedia untuk mengintrospeksi paket berbasis npm

npm adalah manajer paket untuk JavaScript.

tangkapan layar npmjs.com

Per februari 2013, pendapat saya adalah sebagai berikut. Tolong jangan memperhitungkannya lagi.

npm

Lebih baik untuk tetap menggunakannya ketika Anda dengan proyek Node, ada beberapa proyek yang tersedia untuk browser juga ...

punjung

Bower adalah pria pop sekarang. Mereka memiliki banyak proyek di bawah tenda mereka, dan pengelola proyek ingin menjaga mereka tetap up-to-date dalam daftar ...

Ini memalukan bahwa dia kadang-kadang sedikit buggy.

volo

Saya belum mencoba volo selama lebih dari 5 menit sejak itu, tetapi dari apa yang saya lihat terlihat lebih fleksibel daripada bower.

Poin negatif untuk volo adalah bahwa proyek mereka sangat ketinggalan jaman.

gustavohenke
sumber
19
Ada ribuan modul pada npm yang hanya bekerja di browser atau bekerja di kedua node dan di browser. Banyak dari mereka bahkan memiliki lencana ci yang memberi tahu Anda dengan tepat di browser mana mereka bekerja. Sebagian besar dari apa pun yang ada di Bower dan semuanya mungkin ada di NPM.
subtack
Saya tidak mengerti perlunya proyek seperti ngBoilerplate untuk menggunakan bower sementara itu sudah tergantung pada npm untuk instalasi
lolski
5
Apa itu "pria pop"? Apakah "pop" singkatan. untuk "populer"?
Bryan Oakley
4
Dalam tangkapan layar Anda, npm adalah singkatan dari manual planning nuklir;)
Jim Jones
24

Mereka tampaknya memecahkan masalah yang sama tetapi untuk lingkungan / dunia yang berbeda. NPM untuk nodejs dan volo, bower untuk browser.

Yang benar adalah bahwa Anda dapat menggunakan NPM juga untuk mengelola javascript dan css untuk browser. Tidak ada yang mencegah Anda melakukannya. Dalam hal itu menggunakan NPM terasa lebih alami bagi saya daripada harus mengelola dua alat yang berbeda untuk tujuan yang sama.

Tampaknya bower memiliki lebih banyak paket yang tersedia, setidaknya untuk yang lebih populer. Tetapi segera jQuery juga akan tersedia di NPM secara langsung dan mungkin semua perpustakaan lain akan mengikuti tren yang sama.

Menurut pendapat saya, karena ada alat seperti browserify dan webmake di luar sana, yang membantu menggunakan modul simpul di browser, tidak ada lagi kebutuhan nyata untuk bower atau volo , kecuali mereka menawarkan sesuatu yang lain untuk Anda (modul tertentu yang hanya ada di registrasi mereka).

Baik Volo dan Bower juga bagus, tetapi dari sudut pandang saya, jika Anda sudah menggunakan NPM, mungkin lebih baik untuk tetap menggunakannya.

Harap dicatat bahwa Anda dapat menggunakan NPM untuk mengelola dependensi klien Anda bahkan tanpa menggunakan browserify atau webmake . Di sebagian besar proyek yang saya kerjakan, setelah modul npm diinstal saya menjalankan skrip untuk menyebarkannya ke lokasi di mana aplikasi klien saya menggunakannya. Terkadang saya menggunakan grunt untuk menggabungkan file itu dengan file js lainnya dan terkadang saya mereferensikannya langsung dari file template aplikasi web saya. Bagaimanapun, ini adalah preferensi pribadi. Orang lain dapat menemukan Bower atau Volo lebih mudah digunakan karena mereka lebih cocok secara alami dalam alur kerja mereka.

royjio roy
sumber
1
Baik untuk memiliki solusi yang bersaing untuk masalah yang sama. Adakah ide mengapa yeomanproyek memilih untuk datang dengan manajer paket baru ketika kita sudah punya npm? (Itu matang, terkenal & kaya fitur) Pikiran ini membuat saya merasa saya masih kehilangan poin sebenarnya.
Yugal Jindle
1
Tidak juga, tetapi seperti yang Anda katakan beberapa kali lucu untuk menemukan kembali roda, hanya karena Anda bisa, dan kadang-kadang dengan melakukan itu beberapa perbaikan dilakukan saat mencoba memecahkan masalah yang sama. Tidak juga mengapa mereka memilih untuk membuat yang baru, selain membuatnya lebih mudah untuk mem-frontend pengembang untuk menemukan paket. Tidak semua pengembang frontend memiliki pengalaman simpul, saya kira itulah alasan utama di balik proyek seperti Bower. Cobalah untuk membuatnya lebih mudah bagi pengguna bukan simpul, saya hanya menebak-nebak di sini.
roy riojas
Saya kira mereka ingin memisahkan kerumitan npmdemi kesederhanaan frontend. Oleh karena itu untuk pengembangan frontend.
Yugal Jindle
15

Keuntungan besar Bower atas NPM adalah bahwa manajemen ketergantungannya menggunakan versi komponen tunggal (sedangkan NPM bekerja dengan memiliki salinan / versi yang berbeda sebagai subdependensi dari berbagai modul). Ini adalah HAL YANG SANGAT BAIK karena mencegah javascript sisi klien Anda membengkak karena harus menyertakan banyak salinan komponen pada versi yang berbeda. Termasuk beberapa salinan modul merupakan pusat bagaimana manajemen ketergantungan NPM bekerja, dan oleh karena itu NPM sepenuhnya tidak cocok untuk manajemen paket sisi klien.

Konsekuensi dari hal di atas adalah bahwa pengelola paket bower dan konsumen harus lebih berhati-hati dalam mempertahankan nomor versi ketergantungan mereka untuk menghindari konflik, tetapi itu adalah harga yang pantas dibayar. Dan saya menemukan modul NPM sering ceroboh dalam mengeluarkan rilis besar, kecil, dan patch sehingga manajemen ketergantungan NPM juga tidak tepat.

di mana
sumber
3
Ini hanya benar jika Anda menyajikan kode frontend Anda langsung dari folder manajer paket meletakkan file-file itu. Dalam kasus saya, saya harus membuat skrip untuk memproses file kurang / js atau browserify untuk membuat bundel dari file-file itu. Jadi itu bukan masalah besar dalam kasus saya. Kode yang didistribusikan selalu memiliki versi yang tepat, bahkan ketika subkomponen lain mungkin memiliki duplikat selama pengembangan mereka tidak pernah mendapatkan produksi.
roy riojas
bahkan jika Anda secara tidak sengaja memerlukan (sebagai subdependensi) dua versi berbeda dari ketergantungan yang sama? Saya pikir dalam hal ini Anda salah
wheresrhys
Saya biasanya tidak memerlukan modul yang tidak saya kontrol, jadi mereka akan selalu menjadi yang benar ... jika secara tidak sengaja sebuah modul mencoba meminta modul yang diberikan dari yang shimmed, build akan gagal. Tidak ada gunanya menggunakan bower dalam kasus saya tidak ada manfaat yang ditambahkan
roy riojas
Jadi npm hanya bisa dikatakan aman untuk menghindari duplikasi modul dalam kode sisi klien Anda jika Anda memiliki kendali atas seluruh pohon dependensi Anda. Ini tentu saja tidak terjadi dengan sebagian besar hal yang saya kerjakan dan mungkin tidak untuk sebagian besar proyek menggunakan manajer dependensi untuk memasukkan modul sisi klien.
wheresrhys
1
Kecuali Anda mengerjakan mashup, pohon dependensi Anda tidak akan terlalu rumit, setidaknya untuk kode pihak ketiga. Kebanyakan js libraries mengekspor satu global, jadi dengan menggunakan browserify-shim Anda dapat memastikan Anda dapat menggunakannya dari ruang lingkup global sehingga selalu merupakan versi yang Anda kontrol. Maksud saya adalah Anda dapat mencapai hal yang sama tanpa perlu manajer paket lain di atas yang sudah Anda miliki. Pada akhirnya itu mungkin masalah preferensi. Selalu ada kompromi yang harus dibuat.
roy riojas
5

Saya tahu ini bukan dalam lingkup pertanyaan tetapi ada alternatif lain juga. Jam JS - http://jamjs.org/ Satu hal yang menarik adalah ia memiliki kemampuan mendengus dalam kemacetan:

jam compile output.js

Seseorang harus membuat pengelola paket lain dan menamainya: yapm :)

Bruce Lim
sumber
5
Keinginan Anda dikabulkan: github.com/rlidwka/yapm : P
alex
1
baik saya sedang berpikir untuk manajer ketergantungan sisi browser tetapi saya kira ini bekerja untuk keduanya: p Inilah sebabnya saya tidak dapat melakukan startup, semua ide saya sudah dipikirkan sebelumnya.
Bruce Lim
@BruceLim ya, setiap kali kita berpikir kita punya ide bagus, selalu ada beberapa orang lain yang sudah mendapatkannya.
Evan Hu