Blog

[Bower] Front-end Package Manaer

스크린샷 2015-03-27 오전 6.06.07

학생 때 책에서 잠깐 봤었는데 이걸 사용할 일도 없었고 뭔가 어려워 보여 사용해 보질 못했다. Bower는 프론트개발을 위한 패키지 매니지 시스템이다. 프론트단이 점점 거대해 지면서 서비스 의존성 관리를 위해 만들어 졌다고 하는데, 여기서 의존성은 뭘 말하는지 잘 모르겠다. (누가 댓글로 좀 알려주세요)

bower에 대해 간략히 설명하면 command line utility이며 node npm이 있어야한다.

bower 설치

 

패키지 설치 (여러개를 받을 수 있다)

*최초 다운로드후 캐싱하므로(~/.bower) 이후로는 빨라진다.

패키지 다운로드시 bower 저장소의 해당패키지의 모든 내용을 받기 때문에 실제 참조 코드의 경로가 복잡해 질 수 있을 것 같다. 내려 받은 패키지의 일부만 옮겨서 사용해도 되는지 모르겠지만 그렇게하면 파일 버전 관리시 항상 수작업을 거쳐야할 것 같다. 다운로드시 .bowerrc 파일의 directory 값을 수정하지 않으면 기본으로 bower_components 라는 폴더가 생성되고 거기에 패키지들이 다운로드되어 위치한다.

bower.json에 dependecies에 해당 패키지명 저장

 

bower.json에 devDependecies에 해당 패키지명 저장

 

설치된 컴포넌트 제거

 

현재 폴더 하위에 설치된 컴포넌트 목록 확인 (최신버전이 아닐경우 옆에 최신버전이 ()에 표시됨)

 

컴포넌트 검색

 

패키지 검색

 

패키지 버전정보 확인

 

read more about bower 명령어

 

프로젝트의 의존성을 동일하게 가져가기위해 설치한 패키지에 대한 정보를 bower.json에 명시
npm의 package.json,Maven의 pom.xml과 유사한 파일이며 bower init 을 사용하면 cmd line에서 바로 해당 파일생성이 가능하다. bower.json에 의존성이 명시되어 있다면 bower install시 자동으로 명시된 컴포넌트들을 받아서 설치한다. 해당 작업은 .bowerrc에서 json:값을 지정된 bower.json파일로 설정해 줘야 한다.

  • name: (필수값) 팩키지명
  • version: 버전 정보
  • ignore: 패키지를 설치할 때 bower가 무시할 파일 목록
  • dependencies : 프로덕션에서 사용할 패키지 의존성 정보
  • devDependencies : 개발용 패키지 의존성 정보
* read more about API

 

.bowerrc (bower에 전체적으로 적용할 사용자의 홈디렉토리에 json타입의 .bowerrc 파일을 만들어 저장할 수 있다.)

  • directory : 컴포넌트를 설치할 기본 디렉토리
  • json: 의존성을 처리할 때 사용할 기본 JSON 파일

* read more about .bowerrc

 

팀내에서 사용한다면 공융 .bowerrc / bower.json 파일을 만들어 사용하고 추가적인 패키지 관리는 각자 하면 될 듯싶다.