프론트엔드를 위한 패키지 관리자 bower - 세팅

프론트엔드를 위한 패키지 관리자 bower - 세팅 편

1. node.js & npm 설치

npm은 Node Packaged Manager의 약자로 말 그대로 nodejs 패키지 관리자이다. nodejs에 기본으로 내장되어있어서 nodejs를 설치해주면 npm도 같이 설치된다. 아래 링크를 통해 nodejs를 설치해주자.

https://nodejs.org/

설치 후 터미널에 npm -v 입력 후 버전이 나오면 정상설치 된 것이다.

$ npm -v

5.3.0

2. bower 설치

$ npm install -g bower 

npm을 통해 bower을 설치하자. -g 옵션은 전역으로 설치함을 의미한다.

3. bower 사용하기

projectFolder $ bower init

프로젝트 폴더로 이동해서 bower init 을 해준다.

그러면 bower.json파일이 생성되는데 나중에 bower.json파일만 있으면 귀찮은 반복 작업을 안 해줘도 된다. 굿

projectFolder $ bower install jquery -save

설치된 패키지는 bower_components폴더에 저장된다.

-save 옵션을 줄 경우, dependencies항목에 패키지가 추가된다.

"dependencies": {

    "jquery": "^3.3.1",

    "bootstrap": "^4.0.0",

    "react": "^16.1.0",

    "redux": "^3.7.2",

    "noto-sans-kr": "^0.1.1"

}

이처럼 각종 패키지를 설치해주면 끝이다.

4. bower-installer 설치 (선택)

bower를 통해 설치된 패키지들은 모두 bower_components에 저장된다.

우선 npm으로 bower-installer를 설치하자.

$ npm install -g bower-installer

설치했다면 bower.json에 아래 내용을 추가한다.

"install": {

    "path": {

      "css": "assets/css",

      "js": "assets/js"

    }

  }

projectFolder $ bower-installer

bower-installer 설치 후 프로젝트 폴더로 이동하여 bower-installer만 하면 해당 폴더로 각각 알아서 이동하게 된다.

* 이 때 bower_components는 삭제되지 않는다

5. 이후 다른 프로젝트에서의 사용

이후 다른 프로젝트 폴더에서 bower.json를 그대로 가져와서 사용이 가능하다.

다른 프로젝트 폴더에 bower.json를 붙여넣은 후, bower install

otherProjectFolder $ bower install

otherProjectFolder $ bower-installer

bower install과 bower-installer의 차이.

bower install의 경우 bower.json의 내용에 따라 bower_components에 패키지가 설치된다.

bower-installer의 경우 bower_components에 패키지가 설치되고 폴더에 맞게 이동한다.

6. bower 명령어

$ bower install package#version - 패키지 설치

$ bower uninstall package - 패키지 제거

$ bower search package - 패키지 검색

$ bower info package - 패키지 버전 정보

7. .bowerrc 파일 수정

유저에 최상위 디렉토리에 .bowerrc파일이 있다면 패키지 설치 시 가장 먼저 참조하게 된다.

나는 기본으로 설정돼있는 bower_components디렉토리의 이름을 변경하기 위해 사용한다.

디렉토리의 이름을 수정코자 하면 json형태의 아래 내용을 .bowerrc파일에 삽입한다.

{

   "directory": "assets"

}

그럼 모든 패키지는 bower_components대신 assets에 설치되게 된다.

이외 다른 옵션은 아래 링크를 참고하자.

https://bower.io/docs/config/

8. 마무리

프론트엔드 라이브러리들이 다양하고 복잡해지면서 프로젝트 진행 시 매번 설치해주는 번거로움이 있는데, bower를 통해 라이브러리들을 관리하고 매번 해줘야 하는 반복 작업을 줄여주는 장점이 있다.

자세한 설명은 아래 링크를 참고.

https://bower.io/