TL; DR : 일상적인 사용에서 가장 큰 차이점은 중첩 된 종속성이 아니라 모듈과 전역의 차이점입니다.
이전 포스터는 기본적인 차이점을 잘 다루었다고 생각합니다. (npm의 중첩 된 종속성 사용은 실제로 가장 중요한 차이점이라고 생각하지 않지만 크고 복잡한 응용 프로그램을 관리하는 데 실제로 도움이됩니다.)
그러나 Bower와 npm의 가장 근본적인 차이점 중 하나를 명시 적으로 설명한 사람은 아무도 없습니다. 위의 답변을 읽으면 'pms'라는 단어가 npm의 맥락에서 자주 사용됩니다. 그러나 그것은 심지어 구문 차이 일 수도있는 것처럼 우연히 언급됩니다.
그러나 모듈 대 전역 (또는 모듈 대 '스크립트') 의 이러한 구분은 Bower와 npm의 가장 중요한 차이점 일 수 있습니다.모듈에 모든 것을 넣는 npm 접근 방식을 사용하려면 브라우저의 Javascript 작성 방식을 거의 확실히 개선해야합니다.
Bower 접근법 : <script>태그 와 같은 글로벌 리소스
기본적으로 Bower는 일반 스크립트 파일을로드하는 것입니다. 해당 스크립트 파일이 무엇이든 Bower가로드합니다. 기본적으로 어떤 정자는 그냥 평범한 된 모든 스크립트를 포함 같다고 수단 <script>에 '이야 <head>당신의 HTML의.
따라서 동일한 기본 접근 방식을 사용하지만 몇 가지 자동화 편의를 얻을 수 있습니다.
- 예전에는 프로젝트 저장소에 JS 종속성을 포함 시키거나 (개발하는 동안) CDN을 통해 JS 종속성을 가져와야했습니다. 이제 리포지토리에서 추가 다운로드 무게를 건너 뛸 수 있으며, 누군가는
bower install로컬에서 필요한 것을 신속 하고 즉시 얻을 수 있습니다.
- Bower 종속성이에 자체 종속성을 지정하면 해당 종속성
bower.json도 다운로드됩니다.
그러나 그 이상으로 Bower는 javascript 작성 방법을 변경하지 않습니다 . Bower가로드 한 파일에 들어가는 내용은 전혀 변경할 필요가 없습니다. 특히 이것은 Bower가로드 한 스크립트에서 제공되는 리소스 가 브라우저 실행 컨텍스트의 어느 곳에서나 사용할 수있는 전역 변수 로 정의 될 수 있음을 의미합니다.
npm 접근 방식 : 공통 JS 모듈, 명시 적 종속성 주입
노드 랜드의 모든 코드 (및 npm을 통해로드 된 모든 코드)는 모듈 (구체적으로 CommonJS 모듈 형식 의 구현 또는 현재 ES6 모듈)로 구성됩니다. 따라서 NPM을 사용하여 브라우저 측 종속성을 처리하는 경우 (Browserify 또는 동일한 작업을 수행하는 다른 작업을 통해) Node와 같은 방식으로 코드를 구성합니다.
내가 왜 똑똑한 사람들이 '왜 모듈입니까?'라는 문제를 다루었지만 캡슐 요약은 다음과 같습니다.
- 모듈 내부의 모든 것은 사실상 네임 스페이스 이므로 더 이상 전역 변수가 아니며 의도하지 않고 실수로 참조 할 수 없습니다.
- 모듈을 사용하려면 모듈 내부의 모든 것을 특정 컨텍스트 (일반적으로 다른 모듈)에 의도적으로 주입해야합니다.
- 즉, 응용 프로그램의 여러 부분에서 동일한 외부 종속성 (lodash,하자)의 여러 버전을 가질 수 있으며 충돌 / 충돌하지 않습니다. (자신의 코드가 한 버전의 종속성을 사용하려고하지만 외부 종속성 중 하나가 충돌하는 다른 버전을 지정하기 때문에 놀라 울 정도로 자주 발생합니다. 또는 각각 다른 버전을 원하는 두 개의 외부 종속성이 있습니다.)
- 모든 종속성은 특정 모듈에 수동으로 주입되기 때문에 추론하기가 매우 쉽습니다. 당신은 사실을 알고 있습니다. "이 작업을 할 때 고려해야 할 유일한 코드는 의도적으로 여기에 주입하기로 선택한 것 입니다. "
- 주입 된 모듈의 내용도 사용자가 할당 한 변수 뒤에 캡슐화 되고 모든 코드가 제한된 범위 내에서 실행되므로 놀라움과 충돌이 매우 불가능합니다. 의존성 중 하나에서 무언가가 실수로 전역 변수를 재정의하지 않고 실수로 재정의하거나 그렇게 할 가능성은 훨씬 적습니다. (이 수 일이 있지만, 일반적으로 같은과, 그것을 할 수있는 길 밖으로 갈 필요
window.variable. 즉, 여전히 할당되어 발생하는 경향이 한 사고 this.variable즉 실현하지, this실제로 window현재 컨텍스트에 있습니다.)
- 개별 모듈을 테스트하려는 경우 모듈 내부에서 실행되는 코드에 정확히 어떤 다른 요소 (종속성)가 영향을 미치는지 쉽게 알 수 있습니다. 또한 모든 것을 명시 적으로 주입하기 때문에 이러한 종속성을 쉽게 조롱 할 수 있습니다.
프론트 엔드 코드를위한 모듈의 사용은 다음과 같이 요약됩니다.보다 좁은 컨텍스트에서 작업하고 추론하고 테스트하기가 더 쉬워지고, 무슨 일이 일어나고 있는지 확실하게 알 수 있습니다.
CommonJS / Node 모듈 구문을 사용하는 방법을 배우는 데 약 30 초가 걸립니다. 모듈이 될 주어진 JS 파일 내에서 먼저 다음과 같이 사용하려는 외부 종속성을 선언하십시오.
var React = require('react');
파일 / 모듈 내에서 평소와 같이 무엇이든하고 외부 사용자에게 노출시키고 자하는 객체 나 함수를 생성합니다. myModule 있습니다.
파일 끝에서 다음과 같이 세상과 공유하려는 모든 것을 내 보냅니다.
module.exports = myModule;
그런 다음 브라우저에서 CommonJS 기반 워크 플로우를 사용하려면 Browserify와 같은 도구를 사용하여 모든 개별 모듈 파일을 가져 와서 런타임에 컨텐츠를 캡슐화하고 필요에 따라 서로 삽입하십시오.
그리고 ES6 모듈 (Babel 또는 이와 유사한 것으로 ES5로 변환 될 가능성이 높음)이 널리 수용되고 있으며 브라우저 또는 노드 4.0에서 모두 작동하므로 좋은 개요를 언급해야합니다. 를 합니다.
이 데크 에서 모듈로 작업하기위한 패턴에 대해 자세히 알아보십시오 .
편집 (2017 년 2 월) : Facebook의 Yarn 은 요즘 npm을위한 매우 중요한 잠재적 교체 / 보충입니다. npm이 제공하는 것을 기반으로하는 빠르고 결정적인 오프라인 패키지 관리입니다. JS 프로젝트를 살펴볼 가치가 있습니다. 특히 프로젝트를 쉽게 교체 할 수 있기 때문입니다.
EDIT (2019 년 5 월) "Bower는 더 이상 사용되지 않습니다 . 스토리 끝." (h / t : @DanDascalescu, 아래에 정리 요약이 나와 있습니다.)
그리고 Yarn 이 여전히 활성화되어 있지만 Yarn의 주요 기능 중 일부를 채택하면 많은 모멘텀이 npm으로 돌아갔습니다.
