Pertanyaan Apa perbedaan antara Bower dan npm?


Apa perbedaan mendasar antara bower dan npm? Hanya menginginkan sesuatu yang sederhana dan sederhana. Saya telah melihat beberapa rekan saya menggunakannya bower dan npm secara bergantian dalam proyek-proyek mereka.


1611
2017-09-05 16:53


asal


Jawaban:


Semua manajer paket memiliki banyak kelemahan. Anda hanya harus memilih yang mana Anda dapat hidup bersama.

Sejarah

npm mulai mengelola modul node.js (itulah sebabnya paket masuk node_modules secara default), tetapi berfungsi untuk front-end juga saat dikombinasikan dengan Browserify atau WebPack.

Punjung dibuat semata-mata untuk front-end dan dioptimalkan dengan itu dalam pikiran.

Ukuran repo

npm jauh, jauh lebih besar dari bower, termasuk JavaScript tujuan umum (seperti country-data untuk informasi negara atau sorts untuk menyortir fungsi yang dapat digunakan di ujung depan atau belakang).

Bower memiliki jumlah paket yang jauh lebih sedikit.

Penanganan gaya dll

Bower termasuk gaya dll.

npm difokuskan pada JavaScript. Gaya diunduh secara terpisah atau dibutuhkan oleh sesuatu seperti npm-sass atau sass-npm.

Penanganan ketergantungan

Perbedaan terbesar adalah bahwa npm tidak memiliki dependensi bersarang (tetapi datar secara default) sementara Bower membutuhkan pohon dependensi yang datar (meletakkan beban resolusi ketergantungan pada pengguna).

Pohon dependensi bersarang berarti dependensi Anda dapat memiliki dependensi sendiri yang dapat memiliki dependensi sendiri, dan seterusnya. Ini memungkinkan dua modul untuk meminta versi yang berbeda dari dependensi yang sama dan masih berfungsi. Perhatikan sejak npm v3, pohon dependensi akan mendatar secara default (menghemat ruang) dan hanya bersarang jika diperlukan, misalnya jika dua dependensi memerlukan Underscore versi mereka sendiri.

Beberapa proyek menggunakan keduanya adalah bahwa mereka menggunakan Bower untuk paket front-end dan npm untuk alat pengembang seperti Yeoman, Grunt, Gulp, JSHint, CoffeeScript, dll.


Sumber daya


1828
2017-09-06 08:09



Jawaban ini adalah tambahan untuk jawaban Sindre Sorhus. Perbedaan utama antara npm dan Bower adalah cara mereka memperlakukan dependensi rekursif. Perhatikan bahwa mereka dapat digunakan bersama dalam satu proyek.

Di atas FAQ npm: (tautan archive.org dari 6 Sep 2015)

Jauh lebih sulit untuk menghindari konflik ketergantungan tanpa bersarang   ketergantungan. Ini sangat penting untuk cara kerja npm, dan memiliki   terbukti menjadi pendekatan yang sangat sukses.

Di Punjung beranda:

Bower dioptimalkan untuk front-end. Bower menggunakan ketergantungan datar   pohon, hanya membutuhkan satu versi untuk setiap paket, mengurangi pemuatan halaman   seminimal mungkin.

Singkatnya, npm bertujuan untuk stabilitas. Bower bertujuan untuk beban sumber daya minimal. Jika Anda menggambar struktur ketergantungan, Anda akan melihat ini:

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

Seperti yang Anda lihat, menginstal beberapa dependensi secara rekursif. Ketergantungan A memiliki tiga instal yang diinstal!

Punjung:

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

Di sini Anda melihat bahwa semua dependensi unik berada pada level yang sama.

Jadi, mengapa repot-repot menggunakan npm?

Mungkin ketergantungan B memerlukan versi dependensi A yang berbeda dari ketergantungan C. npm menginstal kedua versi dependensi ini sehingga tetap berfungsi, tetapi Bower akan memberi Anda konflik karena tidak suka duplikasi (karena memuat sumber daya yang sama pada halaman web sangat tidak efisien dan mahal, juga dapat memberikan beberapa kesalahan serius). Anda harus secara manual memilih versi mana yang ingin Anda instal. Ini dapat memiliki efek bahwa salah satu dependensi akan rusak, tetapi itu adalah sesuatu yang Anda perlu perbaiki pula.

Jadi, penggunaan umum adalah Bower untuk paket yang ingin Anda publikasikan di halaman web Anda (mis. runtime, di mana Anda menghindari duplikasi), dan menggunakan npm untuk hal-hal lain, seperti menguji, membuat, mengoptimalkan, memeriksa, dll. (mis. waktu pengembangan, di mana duplikasi kurang diperhatikan).

Pembaruan untuk npm 3:

NPM 3 masih melakukan sesuatu yang berbeda dibandingkan dengan Bower. Ini akan menginstal dependensi secara global, tetapi hanya untuk versi pertama yang ditemuinya. Versi lain diinstal di pohon (modul induk, kemudian node_modules).

  • [node_modules]
    • dep A v1.0
    • dep B v1.0
      • dep A v1.0 (menggunakan versi root)
    • dep C v1.0
      • dep A v2.0 (versi ini berbeda dari versi root, jadi ini akan menjadi instalasi yang disarangkan)

Untuk informasi lebih lanjut, saya sarankan membaca dokumen dari npm 3


338
2017-11-24 13:10



TL; DR: Perbedaan terbesar dalam penggunaan sehari-hari bukan bersarang ketergantungan ... itu perbedaan antara modul dan global.

Saya pikir poster-poster sebelumnya telah mencakup beberapa perbedaan mendasar. (Penggunaan npm dependensi bersarang memang sangat membantu dalam mengelola aplikasi yang besar dan kompleks, meskipun saya tidak berpikir itu adalah perbedaan yang paling penting.)

Saya terkejut, bagaimanapun, bahwa tidak ada yang secara eksplisit menjelaskan salah satu perbedaan paling mendasar antara Bower dan npm. Jika Anda membaca jawaban di atas, Anda akan melihat kata 'modul' yang sering digunakan dalam konteks npm. Tapi itu disebutkan dengan santai, seolah-olah itu bahkan mungkin hanya perbedaan sintaks.

Tapi perbedaan ini modul vs. global (atau modul vs. 'skrip') mungkin adalah perbedaan paling penting antara Bower dan npm. Pendekatan npm menempatkan segala sesuatu dalam modul mengharuskan Anda untuk mengubah cara Anda menulis Javascript untuk browser, hampir pasti menjadi lebih baik.

Pendekatan Bower: Sumber Daya Global, Seperti <script> Tag

Di root, Bower adalah tentang memuat file skrip polos-lama. Apa pun file skrip itu, Bower akan memuatnya. Yang pada dasarnya berarti bahwa Bower sama seperti memasukkan semua skrip Anda di tempat biasa <script>di dalam <head> dari HTML Anda.

Jadi, pendekatan dasar yang sama yang biasa Anda gunakan, tetapi Anda mendapatkan beberapa kemudahan otomatisasi yang bagus:

  • Anda biasanya perlu memasukkan dependensi JS dalam repo proyek Anda (saat mengembangkan), atau mendapatkannya melalui CDN. Sekarang, Anda dapat melewati berat unduhan ekstra tersebut di repo, dan seseorang dapat melakukannya dengan cepat bower installdan langsung memiliki apa yang mereka butuhkan, secara lokal.
  • Jika ketergantungan Bower kemudian menentukan dependensi sendiri di dalamnya bower.json, itu akan diunduh untuk Anda juga.

Tapi lebih dari itu, Bower tidak mengubah cara kita menulis javascript. Tidak ada apa pun tentang apa yang masuk ke dalam file yang dimuat oleh Bower perlu diubah sama sekali. Secara khusus, ini berarti bahwa sumber daya yang disediakan dalam skrip yang dimuat oleh Bower akan (biasanya, tetapi tidak selalu) masih didefinisikan sebagai variabel global, tersedia dari mana saja dalam konteks eksekusi browser.

Pendekatan npm: Modul JS Umum, Injeksi Ketergantungan Eksplisit

Semua kode di tanah Node (dan dengan demikian semua kode yang dimuat melalui npm) disusun sebagai modul (khusus, sebagai implementasi dari Format modul CommonJS, atau sekarang, sebagai modul ES6). Jadi, jika Anda menggunakan NPM untuk menangani dependensi sisi-browser (melalui Browserify atau sesuatu yang lain yang melakukan pekerjaan yang sama), Anda akan menyusun kode Anda dengan cara yang sama seperti Node.

Orang yang lebih pintar daripada saya menangani pertanyaan 'Mengapa modul?', Tapi inilah ringkasan kapsul:

  • Apa pun di dalam modul secara efektif diberi nama, artinya ini bukan variabel global lagi, dan Anda tidak dapat secara tidak sengaja merujuknya tanpa bermaksud.
  • Apa pun di dalam modul harus disuntikkan dengan sengaja ke dalam konteks tertentu (biasanya modul lain) untuk memanfaatkannya
  • Ini berarti Anda dapat memiliki beberapa versi ketergantungan eksternal yang sama (pengajuan, katakanlah) di berbagai bagian aplikasi Anda, dan mereka tidak akan berbenturan / konflik. (Ini sering terjadi, karena kode Anda sendiri ingin menggunakan satu versi dependensi, tetapi salah satu dependensi eksternal Anda menentukan yang lain yang konflik. Atau Anda punya dua dependensi eksternal yang masing-masing menginginkan versi yang berbeda.)
  • Karena semua dependensi secara manual disuntikkan ke dalam modul tertentu, sangat mudah untuk memikirkannya. Anda tahu fakta: "Satu-satunya kode yang perlu saya pertimbangkan ketika mengerjakan ini adalah apa yang sengaja saya pilih untuk disuntikkan di sini".
  • Karena bahkan isi dari modul yang disuntikkan adalah dienkapsulasi di belakang variabel yang Anda tetapkan, dan semua kode dijalankan di dalam lingkup terbatas, kejutan dan tabrakan menjadi sangat tidak mungkin. Agak jauh, sangat kecil kemungkinan bahwa sesuatu dari salah satu dependensi Anda akan secara tidak sengaja mendefinisikan kembali variabel global tanpa Anda sadari, atau bahwa Anda akan melakukannya. (Saya t bisa terjadi, tetapi Anda biasanya harus pergi keluar dari cara Anda untuk melakukannya, dengan sesuatu seperti window.variable. Satu kecelakaan yang masih cenderung terjadi adalah menugaskan this.variable, tidak menyadari itu this sebenarnya window dalam konteks saat ini.)
  • Ketika Anda ingin menguji modul individu, Anda dapat dengan mudah mengetahui: apa lagi (ketergantungan) yang mempengaruhi kode yang berjalan di dalam modul? Dan, karena Anda secara eksplisit menyuntikkan semuanya, Anda dapat dengan mudah mengejek dependensi tersebut.

Bagi saya, penggunaan modul untuk kode front-end bermuara pada: bekerja dalam konteks yang jauh lebih sempit yang lebih mudah ditebak dan diuji, dan memiliki kepastian yang lebih besar tentang apa yang sedang terjadi.


Hanya membutuhkan waktu sekitar 30 detik untuk mempelajari cara menggunakan sintaksis modul CommonJS / Node. Di dalam file JS yang diberikan, yang akan menjadi modul, Anda terlebih dahulu menyatakan setiap dependensi luar yang ingin Anda gunakan, seperti ini:

var React = require('react');

Di dalam file / modul, Anda melakukan apa pun yang biasanya Anda lakukan, dan membuat beberapa objek atau fungsi yang ingin Anda ekspos ke pengguna luar, menyebutnya mungkin myModule.

Di akhir file, Anda mengekspor apa pun yang ingin Anda bagikan dengan dunia, seperti ini:

module.exports = myModule;

Kemudian, untuk menggunakan alur kerja berbasis CommonJS di peramban, Anda akan menggunakan alat seperti Browserify untuk mengambil semua file modul individual tersebut, merangkum isinya pada waktu proses, dan menyuntikkannya satu sama lain sesuai kebutuhan.

DAN, karena modul ES6 (yang mungkin Anda transpile ke ES5 dengan Babel atau yang serupa) mendapatkan penerimaan yang luas, dan bekerja baik di browser atau di Node 4.0, kita harus menyebutkan gambaran umum yang bagus dari mereka juga.

Lebih lanjut tentang pola untuk bekerja dengan modul di dek ini.


EDIT (Feb 2017): Facebook Benang adalah pengganti / suplemen potensial yang sangat penting untuk npm hari ini: cepat, deterministik, manajemen paket offline yang dibangun berdasarkan apa yang diberikan oleh Anda. Layak untuk melihat proyek JS, terutama karena sangat mudah untuk menukarnya.


256
2017-07-26 03:12



Pembaruan 2017-Okt

Bower akhirnya menjadi tidak lagi digunakan. Akhir dari cerita.

Jawaban yang lebih lama

Dari Mattias Petter Johansson, pengembang JavaScript di Spotify:

Di hampir semua kasus, lebih baik menggunakan Browserify dan npm melalui Bower. Ini hanyalah solusi kemasan yang lebih baik untuk aplikasi front-end daripada Bower. Di Spotify, kami menggunakan npm untuk mengemas seluruh modul web (html, css, js) dan bekerja dengan sangat baik.

Bower menamai dirinya sebagai pengelola paket untuk web. Akan luar biasa jika ini benar - seorang manajer paket yang membuat hidup saya lebih baik sebagai pengembang front-end akan luar biasa. Masalahnya adalah bahwa Bower tidak menawarkan alat khusus untuk tujuan tersebut. Ini menawarkan tooling NO yang saya tahu npm itu tidak, dan terutama tidak ada yang secara khusus berguna untuk pengembang front-end. Tidak ada manfaat bagi pengembang front-end untuk menggunakan Bower lebih dari npm.

Kita harus berhenti menggunakan bower dan mengkonsolidasikan sekitar npm. Untungnya, itulah yang terjadi sedang terjadi:

Module counts - bower vs. npm

Dengan browserify atau webpack, menjadi sangat mudah untuk menggabungkan semua modul Anda ke dalam file berukuran besar, yang luar biasa untuk kinerja, terutama untuk perangkat seluler. Tidak demikian halnya dengan Bower, yang akan membutuhkan lebih banyak tenaga kerja untuk mendapatkan efek yang sama.

npm juga menawarkan Anda kemampuan untuk menggunakan beberapa versi modul secara bersamaan. Jika Anda belum melakukan banyak pengembangan aplikasi, ini mungkin awalnya menyerang Anda sebagai hal yang buruk, tetapi setelah Anda mengalami beberapa serangan Ketergantungan neraka Anda akan menyadari bahwa memiliki kemampuan untuk memiliki beberapa versi dari satu modul adalah fitur yang sangat bagus. Perhatikan bahwa npm termasuk sangat berguna alat dedupe yang secara otomatis memastikan bahwa Anda hanya menggunakan dua versi modul jika Anda benar-benar memiliki ke - jika dua modul keduanya bisa gunakan versi yang sama dari satu modul, mereka akan melakukannya. Tetapi jika mereka tidak bisa, Anda memiliki sangat berguna.

(Perhatikan itu Webpack dan rollup secara luas dianggap lebih baik dari Browserify pada Agustus 2016.)


117
2017-07-04 10:48



Bower mempertahankan satu versi modul, ia hanya mencoba untuk membantu Anda memilih yang benar / terbaik untuk Anda.

Manajemen ketergantungan Javascript: npm vs bower vs volo?

NPM lebih baik untuk modul simpul karena ada sistem modul dan Anda bekerja secara lokal. Bower bagus untuk browser karena saat ini hanya ada lingkup global, dan Anda ingin menjadi sangat selektif tentang versi yang Anda gunakan.


43
2017-07-19 20:59



Tim saya pindah dari Bower dan bermigrasi ke NPM karena:

  • Penggunaan terprogram sangat menyakitkan
  • Antarmuka Bower terus berubah
  • Beberapa fitur, seperti singkatan cepat url, sepenuhnya rusak
  • Menggunakan Bower dan npm dalam proyek yang sama itu menyakitkan
  • Menjaga bidang versi bower.json disinkronkan dengan tag git menyakitkan
  • Kontrol sumber! = Manajemen paket
  • Dukungan CommonJS tidak mudah

Untuk lebih jelasnya, lihat "Mengapa tim saya menggunakan npm bukan bower".


31
2018-02-16 21:04



Temukan penjelasan yang berguna ini dari http://ng-learn.org/2013/11/Bower-vs-npm/

Di satu tangan npm dibuat untuk menginstal modul yang digunakan dalam lingkungan node.js, atau alat pengembangan yang dibangun menggunakan node.js seperti Karma, serat, minifiers dan sebagainya. npm dapat menginstal modul secara lokal dalam proyek (secara default di node_modules) atau secara global untuk digunakan oleh beberapa proyek. Dalam proyek besar cara menentukan dependensi adalah dengan membuat file bernama package.json yang berisi daftar dependensi. Daftar itu dikenali oleh npm ketika Anda menjalankan instalasi npm, yang kemudian mengunduh dan menginstalnya untuk Anda.

Di sisi lain, bower dibuat untuk mengelola dependensi frontend Anda. Perpustakaan seperti jQuery, AngularJS, garis bawah, dll. Mirip dengan npm memiliki file di mana Anda dapat menentukan daftar dependensi yang disebut bower.json. Dalam hal ini dependensi frontend Anda terinstal dengan menjalankan instalasi bower yang secara default menginstalnya dalam sebuah folder bernama bower_components.

Seperti yang Anda lihat, meskipun mereka melakukan tugas serupa, mereka ditargetkan ke pustaka yang sangat berbeda.


14
2017-10-03 00:08



Bagi banyak orang yang bekerja dengan node.js, manfaat utama dari bower adalah untuk mengelola dependensi yang bukan javascript sama sekali. Jika mereka bekerja dengan bahasa yang dikompilasi ke javascript, npm dapat digunakan untuk mengelola beberapa dependensi mereka. Namun, tidak semua dependensi mereka akan menjadi modul node.js. Beberapa dari mereka yang mengkompilasi ke javascript mungkin memiliki pengawalan khusus bahasa sumber yang aneh yang membuat melewatkannya di sekitar dikompilasi ke javascript opsi janggal ketika pengguna mengharapkan kode sumber.

Tidak semuanya dalam paket npm perlu javascript yang digunakan pengguna, tetapi untuk paket pustaka npm, setidaknya beberapa dari itu seharusnya.


4
2017-10-11 20:42



Bower dan Npm adalah manajer paket untuk javascript.

Punjung

Bower dibuat semata-mata untuk pengembangan front-end. Ini menggunakan pohon ketergantungan datar, hanya membutuhkan satu versi untuk setiap paket, mengurangi beban halaman. Ini terutama bertujuan untuk beban sumber daya minimal. Ini memiliki lebih sedikit kontributor dan proses pengembangannya lambat.

Bower memiliki file konfigurasi yang disebut bower.json. Dalam file ini kita dapat mempertahankan konfigurasi untuk Bower seperti dependensi yang kita butuhkan dan perincian lisensi, deskripsi, nama dan sebagainya. Bower cocok untuk paket front-end seperti jquery, angular, react, ember, knockout, backbone dan sebagainya.

Npm

Npm paling sering digunakan untuk mengelola modul Node.js, tetapi juga berfungsi untuk front-end. Ini menggunakan pohon ketergantungan bersarang serta pohon ketergantungan datar. Sangat populer dan memiliki banyak kontributor. Jadi versi barunya selalu muncul dengan fitur-fitur menarik.

Npm memiliki file konfigurasi yang disebut package.json. Dalam file ini kita dapat mempertahankan konfigurasi untuk Npm seperti dependensi yang kita butuhkan dan perincian lisensi, deskripsi, nama dan sebagainya. Npm menyediakan Dependensi dan DevDependencies. Dependensi akan mengunduh dan memelihara file front-end seperti Jquery, Angular, dan sebagainya. DevDependencies akan mengunduh dan memelihara alat pengembangan seperti Grunt, Gulp, JSHint dan sebagainya.

Ini jelas tidak berfungsi dengan baik di front-end, karena kita membutuhkan jQuery dalam proyek-proyek kita. Kami hanya membutuhkan satu salinan jQuery, tetapi ketika paket lain membutuhkan jQuery, maka akan mengunduh lagi satu salinan jQuery lagi. Ini adalah salah satu kelemahan utama NPM.

Catatan Kunci: Alasan banyak proyek menggunakan keduanya adalah bahwa mereka menggunakan Bower untuk paket front-end dan Npm untuk alat pengembang. Mengalikan manajer paket dalam proyek Anda membuat alur kerja Anda lebih sulit. Npm 3 ditambah dengan browserify atau webpack adalah cara untuk pergi sekarang.


1
2018-01-07 09:26