Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Mẹo nhỏ: Làm gì khi bắt gặp một tập tin Bower

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Bạn có bao giờ nhân bản hoặc tải xuống một repo GitHub, và tìm thấy một số tập tin lạ và không liên quan gì nhưng bạn không nhận ra nó?

Ví dụ, bạn đang làm việc trên một trang web và cần một thư viện JavaScript hoặc CSS, thêm một số tính năng vào dự án của bạn. Bạn tìm thấy thư viện hoàn hảo trong một kho lưu trữ GitHub, do đó, bạn tải nó về ngay lập tức. Khi bạn giải nén gói, bạn khám phá ra một số tập tin lạ, một trong số đó là bower.json.

Hơn nữa, bạn có thể cũng đã tìm thấy hướng dẫn trong kho chứa thường nói điều gì đó cùng với dòng:

Install with Bower: bower install bootstrap.

Bạn cũng có thể tự hỏi tập tin này được sử dụng cho việc gì, chưa kể tại sao bạn nên cài đặt nó với Bower. Gần đây tôi thường xuyên được hỏi những câu hỏi này bởi người bạn thiết kế web của tôi và tôi e là có rất nhiều người cảm thấy bối rối như vậy. Nếu bạn là một trong những người đó, thì mẹo nhỏ này sẽ giúp bạn!

Tập tin Bower

Bower là một trình quản lý gói cho web. Nó giúp bạn quản lý các phụ thuộc; tập tin (có thể bên thứ ba, thường công khai có sẵn thông qua GitHub) mà bạn cần cho dự án của bạn.

bower.json, tập tin mà chúng ta đang nói đến ở đây, đóng một vai trò trung tâm trong một môi trường Bower. Trước đây, nó được đặt tên là component.json, nhưng sau đó đổi tên thành bower.json để tránh xung đột có thể xảy ra với các công cụ khác mà sử dụng một tên tập tin tương tự.

bower.json giúp Bower hiểu dự án; nó ghi lại meta-data chẳng hạn như tên của dự án, phiên bản, tác giả, giấy phép, các phụ thuộc và vân vân. Các thông tin được cấu trúc dạng JSON thường trông giống như sau:

Từ tập tin JSON này chúng ta có thể suy ra rằng dự án này được đặt tên là "awesome", phiên bản hiện tại "1.0.0", tác giả là "John Doe", một cặp chi tiết khác, và yêu cầu một vài phụ thuộc phải có để làm việc.

Nếu bạn tìm thấy bower.json trong một thư viện, nó gợi ý hai thứ:

  • Trước tiên, tác giả của dự án xác định thư viện như là một gói Bower. Dự án có thể đã được xuất bản trên Bower Registry, một bộ sưu tập tập trung của các gói, để nó có thể được thêm vào dự án của bạn thông qua các dòng lệnh Bower.
  • Tác giả của dự án có thể đã sử dụng Bower để quản lý các thư viện dự án, giúp dễ dàng hơn cho các nhà phát triển có thể sử dụng hoặc mở rộng dự án sau này.

Bower sử dụng tập tin này theo một số cách. Nó sử dụng các chi tiết meta để hiển thị thông tin gói khi chúng ta tìm kiếm trong Bower Registry.

Bạn sẽ thấy một số dự án quen thuộc trong Bower registry

Bower cũng sẽ phân tích tập tin khi chúng ta thực hiện một số lệnh như bower versionbower install.

Bower Install

bower install là lệnh để cài đặt một gói được đăng ký trong Bower Registry. Lệnh này cũng sẽ cài đặt các gói được liệt kê trong bower.json trong phần "dependencies". Theo mặc định, những gói này sẽ được thêm vào trong một thư mục có tên bower_components.

Một ví dụ, chúng ta hãy cài đặt Animate.cssBootstrap bằng Bower.

Để bắt đầu, bạn thật sự cần phải cài đặt Bower. Hãy xem qua Bower: Một trình quản lý gói cho Web để biết rõ hơn về điều này. Sau đó bạn có thể gõ lệnh sau trong Terminal hoặc Command Prompt (nếu bạn đang sử dụng Windows), nó cài đặt các gói cùng một lúc:

Bây giờ, bạn sẽ thấy chúng được thêm vào trong bower_components.

Animate.css và Bootstrap được thêm vào trong bower_components

Như bạn thấy ở trên, chúng ta có một thư mục phụ, jquery. Điều này là bởi vì Bootstrap thiết lập nó như một phụ thuộc; các thành phần JavaScript của Bootstrap cần jQuery để hoạt động. Nếu bạn nhìn vào tập tin bower.json được thêm vào trong gói, bạn sẽ thấy nó liệt kê ở phần cuối của tập tin, như sau.

jQuery được thiết lập như là phụ thuộc trong bower.json của Bootstrap

Tiếp theo là gì?

Giả sử rằng bạn vừa mới tải về một thư viện với một tập tin bower.json đi kèm, trước tiên tôi đề nghị bạn kiểm tra các phụ thuộc trong tập tin.

Ví dụ, tôi đã tải về một thư viện JavaScript được gọi là Revealer.js. Revealer.js có vẻ như yêu cầu Reveal.js để hoạt động. Chúng ta có thể thấy nó được liệt kê như là một phụ thuộc trong tập tin bower.json, như hình dưới đây:

Chỉ cần xác nhận điều này, nếu chúng ta mở index.html từ thư mục views, chúng ta sẽ thấy tập tin reveal.js được liên kết bên trong một thẻ script, như sau.

Bây giờ, chúng ta cần chuyển đến thư mục của thư viện ở trong Terminal hoặc Command Prompt, sau đó gõ:

Như đã đề cập trước đó, lệnh này sẽ tải về tất cả các gói được đăng ký ở trong bower.json cùng một lúc.

Lưu ý: Trong trường hợp này, gói được thêm vào trong thư mục public/components, như chỉ định trong tập tin .bowerrc. Một tập tin .bowerrc đôi khi đi kèm với tập tin bower.json và được sử dụng để chỉ định các thư mục cài đặt tuỳ chỉnh.

Cập nhật gói

Gói mà chúng ta đã cài đặt có thể được cập nhật theo thời gian, hoặc để khắc phục các lỗi hoặc thêm tính năng mới. Với Bower, việc cập nhật các thư viện này là một việc cực kỳ nhẹ nhàng. Trước hết, hãy gõ:

Điều này sẽ liệt kê các gói hiện đã cài đặt trong dự án của chúng ta, và cho chúng ta thấy phiên bản mới nhất hiện có. Trong trường hợp của chúng ta, có vẻ như Reveal.js có một phiên bản mới hơn. Vì vậy, hãy tiến hành cập nhật nó.

Có một phiên bản mới nhất của Reveal.js

Gõ lệnh này để cập nhật Reveal.js.

Điều này cũng sẽ thay đổi phiên bản được ghi trong bower.json của dự án.

Kết luận

Bower là một công cụ thực sự thuận tiện cho việc quản lý các thư viện của dự án. Nó gần giống như một AppStore hoặc Google Play của các bạn vậy; chúng ta có thể cài đặt, cập nhật và xoá các thư viện một cách dễ dàng. Tôi hy vọng mẹo nhỏ này sẽ giúp bạn tránh bất kỳ sự nhầm lẫn nào khi tải về các thư viện bên thứ ba, và cho bạn thấy những lợi ích của việc sử dụng Bower trong tiến trình công việc của bạn.

Đọc thêm

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.