javascript 프론트 Bower와 npm의 차이점은 무엇입니까?




프론트 엔드 npm (8)

bowernpm 의 근본적인 차이점은 무엇입니까? 평범하고 단순한 것을 원한다. 동료 중 일부가 프로젝트에서 bowernpm 상호 교환 적으로 사용하는 것을 보았습니다.


node.js로 작업하는 많은 사람들에게 bower의 주요 이점은 자바 스크립트가 아닌 종속성을 관리하기위한 것입니다. 그들이 javascript로 컴파일하는 언어로 작업한다면, npm은 의존성의 일부를 관리하는 데 사용될 수 있습니다. 그러나 모든 종속성이 node.js 모듈이 될 수는 없습니다. 자바 스크립트로 컴파일하는 사람들 중 일부는 이상한 소스 언어 특정 mangling을 사용하여 사용자가 소스 코드를 예상 할 때 javascript로 컴파일되지 않은 옵션을 전달할 수 있습니다.

npm 패키지의 모든 것이 사용자 지향 자바 스크립트 일 필요는 없지만 npm 라이브러리 패키지의 경우 최소한 그 중 일부는 있어야합니다.


Bower와 Npm은 자바 스크립트 용 패키지 관리자입니다.

나무 그늘

Bower는 전적으로 프런트 엔드 개발 용으로 만들어졌습니다. 플랫 종속성 트리를 사용하므로 각 패키지마다 하나의 버전 만 있으면되므로 페이지로드가 줄어 듭니다. 주로 최소한의 리소스로드를 목표로합니다. 기여자가 적기 때문에 개발 프로세스가 느립니다.

Bower에는 bower.json이라는 구성 파일이 있습니다. 이 파일에서 우리는 Bower에 필요한 구성 요소와 라이센스 세부 사항, 설명, 이름 등을 구성 할 수 있습니다. Bower는 jquery, angular, react, ember, knockout, backbone 등과 같은 프론트 엔드 패키지에 적합합니다.

Npm

Npm은 Node.js 모듈을 관리하는 데 가장 일반적으로 사용되지만 프런트 엔드에도 적합합니다. 그것은 중첩 된 의존성 트리와 평범한 의존성 트리를 사용합니다. 그것은 인기가 있고 많은 공헌자들이 있습니다. 그래서 새로운 버전은 항상 흥미 진진한 기능을 제공합니다.

Npm에는 package.json이라는 구성 파일이 있습니다. 이 파일에서 우리는 필요한 의존성과 라이센스 세부 사항, 설명, 이름 등 Npm의 구성을 유지할 수 있습니다. Npm은 종속성과 DevDependencies를 제공합니다. 종속성은 Jquery, Angular 등과 같은 프런트 엔드 파일을 다운로드하고 유지 관리합니다. DevDependencies는 Grunt, Gulp, JSHint 등과 같은 개발 도구를 다운로드하고 관리합니다.

우리 프로젝트에서 jQuery가 필요하기 때문에 이것은 분명히 프론트 엔드에서 잘 작동하지 않습니다. 하나의 jQuery 사본 만 있으면되지만 다른 패키지에 jQuery가 필요한 경우 jQuery 사본을 다시 한 번 다운로드합니다. 이는 Npm의 주요 단점 중 하나입니다.

주요 메모 : 많은 프로젝트가 두 가지를 모두 사용하는 이유는 프런트 엔드 패키지에 Bower를 사용하고 개발자 도구에 Npm을 사용하기 때문입니다. 프로젝트에서 패키지 관리자를 늘리면 워크 플로우가 더 어려워집니다. Npm 3은 webpack 또는 webpack 과 결합되어 지금가는 길입니다.


이 답변은 Sindre Sorhus의 답변에 추가되었습니다. npm과 Bower의 주요 차이점은 재귀 적 종속성을 처리하는 방식입니다. 단일 프로젝트에서 함께 사용할 수 있습니다.

npm FAQ : (2015 년 9 월 6 일 archive.org 링크)

종속성을 중첩하지 않으면 종속성 충돌을 피하는 것이 훨씬 더 어렵습니다. 이것은 npm이 작동하는 방식에있어 기본이며 매우 성공적인 접근 방식으로 입증되었습니다.

Bower 홈페이지 :

Bower는 프런트 엔드에 최적화되어 있습니다. Bower는 플랫 종속성 트리를 사용하므로 각 패키지마다 하나의 버전 만 있으면되므로 페이지로드가 최소화됩니다.

즉, npm은 안정성을 목표로합니다. Bower는 최소한의 리소스로드를 목표로합니다. 종속성 구조를 끌어 내면 다음과 같이 표시됩니다.

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

보시다시피 일부 종속성을 재귀 적으로 설치합니다. 종속성 A에는 세 개의 설치된 인스턴스가 있습니다!

나무 그늘:

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

여기서 모든 고유 한 종속성이 동일한 레벨에 있음을 알 수 있습니다.

그래서 npm을 사용하는 것이 왜 싫은가요?

어쩌면 의존성 B는 종속성 C와는 다른 버전의 의존성 A가 필요합니다. npm은이 종속성의 두 버전을 모두 설치하므로 어쨌든 작동하지만 Bower는 중복을 원하지 않으므로 충돌을 일으킬 수 있습니다 (웹 페이지에서 동일한 리소스를로드하는 것이 매우 비효율적이며 비용이 많이 들며 심각한 오류가 발생할 수도 있음). 설치할 버전을 수동으로 선택해야합니다. 이것은 의존성 중 하나가 깨지는 효과를 가질 수 있지만, 그것은 당신이 어쨌든 고칠 필요가있는 것입니다.

따라서 Bower는 웹 페이지 (예 : 중복을 피할 수있는 런타임) 에 게시하려는 패키지에 대해 Bower를 사용하고 테스트, 구축, 최적화, 확인 등과 같은 기타 작업에는 npm을 사용합니다 (예 : 개발 시간 중복이 덜 우려되는 부분).

npm 3 업데이트 :

npm 3은 여전히 ​​Bower와는 다른 방식으로 작동합니다. 발견 된 첫 번째 버전에 대해서만 종속성을 전역 적으로 설치합니다. 다른 버전은 트리 (상위 모듈, node_modules)에 설치됩니다.

  • [node_modules]
    • dep A v1.0
    • dep B v1.0
      • dep A v1.0 (루트 버전 사용)
    • dep C v1.0
      • dep v2.0 (이 버전은 루트 버전과 다르므로 중첩 된 설치입니다.)

자세한 내용 은 npm 3문서를 읽는 것이 좋습니다.


저의 팀은 Bower에서 떠나서 npm으로 이전했습니다.

  • 프로그래밍 방식으로 사용하는 것은 힘들었습니다.
  • Bower의 인터페이스는 계속 변화했습니다.
  • URL 단축과 같은 일부 기능은 완전히 손상되었습니다.
  • 동일한 프로젝트에서 Bower와 npm을 모두 사용하면 고통 스럽습니다.
  • bower.json 버전 필드를 git 태그와 동기화하여 유지하는 것은 고통 스럽습니다.
  • 소스 제어! = 패키지 관리
  • CommonJS 지원은 간단하지 않습니다.

자세한 내용은 "왜 팀원이 bower 대신 npm을 사용하는지"를 참조하십시오.


모든 패키지 관리자에게는 많은 단점이 있습니다. 당신은 당신이 살 수있는 것을 골라야합니다.

역사

npm 은 node.js 모듈을 관리하기 시작했습니다 (패키지가 기본적으로 node_modules 로 들어가는 이유입니다).하지만 Browserify 나 WebPack과 함께 사용하면 프런트 엔드에서도 작동합니다.

Bower 는 전적으로 프런트 엔드 용으로 만들어졌으며이를 염두에두고 최적화되었습니다.

레포의 크기

npm은 일반적인 목적의 자바 스크립트 (예 : 국가 정보의 경우 국가 country-data 또는 프런트 엔드 또는 백엔드에서 사용할 수있는 함수 sorts 위한 정렬 country-data 를 포함하여 bower보다 훨씬 큽니다.

Bower는 패키지의 양이 훨씬 적습니다.

스타일 등의 취급

정자에는 스타일 등이 포함됩니다.

npm은 JavaScript에 초점을 맞추고 있습니다. 스타일은 별도로 다운로드되거나 npm-sass 또는 sass-npm 과 같은 것으로 필요합니다.

종속성 처리

가장 큰 차이점은 npm은 중첩 된 종속성을 가지지 만 Bower는 평탄한 종속성 트리를 필요로하지만 (사용자가 의존성 해결의 부담을지게 됨)

중첩 된 종속성 트리는 종속성이 자체 의존성을 가질 수 있음을 의미합니다. 이것은 두 모듈이 동일한 버전의 다른 버전을 필요로하면서 여전히 작동하도록합니다. npm v3부터 종속성 트리는 기본적으로 플랫 (공간 절약)으로되어 필요한 경우에만 중첩됩니다 (예 : 두 종속성에 자체 버전의 Underscore가 필요한 경우).

일부 프로젝트는 프론트 엔드 패키지에 Bower를 사용하고 Yeoman, Grunt, Gulp, JSHint, CoffeeScript 등과 같은 개발자 도구에 npm을 사용하는 두 가지 프로젝트를 사용합니다.

자원


http://ng-learn.org/2013/11/Bower-vs-npm/ 에서 유용한 설명을 찾았습니다.

한 편 npm은 node.js 환경에서 사용되는 모듈을 설치하거나 karma, lint, minifier 등과 같은 node.js를 사용하여 개발 된 개발 도구를 만들기 위해 만들어졌습니다. npm은 모듈을 프로젝트 (기본적으로 node_modules)에 로컬로 설치하거나 전역으로 여러 프로젝트에서 사용할 수 있습니다. 대규모 프로젝트에서 종속성을 지정하는 방법은 종속성 목록을 포함하는 package.json이라는 파일을 작성하는 것입니다. npm install을 실행하면이 목록이 npm에 의해 인식되어 다운로드되고 설치됩니다.

반면 bower는 프론트 엔드 종속성을 관리하기 위해 작성되었습니다. jQuery, AngularJS, 밑줄 등의 라이브러리. npm과 마찬가지로 bower.json이라는 종속성 목록을 지정할 수있는 파일이 있습니다. 이 경우 프론트 엔드 종속성은 bower install을 실행하여 설치됩니다. bower install은 기본적으로 bower_components라는 폴더에 설치합니다.

보시다시피, 그들은 비슷한 작업을 수행하지만 매우 다른 라이브러리 집합을 대상으로합니다.


Bower는 단일 버전의 모듈을 유지 관리하며, 올바른 / 최선을 선택하는 데 도움을줍니다.

자바 스크립트 의존성 관리 : npm 대 bower vs volo?

NPM은 모듈 시스템이 있고 로컬로 작업하기 때문에 노드 모듈에 더 좋습니다. 바우어 (Bower)는 현재 글로벌 범위 만 있기 때문에 브라우저에 적합하며 작업하는 버전을 매우 선택적으로 선택하고자합니다.


2017 년 10 월 업데이트

Bower는 마침내 사용이 deprecated 되었습니다. 이야기의 끝.

이전 답변

Mattias Petter Johansson, Spotify의 JavaScript 개발자 :

거의 모든 경우 Bower보다 Browserify와 npm을 사용하는 것이 더 적절합니다. Bower보다 프런트 엔드 응용 프로그램을위한 더 나은 패키징 솔루션입니다. Spotify에서 npm을 사용하여 전체 웹 모듈 (html, css, js)을 패키지화하고 매우 잘 작동합니다.

Bower는 웹용 패키지 관리자로도 유명합니다. 프론트 엔드 개발자가 내 인생을 더 좋게 만들었던 패키지 관리자라면 이것이 굉장 할 것입니다. 문제는 Bower가 특별한 목적으로 툴링을 제공하지 않는다는 것입니다. 그것은 npm이 아는 툴링을 제공하지 않으며 특히 프론트 엔드 개발자에게 특히 유용하지 않습니다. 프런트 엔드 개발자가 Bower를 npm 이상 사용하는 것은 아무런 이점이 없습니다.

우리는 배어를 사용하지 말고 npm 주위에 합병해야합니다. 고맙게도, 그 일 이 일어나고 있습니다 :

browserify 또는 webpack을 사용하면 모든 모듈을 큰 축소 파일로 연결하기가 매우 쉽습니다. 특히 모바일 장치의 경우 성능이 가장 좋습니다. Bower는 그렇지 않습니다. 동일한 효과를 얻으려면 훨씬 많은 노동력이 필요합니다.

또한 npm은 여러 버전의 모듈을 동시에 사용할 수있는 기능을 제공합니다. 많은 응용 프로그램 개발을 수행하지 않았다면, 처음에는 당신을 좋지 않게 생각할 수도 있었지만, 일단 의존성 지옥 을 몇 번 살펴 보았 더라면 한 모듈의 여러 버전을 가질 수있는 능력이 꽤나 있음을 깨닫게 될 것입니다 훌륭한 기능. npm에는 두 개의 모듈이 동일한 버전의 모듈을 사용할 수있는 경우 자동으로 두 버전의 모듈 만 사용하도록하는 매우 편리한 중복 제거 도구 가 포함되어 있습니다 . 그러나 그들이 할 수 없다면, 당신은 매우 편리합니다.

( Webpackrollup 은 2016 년 8 월 현재 Browserify보다 더 우수한 것으로 간주됩니다.)





bower