Grunt, NPM 및 Bower의 차이점 (package.json vs bower.json)


612

npm과 bower를 처음 사용하여 emberjs에서 첫 번째 앱을 빌드했습니다. :)
레일에 약간의 경험이 있으므로 종속성을 나열하기위한 파일 아이디어 (예 : 번 들러 Gemfile)에 익숙합니다.

질문 : 내가 어디에 소속 않는 패키지를 추가 (그리고 자식에 대한 종속성에서 확인)하고 싶을 때 -에 package.json나에 bower.json?

내가 수집 무엇부터
실행 bower install패키지를 가져오고에 넣어 것 /vendor, 디렉토리
실행 npm install그것을 가져오고에 넣어 것이다 /node_modules디렉토리.

이 SO 답변 은 bower는 프론트 엔드이고 npm은 백엔드 물건입니다.
Ember-app-kit 은 처음부터이 차이를 고수하는 것 같습니다 ... 그러나 일부 기능활성화 하기위한 gruntfile의 명령어는 두 가지 명시적인 명령을 제공하므로 여기에서 완전히 혼동됩니다.

직관적으로 나는 그것을 추측 할 것이다

  1. npm install --save-dev package-name 은 package-name을 패키지에 추가하는 것과 같습니다.

  2. bower install --save package-name 은 패키지를 bower.json에 추가하고 bower install을 실행 하는 것과 동일 할 수 있습니다 .

이 경우, 종속성을 관리하는 파일에 패키지를 추가하지 않고 패키지를 명시 적으로 설치해야하는 경우 (전역 적으로 명령 행 도구를 설치하는 것 외에)?



14
@SindreSorhus 이것은 정확히 중복되지 않습니다. 이 게시물과 관련된 추가 질문이 있습니다. BTW downvote를 설명 하시겠습니까?
sachinjain024

1
수락 된 답변을 변경 했습니까? 2014 년에 고도로 공세 된 사람은 2016 년에 승인 된 사람과는 상당히 다른 것으로 보입니다. 또한 다른 접근 방식을 제안하는 이유를 설명하므로 멋집니다. 그것이 받아 들여 지거나 다시 받아 들여진다는 것에 약간 놀랐습니다.

1
예, 나중에 답변이 훨씬 관련성이 있다고 생각되어 수락 된 답변을 변경했습니다. 나는이 프론트 엔드 정글에서 많은 사람들이 내가했던 것처럼 혼란스러워한다고 생각합니다. 그래서이 질문은 제가 기대했던 것 이상으로 인기를 얻었습니다. Pawel 덕분에 사람들이 참조 할 수있는 최신 답변이 있습니다 (fwiw 저는 현재 직장에서 webpack을 사용하고 있습니다).
apprenticeDev

답변:


154

2016 년 중반 업데이트 :

상황이 너무 빠르게 바뀌어 2017 년 말 에이 답변은 더 이상 최신 상태가 아닐 수 있습니다!

초보자는 빌드 도구 및 워크 플로를 선택하면 빠르게 길을 잃을 수 있지만 2016 년 가장 최신의 것은 Bower, Grunt 또는 Gulp를 전혀 사용하지 않는 것입니다! Webpack의 도움으로 NPM에서 직접 모든 것을 할 수 있습니다!

사람들이 다른 워크 플로를 사용하는 것을 잘못하지 말고 레거시 프로젝트에서 여전히 GULP를 사용하지만 천천히 이동하지만이 워크 플로우에서 일하는 최고의 회사와 개발자가 많은 돈을 버는 방법입니다.

이 템플릿을 보면 최신 기술과 최신 기술이 혼합 된 최신 설정입니다 : https://github.com/coryhouse/react-slingshot

  • 웹팩
  • 빌드 도구로서의 NPM (Gulp, Grunt 또는 Bower 없음)
  • Redux와 반응
  • ESLint
  • 목록이 길다. 가서 탐험하세요!

당신의 질문:

패키지를 추가하고 git에 의존성을 체크인하려면 package.json 또는 bower.json에 어디에 속해 있습니까?

  • 이제 모든 것이 package.json에 속합니다

  • 빌드에 필요한 종속성은 "devDependencies"에 있습니다 (예 npm install require-dir --save-dev: --save-dev는 devDependencies에 항목을 추가하여 package.json을 업데이트합니다)

  • 런타임 동안 응용 프로그램에 필요한 종속성은 "종속성"에 있습니다 (즉 npm install lodash --save, 종속성에 항목을 추가하여 package.json 업데이트 저장)

이 경우, 종속성을 관리하는 파일에 패키지를 추가하지 않고 패키지를 명시 적으로 설치해야하는 경우 (전역 적으로 명령 행 도구를 설치하는 것 외에)?

항상 . 단지 편안함 때문입니다. 플래그 ( --save-dev또는 --save) 를 추가하면 dep (package.json)를 관리하는 파일이 자동으로 업데이트됩니다. 종속성을 수동으로 편집하여 시간을 낭비하지 마십시오. npm install --save-dev package-nameis에 대한 npm i -D package-name단축키와 npm install --save package-nameis에 대한 단축키npm i -S package-name


6
귀하의 답변은 매우 With help of Webpack you can do everything directly in NPM! 소중합니다 :> 사실이 아닙니다. 워크 플로우에 웹팩이 필요하지 않습니다
Augustin Riedinger

26
이 답변은 많은 가정을하고있는 것 같습니다. 질문은 npm과 bower의 차이점을 묻고 있으며이 대답은 어떤 이유로 든 webpack에 관한 것입니다. 예, 웹팩은이를 수행하는 한 가지 방법이지만이 답변은 유일하고 올바른 방법 인 것처럼 보이게합니다. 예를 들어 누군가 누군가 Polymer 1.x를 사용하는 경우 표준 워크 플로우는 bower를 사용하며 웹팩에 대한 지원은 많지 않습니다.
John Powers

1
그 대답은 실제로는 관련이 있지만, "이것이 어떻게 이루어 졌는가"라는 주장은 실제로는 아닙니다. 글쎄, 그것은 마치 겉보기에 행해져야만한다는 것 (즉, 다른 사람들에 의해 행해짐)으로해서는 안됩니다. 돈은 워크 플로에 대한 추론과 아무 관련이 없습니다.
forsberg

3
설명서로 이동 : "webpack v1은 더 이상 사용되지 않습니다. 모든 개발자는 webpack 2로 업그레이드하는 것이 좋습니다. 자세한 내용은 마이그레이션 안내서를 따르거나 webpack 2 설명서를 참조하십시오." 하하 클래식 웹 개발.
user643011

1
@ user643011 마이그레이션 가이드를 살펴보면 대부분의 구성이 동일하게 유지되고 나머지는 구성 구조의 외관상의 변화 일뿐입니다. 나는 PR을 포함하여 오후에 이주를했다
Pawel

576

Npm과 Bower는 모두 종속성 관리 도구입니다. 그러나 npm은 노드 js 모듈 설치에 사용되지만 bower js는 html, css, js 등과 같은 프론트 엔드 구성 요소를 관리하는 데 사용됩니다 .

npm이 더 혼란스럽게 만드는 사실은 npm이 gruntand 같은 프론트 엔드 개발에 사용될 수있는 일부 패키지를 제공한다는 것 jshint입니다.

이 줄은 더 많은 의미를 추가합니다

Bower는 npm과 달리 주 파일로 간주되는 여러 파일 (예 : .js, .css, .html, .png, .ttf)을 가질 수 있습니다. Bower는 이러한 패키지를 함께 패키지화 할 때 이러한 주요 파일을 의미 적으로 고려합니다.

편집 : Grunt 는 Npm 및 Bower와는 다릅니다. 그런트는 자바 스크립트 작업 러너 도구입니다. 그렇지 않으면 수동으로해야했던 grunt를 사용하여 많은 일을 할 수 있습니다. 그런트 사용의 일부를 강조 :

  1. 일부 파일 압축 (예 : zipup 플러그인)
  2. js 파일에 린팅 (jshint)
  3. 더 적은 파일 컴파일

sass 컴파일, 자바 스크립트, 파일 / 폴더 복사, 자바 스크립트 축소 등을위한 grunt 플러그인이 있습니다.

grunt 플러그인도 npm 패키지입니다.

질문 1

패키지를 추가하고 git에 의존성을 체크인하려면 package.json 또는 bower.json에 어디에 속해 있습니까?

실제로이 패키지가 어디에 속하는가에 달려 있습니다. 그것이 grunt, request와 같은 노드 모듈이라면 package.json에 들어가고 그렇지 않으면 bower json에 들어갑니다.

질문 -2

종속성을 관리하는 파일에 패키지를 추가하지 않고 패키지를 명시 적으로 설치해야하는 경우

패키지를 명시 적으로 설치하는지 또는 .json 파일의 종속성을 언급하는지는 중요하지 않습니다. 노드 프로젝트를 진행하는 중이고 다른 프로젝트가 필요하다고 가정하면 request두 가지 옵션이 있습니다.

  • package.json 파일을 편집하고 'request'에 대한 종속성을 추가하십시오
  • npm 설치

또는

  • 커맨드 라인 사용 : npm install --save request

--save옵션은 package.json 파일에도 종속성을 추가합니다. --save옵션을 지정하지 않으면 패키지 만 다운로드되지만 json 파일은 영향을받지 않습니다.

이 방법을 사용하면 큰 차이가 없습니다.


3
설명과 기사에 감사드립니다! 통찰력을 갖고 차이점을 명확하게합니다 (의존적 위치를 결정하는 데 도움이 됨). 아마도 누군가가 마지막 질문에 차임한다면 나는 기다릴 것이다 (재 : 나는 지금까지 개별적으로 패키지를 설치하고 싶을 때) :), 그리고 나중에 당신의 대답을 받아
apprenticeDev

1
npm과 관련하여 NodeJS 모듈의 패키지 관리자 일 수 있지만 NodeJS에만 국한되지 않는다는 사실을 잊고 있습니다. npm은 클라이언트 쪽 종속성을 효과적으로 관리합니다. 예 : dontkry.com/posts/code/using-npm-on-the-client-side.html
Matt Smith

15
그 npm이 할 수없는 bower는 무엇을 할 수 있습니까?
Adam Soffer

1
jQuery 플러그인 저장소 ( plugins.jquery.com )가 npm으로 대체되었습니다.
thdoan

2
최신 퀵 스타트 앵귤러 2 (RC) 튜토리얼 및 git seed는 npmnpm과 bower를 모두 사용하는 v1 튜토리얼과 달리 오직 사용합니다. 나는 정말로 package.json(a) 유지해야 할 유일한 것, (b) 하나의 라이너에서 재귀 적으로 종속성을 계산한다는 사실 npm install과 (c) 문제가있을 때 node_modules폴더 를 삭제하고 npm install을 실행 해야 한다는 사실을 정말로 좋아합니다. 다시.
Sebas
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.