Perbedaan antara Grunt, NPM dan Bower (package.json vs bower.json)

612

Saya baru menggunakan npm dan bower, membangun aplikasi pertama saya di emberjs :).
Saya memang memiliki sedikit pengalaman dengan rails, jadi saya terbiasa dengan ide file untuk daftar dependensi (seperti bundler Gemfile)

Pertanyaan: ketika saya ingin menambahkan paket (dan memeriksa dependensi ke git), di mana tempatnya - ke dalam package.jsonatau ke dalam bower.json?

Dari apa yang saya kumpulkan,
menjalankan bower installakan mengambil paket dan meletakkannya di /vendordirektori,
menjalankannya npm installakan mengambilnya dan memasukkannya ke /node_modulesdirektori.

Jawaban SO ini mengatakan bower adalah untuk front-end dan npm adalah untuk hal-hal backend.
Ember-app-kit tampaknya mematuhi perbedaan ini dari pandangan pertama ... Tapi instruksi dalam gruntfile untuk mengaktifkan beberapa fungsionalitas memberikan dua perintah eksplisit, jadi saya benar-benar bingung di sini.

Secara intuitif saya akan menebaknya

  1. npm install --save-dev nama-paket akan sama dengan menambahkan nama paket ke package.json saya

  2. bower install --save nama paket mungkin sama dengan menambahkan paket ke bower.json saya dan menjalankan install bower ?

Jika itu masalahnya, kapan saya harus menginstal paket secara eksplisit seperti itu tanpa menambahkannya ke file yang mengelola dependensi (selain menginstal alat baris perintah secara global)?

javascript gruntjs bower apprenticeDev
sumber
1
mungkin duplikat Perbedaan antara Bower dan NPM?
Sindre Sorhus
14
@IndreSorhus Ini bukan duplikat tepat. Ada pertanyaan tambahan yang terkait dalam posting ini juga. BTW Apakah Anda keberatan menjelaskan downvote?
sachinjain024
1
Apakah Anda mengubah jawaban yang diterima? Tampaknya yang sangat tervvotasikan dari 2014 mengatakan sesuatu yang sangat berbeda dari yang diterima dari 2016. Ini juga menjelaskan mengapa ini menyarankan pendekatan lain, jadi saya tidak keberatan. Hanya sedikit terkejut bahwa itu diterima (atau diterima kembali).
1
Ya, saya mengubah jawaban yang diterima karena saya merasa yang selanjutnya jauh lebih relevan. Saya kira di hutan front-end ini banyak orang yang sama bingungnya dengan saya, jadi pertanyaan ini mendapatkan popularitas jauh di luar harapan saya ... Dan masih mendapat pandangan 2 tahun kemudian. Terima kasih untuk Pawel sekarang ada jawaban yang lebih terkini untuk orang-orang untuk merujuk (fwiw saya menggunakan webpack di pekerjaan saya saat ini).
apprenticeDev

Jawaban:

154

Pembaruan untuk pertengahan 2016 :

Semuanya berubah begitu cepat sehingga jika sudah terlambat 2017 jawaban ini mungkin tidak up to date lagi!

Pemula dapat dengan cepat tersesat dalam pilihan alat bangun dan alur kerja, tetapi yang paling mutakhir di 2016 adalah tidak menggunakan Bower, Grunt atau Gulp sama sekali! Dengan bantuan Webpack Anda dapat melakukan semuanya secara langsung di NPM!

Jangan salah paham orang menggunakan alur kerja lain dan saya masih menggunakan GULP dalam proyek lawas saya (tapi perlahan-lahan keluar dari itu), tetapi ini adalah bagaimana hal itu dilakukan di perusahaan dan pengembang terbaik yang bekerja dalam alur kerja ini menghasilkan banyak uang!

Lihatlah template ini, ini merupakan pengaturan yang sangat terbaru yang terdiri dari campuran teknologi terbaik dan terbaru: https://github.com/coryhouse/react-slingshot

  • Paket web
  • NPM sebagai alat bangun (tanpa Gulp, Grunt atau Bower)
  • Bereaksi dengan Redux
  • ESLint
  • daftarnya panjang. Pergi dan jelajahi!

Pertanyaan Anda:

Ketika saya ingin menambahkan paket (dan memeriksa dependensi ke git), di mana tempatnya - ke package.json atau ke bower.json

  • Semuanya termasuk dalam package.json sekarang

  • Dependensi yang diperlukan untuk build ada di "devDependencies" yaitu npm install require-dir --save-dev(--save-dev memperbarui package.json Anda dengan menambahkan entri ke devDependencies)

  • Ketergantungan yang diperlukan untuk aplikasi Anda selama runtime berada dalam "dependensi" yaitu npm install lodash --save(--simpan pembaruan package.json Anda dengan menambahkan entri ke dependensi)

Jika itu masalahnya, kapan saya harus menginstal paket secara eksplisit seperti itu tanpa menambahkannya ke file yang mengelola dependensi (selain menginstal alat baris perintah secara global)?

Selalu . Hanya karena kenyamanan. Ketika Anda menambahkan flag ( --save-devatau --save) file yang mengelola deps (package.json) akan diperbarui secara otomatis. Jangan buang waktu dengan mengedit dependensi di dalamnya secara manual. Shortcut untuk npm install --save-dev package-nameis npm i -D package-namedan shortcut untuk npm install --save package-nameisnpm i -S package-name

Pawel
sumber
6
Jawaban Anda sangat tegas:> With help of Webpack you can do everything directly in NPM! Itu tidak benar, orang bahkan tidak perlu paket web dalam alur
kerjanya
26
Jawaban ini sepertinya membuat banyak asumsi. Pertanyaannya adalah menanyakan perbedaan antara npm dan bower, dan jawaban ini menyebutkan webpack karena beberapa alasan. Ya, webpack adalah salah satu cara untuk melakukannya, tetapi jawaban ini membuatnya seolah-olah itu satu-satunya cara yang tepat untuk melakukannya. Misalnya, jika seseorang bekerja dengan Polymer 1.x, alur kerja standar akan menggunakan bower, dan tidak ada banyak dukungan untuk webpack.
John Powers
1
Jawabannya sebenarnya relevan, tetapi argumen yang diberikan tidak benar-benar: "tetapi ini adalah bagaimana hal itu dilakukan" - well, tidak ada yang harus dilakukan hanya karena itu seharusnya dilakukan (yaitu dilakukan oleh orang lain). Uang tidak ada hubungannya dengan alasan alur kerja.
forsberg
3
Melihat jawaban ini pada 2017. Pergi ke dokumentasi: "webpack v1 sudah usang. Kami mendorong semua pengembang untuk memutakhirkan ke webpack 2. Ikuti panduan migrasi kami atau lihat dokumentasi webpack 2 untuk info lebih lanjut." Pengembangan web klasik haha.
user643011
1
@ user643011 Ketika Anda melihat panduan migrasi Anda akan melihat bahwa sebagian besar konfigurasi tetap sama dan sisanya hanya perubahan kosmetik dalam struktur konfigurasi. Saya melakukan migrasi dalam satu sore termasuk PR
Pawel
576

Npm dan Bower keduanya alat manajemen ketergantungan. Tetapi perbedaan utama antara keduanya adalah npm digunakan untuk menginstal modul Node js tetapi bower js digunakan untuk mengelola komponen front end seperti html, css, js dll .

Fakta yang membuat ini lebih membingungkan adalah bahwa npm menyediakan beberapa paket yang dapat digunakan dalam pengembangan front-end juga, seperti gruntdan jshint.

Garis-garis ini menambah makna

Bower, tidak seperti npm, dapat memiliki banyak file (misalnya .js, .css, .html, .png, .ttf) yang dianggap sebagai file utama. Bower secara semantik mempertimbangkan file-file utama ini, ketika dikemas bersama, komponen.

Sunting : Grunt sangat berbeda dari Npm dan Bower. Grunt adalah alat pelari tugas javascript. Anda dapat melakukan banyak hal menggunakan gerutuan yang harus Anda lakukan secara manual sebaliknya. Menyoroti beberapa penggunaan Grunt:

  1. Membuat zip beberapa file (mis. Plugin zipup)
  2. Linting pada file js (jshint)
  3. Kompilasi lebih sedikit file (grunt-contrib-less)

Ada plugin kasar untuk kompilasi sass, uglifying javascript Anda, salin file / folder, minifying javascript dll.

Harap dicatat bahwa plugin kasar juga merupakan paket npm.

Pertanyaan 1

Ketika saya ingin menambahkan paket (dan memeriksa dependensi ke git), di mana tempatnya - ke package.json atau ke bower.json

Itu sangat tergantung di mana paket ini milik. Jika itu adalah modul simpul (seperti grunt, request) maka ia akan masuk ke package.json sebaliknya ke bower json.

Pertanyaan-2

Kapan saya harus menginstal paket secara eksplisit seperti itu tanpa menambahkannya ke file yang mengelola dependensi

Tidak masalah apakah Anda menginstal paket secara eksplisit atau menyebutkan ketergantungan pada file .json. Misalkan Anda sedang mengerjakan proyek simpul dan Anda membutuhkan proyek lain, katakanlah request, maka Anda memiliki dua opsi:

  • Edit file package.json dan tambahkan ketergantungan pada 'permintaan'
  • npm instal

ATAU

  • Gunakan commandline: npm install --save request

--saveopsi menambahkan ketergantungan pada file package.json juga. Jika Anda tidak menentukan --saveopsi, itu hanya akan mengunduh paket tetapi file json tidak akan terpengaruh.

Anda dapat melakukannya dengan cara ini, tidak akan ada perbedaan yang berarti.

sachinjain024
sumber
3
Terima kasih atas klarifikasi, dan untuk artikelnya! Wawasan, dan mengklarifikasi perbedaannya (yang seharusnya membantu memutuskan di mana harus meletakkan ketergantungan) Saya akan menunggu jika mungkin seseorang akan menjawab pertanyaan terakhir (ulang: kapan saya ingin menginstal paket secara individual), dan menerima jawaban Anda nanti :)
apprenticeDev
1
Mengenai npm, ini mungkin merupakan manajer paket untuk modul NodeJS tetapi kami kehilangan pandangan bahwa itu tidak eksklusif hanya untuk NodeJS. npm sama efektifnya mengelola dependensi sisi klien. Contoh: dontkry.com/posts/code/using-npm-on-the-client-side.html
Matt Smith
15
Apa yang bisa dilakukan bower yang tidak bisa dilakukan npm?
Adam Soffer
1
Perhatikan bahwa repositori plugin jQuery ( plugins.jquery.com ) telah diganti dengan npm.
thdoan
2
tutorial quickstart angular 2 (RC) terbaru dan git seed npmhanya menggunakan , berbeda dengan tutorial v1 yang menggunakan npm dan bower. Saya sangat, sangat menyukai fakta bahwa (a) package.jsonadalah satu-satunya hal yang harus dipertahankan, (b) yang menghitung dependensi secara berulang dalam satu liner npm install, dan (c) ketika ada masalah Anda hanya perlu menghapus node_modulesfolder dan menjalankan npm install lagi.
Sebas