어드민, Author at 리뷰나라

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

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

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

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

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

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

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

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

답변

2016 년 중반 업데이트 :

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

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

Google “빌드 도구로 npm”결과 :
https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
웹팩 : https://webpack.github.io/docs/installation.html

사람들이 다른 워크 플로를 사용하는 것을 잘못하지 말고 레거시 프로젝트에서 여전히 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

답변

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를 사용하여 많은 일을 할 수 있습니다. 그런트 사용의 일부를 강조 :

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

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 파일은 영향을받지 않습니다.

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