[Javascript] bower - 프론트엔드 패키지 관리 도구

bower - 프론트엔드 패키지 관리 도구

bower는 트위터에서 만든 프론트엔드 패키지 관리 도구이다.

웹 개발을 하다보면 프론트엔드에서 꼭 추가해줘야하는 모듈이 있는데, jQuery와 Bootstrap이다.

나는 그동안 사이트에 들어가서 CDN이나 모듈을 직접 다운로드받아서 프로젝트에 추가해줬었다. (이러면 안된다)

하지만, bower를 사용하면 일이 훨씬 간단해진다.

 

bower를 사용하는 방법은 다음과 같다.

1. npm을 통해 bower를 설치한다. (> npm install bower)
2. 프로젝트에서 프론트엔드 모듈을 관리해줄 디렉터리로 이동한다.
   ( 나는 Maven 프로젝트니까 src/main/webapp/resources/ )
3. bower.json 파일을 작성하거나 | 단일로 바로 설치하고 싶으면 > bower install [모듈명] 치면된다.
4. bower.json 파일에 설치하고 싶은 모듈들을 기입했다면, > bower install 명령 치면 한 번에 설치된다.

 

bower는 모듈을 bower_components/ 디렉터리 안에 설치한다.

그러니까 나 같은 경우 src/main/webapp/resources/ 에서 > bower install jquery 명령을 쳤다면,

src/main/webapp/resources/bower_components/jquery/ 에 설치되는 식