패키지 관리 bower 툴

웹에 특화된 package management 서비스로 프로젝트의 .bowerrc 파일내에 기록된 directory 폴더에 웹 관련 라이브러리등을 다운로드하거나 버전을 관리할 수 있다. 

bower는 node.js로 만들어진 도구 이므로 npm을 이용해서 설치하고 커맨드라인 명령어로 사용하기 때문에 글로벌로 설치한다. 정상적으로 설치가 되면 bower -v로 버전정보를 확인할 수 있다.

npm install -g bower

init

bower는 bower.json에 선언된 라이브러리를 읽어서 설치할 수 있다. 파일이 존재하면 init 명령으로 초기 파일을 설치한다.

bower init

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

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

작성한 프로젝트를 bower에 배포할 것이 아니라면 dependencies와 devDependencies외이는 큰 의미는 없다. 

{
  "dependencies": {
    "jquery": "~2.0.0"
  },
  "devDependencies": {
    "qunit": "~1.11.0"
  }
}

install

bower install 명령어를 이용하면 bower.json파일에 선언된 라이브러리들을 읽게 된다. maven의 pom과 같다고 생각하면 쉬울 것이다. 라이브러리들을 추가하면서 bower.json에 dependencies 설정을 하고 싶으면 grunt처럼 –save명령어를 통해서 추가 할 수 있다.

bower install <package> --save (dependency에 추가)
bower install <package> --save-dev (devDependencies에 추가)

버전을 지정해서 설치할 때:

bower install jquery#1.9.1

삭제할때는 uninstall을 사용한다. 실제로 디렉터리를 삭제시키는 것과 같다.

bower uninstall jquery

cache

bower는 인터넷접속이 없어도 패키징을 받을 수 있게 로컬에 패키지들을 캐시해둔다.

list

bower list 혹은 bower ls로 현재 폴더 하위에 설치된 컴포넌트들의 목록을 확인할 수 있고 최신버전이 아닌 경우 옆에 최신버전이 표시된다.

HelloIonic D:\ongoingProjects\votee\votee\public
├─┬ angular-chart.js#1.1.1 extraneous
│ ├── angular#1.5.9 (1.6.2-build.5246+sha.54a7caf available)
│ └── chart.js#2.4.0
├─┬ angular-google-maps#2.4.0 extraneous (2.4.1 available)
│ ├── angular#1.5.9 (1.5.11 available, latest is 1.6.2-build.5246+sha.54a7caf)
│ ├─┬ angular-simple-logger#0.1.7
│ │ └── angular#1.5.9 (1.6.2-build.5246+sha.54a7caf available)
│ ├── google-maps-utility-library-v3-infobox#1.1.14
│ ├── google-maps-utility-library-v3-keydragzoom#2.0.9
│ ├── google-maps-utility-library-v3-markerwithlabel#1.1.10
│ ├── js-rich-marker#4b6f4df749
│ ├── lodash#4.17.2 (4.17.4 available)
│ └── markerclustererplus#2.1.4
...

search

특정 컴포넌트를 검색할 수 있다. 패키지명으로 검색하려면 lookup을 사용한다. 일치하는 패키지명이 없으면 비슷한 패키지를 추천한다.

bower search d3
bower lookup d3
bower info jquery

정보 확인은 info를 사용할 수 있다. 

.bowerrc

bower에 전체적으로 적용할 설정을 사용자의 홈디렉토리에 .bowerrc 파일을 만들어서 지정할 수 있다. .bowerrc파일은 다음과 같은 JSON 형식이다.

{
  "directory": "bower_components",
  "endpoint": "https://bower.mycompany.com",
  "json": "bower.json",
  "searchpath": [
    "https://bower.herokuapp.com"
  ],
  "shorthand_resolver": "git://example.com/{{{ organization }}}/{{{ package }}}.git"
}

• directory : 컴포넌트를 설치할 기본 디렉토리
• endpoint: 커스텀 등록 엔드포인트
• json: 의존성을 처리할 때 사용할 기본 JSON 파일
• searchpath: 추가적으로 검색할 읽기전용 Bower 저장소
• shorthand_resolver: 간단하게 지정할 패키지명의 템플릿