Różnica między Grunt, NPM i Bower (package.json vs bower.json)

612

Jestem nowy w używaniu npm i altany, budując swoją pierwszą aplikację w emberjs :).
Mam trochę doświadczenia z szynami, więc znam się na plikach służących do wyświetlania zależności (np. Gemfile pakietu)

Pytanie: kiedy chcę dodać pakiet (i sprawdzić zależność do git), gdzie on należy - do package.jsonczy do bower.json?

Z tego, co zbieram,
uruchomione bower installpobierze pakiet i umieści go w /vendorkatalogu,
uruchomione npm installpobierze go i umieści w /node_moduleskatalogu.

Ta odpowiedź SO mówi, że altana jest przeznaczona do frontonu, a npm do backendu.
Ember-app-kit wydaje się przestrzegać tego rozróżnienia od pierwszego spojrzenia ... Ale instrukcje w pliku chrząstek dotyczące włączania niektórych funkcji dają dwa wyraźne polecenia, więc jestem całkowicie zdezorientowany.

Zgaduję intuicyjnie

  1. npm install --save-dev nazwa-pakietu byłaby równoważna dodaniu nazwy-pakietu do mojego pliku.j.j

  2. bower install - zapisz nazwę-pakietu może być taki sam jak dodanie pakietu do mojego bower.json i uruchomienie instalacji bower ?

Jeśli tak, to kiedy powinienem kiedykolwiek instalować pakiety w taki sposób, bez dodawania ich do pliku zarządzającego zależnościami (oprócz globalnej instalacji narzędzi wiersza poleceń)?

apprenticeDev
źródło
1
możliwy duplikat różnicy między Bower a NPM?
Sindre Sorhus
14
@SindreSorhus To nie jest dokładna kopia. W tym poście jest również dodatkowe pytanie. BTW Czy masz coś przeciwko wyjaśnieniu downvote?
sachinjain024
1
Czy zmieniłeś zaakceptowaną odpowiedź? Wygląda na to, że wysoko oceniona z 2014 r. Mówi coś zupełnie innego niż przyjęta z 2016 r. Wyjaśnia również, dlaczego sugeruje inne podejście, więc jestem z tym spoko. Trochę zaskoczony, że został zaakceptowany (lub ponownie przyjęty).
1
Tak, zmieniłem zaakceptowaną odpowiedź, ponieważ uważam, że ta późniejsza jest znacznie bardziej odpowiednia. Przypuszczam, że w tej frontowej dżungli wielu ludzi jest tak samo zdezorientowanych jak ja, więc to pytanie zyskało popularność znacznie powyżej moich oczekiwań ... I wciąż uzyskuje poglądy 2 lata później. Dzięki Pawłowi jest teraz bardziej aktualna odpowiedź dla osób, do których można się odwoływać (fww Używam webpacka w mojej obecnej pracy).
apprenticeDev

Odpowiedzi:

154

Aktualizacja z połowy 2016 r . :

Wszystko zmienia się tak szybko, że jeśli będzie koniec 2017 roku, ta odpowiedź może już nie być aktualna!

Początkujący mogą szybko zgubić się w wyborze narzędzi do budowania i przepływów pracy, ale to, co jest najbardziej aktualne w 2016 r., To wcale nie używanie Bower, Grunt ani Gulp! Za pomocą Webpacka możesz zrobić wszystko bezpośrednio w NPM!

Nie zrozum mnie źle, ludzie używają innych przepływów pracy, a ja nadal używam GULP w moim starym projekcie (ale powoli się z niego wychodzę), ale tak właśnie dzieje się w najlepszych firmach, a programiści pracujący w tym przepływie zarabiają DUŻO pieniędzy!

Spójrz na ten szablon to bardzo aktualna konfiguracja składająca się z mieszanki najlepszych i najnowszych technologii: https://github.com/coryhouse/react-slingshot

  • Webpack
  • NPM jako narzędzie do kompilacji (bez przełyku, żucia lub altany)
  • Reaguj z Redux
  • ESLint
  • lista jest długa. Idź i odkrywaj!

Twoje pytania:

Kiedy chcę dodać pakiet (i sprawdzić zależność do git), do czego on należy - do package.json lub bower.json

  • Wszystko należy teraz do pliku package.json

  • Zależności wymagane do kompilacji znajdują się w „devDependencies” tj. npm install require-dir --save-dev(--Save-dev aktualizuje pakiet.json poprzez dodanie wpisu do devDependencies)

  • Zależności wymagane dla aplikacji w czasie wykonywania znajdują się w „zależnościach”, tj. npm install lodash --save(--Save aktualizuje pakiet.json poprzez dodanie wpisu do zależności)

Jeśli tak, to kiedy powinienem kiedykolwiek instalować pakiety w taki sposób, bez dodawania ich do pliku zarządzającego zależnościami (oprócz globalnej instalacji narzędzi wiersza poleceń)?

Zawsze . Tylko ze względu na wygodę. Po dodaniu flagi ( --save-devlub --save) plik zarządzający deps (package.json) jest aktualizowany automatycznie. Nie marnuj czasu, edytując w nim zależności. Skrót dla npm install --save-dev package-namejest npm i -D package-namei skrót dla npm install --save package-namejestnpm i -S package-name

Paweł
źródło
6
Twoja odpowiedź jest bardzo opiniotwórcza:> With help of Webpack you can do everything directly in NPM! To nieprawda, nie trzeba nawet paczki internetowej w swoim przepływie pracy
Augustin Riedinger
26
Ta odpowiedź wydaje się przyjmować wiele założeń. Pytanie dotyczy różnicy między npm a altaną, a ta odpowiedź z jakiegoś powodu wspomina o pakiecie internetowym. Tak, webpack jest jednym ze sposobów, aby to zrobić, ale ta odpowiedź sprawia, że ​​wydaje się, że jest to jedyny i właściwy sposób na zrobienie tego. Na przykład, jeśli ktoś pracuje z Polymer 1.x, w standardowym przepływie pracy będzie używana altana, a webpack nie obsługuje zbyt wiele.
John Powers,
1
Odpowiedź jest rzeczywiście aktualna, ale podany argument nie jest tak naprawdę: „ale tak się to robi” - cóż, nic nie powinno być zrobione tylko dlatego, że powinno być zrobione na pozór (tj. Przez innych). Pieniądze nie mają nic wspólnego z uzasadnieniem przepływu pracy.
forsberg
3
Patrząc na tę odpowiedź w 2017 r. Przechodząc do dokumentacji: „Pakiet webpack v1 jest przestarzały. Zachęcamy wszystkich programistów do aktualizacji do pakietu webpack 2. Postępuj zgodnie z naszym przewodnikiem migracji lub zapoznaj się z dokumentacją pakietu webpack 2, aby uzyskać więcej informacji”. Haha klasyczne tworzenie stron internetowych.
user643011,
1
@ user643011 Gdy spojrzysz na przewodnik migracji, zauważysz, że większość konfiguracji pozostaje taka sama, a reszta to tylko kosmetyczne zmiany w strukturze konfiguracji. Miałem migrację jednego popołudnia, w tym PR
Paweł
576

Npm i Bower to narzędzia do zarządzania zależnościami. Ale główna różnica między nimi polega na tym, że npm jest używany do instalowania modułów Node js, ale bower js służy do zarządzania komponentami typu front-end, takimi jak html, css, js itp .

Faktem, który sprawia, że ​​jest to bardziej mylące, jest fakt, że npm zapewnia pewne pakiety, które mogą być również używane w programowaniu front-end, takie jak grunti jshint.

Te linie dodają więcej znaczenia

Bower, w przeciwieństwie do npm, może mieć wiele plików (np. .Js, .css, .html, .png, .ttf), które są uważane za pliki główne. Bower semantycznie uważa te główne pliki, gdy są spakowane razem, za składnik.

Edycja : Grunt różni się znacznie od Npm i Bower. Grunt to narzędzie do uruchamiania zadań w javascript. Możesz robić wiele rzeczy za pomocą chrząkania, które w przeciwnym razie musiałeś zrobić ręcznie. Podkreślając niektóre zastosowania Grunt:

  1. Kompresowanie niektórych plików (np. Wtyczki zipup)
  2. Lintowanie plików js (jshint)
  3. Kompilowanie mniejszej liczby plików (bez wkładu)

Istnieją wtyczki grunt do kompilacji sass, ulepszania javascript, kopiowania plików / folderów, minimalizacji javascript itp.

Uwaga: wtyczka grunt jest również pakietem npm.

Pytanie 1

Kiedy chcę dodać pakiet (i sprawdzić zależność do git), do czego on należy - do package.json lub bower.json

To zależy, do czego należy ten pakiet. Jeśli jest to moduł węzła (jak chrząknięcie, żądanie), to w pakiecie.json przejdzie do bower json.

Pytanie 2

Kiedy powinienem instalować takie pakiety jawnie, bez dodawania ich do pliku zarządzającego zależnościami

Nie ma znaczenia, czy instalujesz pakiety jawnie, czy wspominasz o zależności w pliku .json. Załóżmy, że jesteś w trakcie pracy nad projektem węzła i potrzebujesz innego projektu, powiedzmy request, wtedy masz dwie opcje:

  • Edytuj plik package.json i dodaj zależność od „żądania”
  • instalacja npm

LUB

  • Użyj wiersza polecenia: npm install --save request

--saveopcje dodaje również zależność do pliku package.json. Jeśli nie określisz --saveopcji, pobierze tylko pakiet, ale plik json pozostanie niezmieniony.

Możesz to zrobić tak czy inaczej, nie będzie istotnej różnicy.

sachinjain024
źródło
3
Dziękuję za wyjaśnienia i artykuł! Wnikliwy i wyjaśnia różnicę (która powinna pomóc w podjęciu decyzji, gdzie umieścić zależności). Poczekam, czy może ktoś będzie dostroić się na ostatnie pytanie (re: kiedy będę kiedykolwiek chcesz zainstalować pakiety indywidualnie) i zaakceptować swoją odpowiedź później :)
apprenticeDev
1
Jeśli chodzi o npm, może to być menedżer pakietów dla modułów NodeJS, ale tracimy z oczu, że nie dotyczy to tylko NodeJS. npm jest równie skutecznym zarządzaniem zależnościami po stronie klienta. Np .: dontkry.com/posts/code/using-npm-on-the-client-side.html
Matt Smith
15
Co może altana zrobić, że npm nie może?
Adam Soffer,
1
Zauważ, że repozytorium wtyczek jQuery ( plugins.jquery.com ) zostało zastąpione przez npm.
thdoan
2
najnowszy samouczek szybkiego użycia kątowego 2 (RC) i zastosowania git seed npm tylko, w przeciwieństwie do samouczka v1, który korzystał zarówno z npm, jak i altany. Naprawdę bardzo podoba mi się fakt, że (a) package.jsonjest jedyną rzeczą do utrzymania, (b) że oblicza rekurencyjnie zależności w jednej linijce npm install, i (c) gdy pojawia się problem, wystarczy usunąć node_modulesfolder i uruchomić npm install jeszcze raz.
Sebas