Home » Frontend Developer » Bower là gì?

Bower là gì?

Theo cách lập trình Front-end truyền thống, khi cần sử dụng thư viện Javascript hay CSS thường các lập trình viên sẽ lên mạng tìm kiếm rồi download về sau đó đặt vào thư mục nào đó trong dự án của mình. Công việc này quá nhàm chán mà, mất thời gian, khi muốn thay đổi version chúng ta lại lặp lại các bước tương tự…

Với Bower, thư viện quản lý package cho web (A package manager for the web) việc tích hợp các thư viện cần thiết trở lên đơn giản, dễ dàng quản lý và tiết kiệm thời gian. (Bower được phát triển bởi Twitter)

bower

Cài đặt Bower

Trước khi cài đặt bower chúng ta cần cài đặt Node JS theo hướng dẫn: https://nodejs.org
Vì Bower sẽ cài đặt nhiều packages thông qua Git nên máy bạn cũng cần cài đặt Git
Tiến hành cài đặt Bower theo cú pháp:

OK, sau khi đã cài bower trên máy của bạn, bạn di chuyển đến thư mục dự án của mình sau đó có thể cài đặt các packages cần thiết. Ví dụ mình muốn sử dụng jQuery cho dự án, mình chỉ cần chạy dòng lệnh:

Chạy xong kiểm tra thư mục dự án sẽ thấy có thêm một thư mục mới bower_components, trong thư mục này có chứa các packages vừa cài đặt.
Bạn cũng có thể cài đặt các package theo version bằng cách sử dụng dụng dấu # và số hiệu version ngay sau tên package:

Bạn muốn kiểm tra xem các package đã cài bằng dòng lệnh

Gỡ bỏ package đã cài:

Nâng cấp phiên bản của các package, chúng ta ko cần thực hiện bằng tay mà chỉ cần chạy câu lệnh:

Sử dụng các package đã cài đơn giản chúng ta chỉ việc nhúng vào file HTML

Quản lý các packages với bower.json

Phía trên mình đã hướng dẫn các bạn cách cài đặt từng package riêng lẻ, trong thực tế một dự án chúng ta thường dùng nhiều packages, nếu cứ cài đặt từng package một như thế cũng không phải là giải pháp hay. Bower cho phép chúng ta khai báo các gói cần sử dụng trong bower.json.

Để tạo ra file bower.json chúng ta sử dụng dòng lệnh:

Tiến hành thực hiện các bước cài đặt theo hướng dẫn, kết quả sẽ tạo ra file bower.json với nội dung:

Bạn có thể thấy trọng muc dependencies có chưa package jquery mình đã cài ở trên.
Có 2 cách để thêm package mới, một là chạy dòng lệnh cài đặt package thêm tham số –save để update lại vào file bower.json khi cài đặt

Lúc này xem lại file bower.json

Ở mục dependencies có thêm: “bootstrap”: “~3.3.6”
Cách 2 để thêm một package mới là ta định nghĩa tên package và số hiệu version theo cú pháp: “{package}”: “-{version}”
Sau đó chạy dòng lệnh

Trước khi chạy dòng lệnh này bạn có thể xoá thư mực bower_components để kiểm chứng.

Kết luận 

Với Bower việc quản lý các packages trở lên dễ dàng hơn bao giờ hết, cảm giác lập trình Front-end ngày càng thú vị với cá nhân mình. Đã chuẩn bị đủ để bắt đầu loạt bài về React JS.

 

 

 

 

 

 

 

Tagged width: