Tôi đã Sử Dụng Bower để Quản Lý Các Thư Viện Code Như Thế Nào?

Xin chào các bạn, lười quá, mấy tuần rồi, giờ mới ngồi gõ lạch cạch viết bài, hôm nay chúng ta sẽ tìm hiểu xem Bower là cái gì và tại sao nên dùng nó trong ứng dụng web nhé. Cụ thể hơn thì mình sẽ hướng dẫn ứng dụng nó vào trong Framework Laravel.

Những nội dung có trong bài này:

1. Bower là gì?, tại sao nên dùng nó?

2. Cấu hình Bower với Laravel.

3. Tự tạo một gói Bower cho riêng mình.

1 – Bower là gì? Tại sao nên dùng nó?

Theo định nghĩa chuyên ngành thì Bower nó là công cụ quản lý các nguồn tài nguyên cho việc lập trình front-end. Được phát triển và Open Source bởi Twitter.

Nghe cứ thấy cảm giác mơ hồ nhỉ? Thử xem các trường hợp sau nhé:

• Kịch bản thứ nhất: hãy tưởng tượng Project của bạn có khoảng mấy chục cái thư viện CSS, JS như Jquery, Bootstraps, FontAwesome….vv. Một ngày đẹp trời nào đó, sếp đẹp trai (xinh gái) của bạn yêu cầu cập nhật tất cả các thư viện đó lên phiên bản mới nhất thì sao? Lúc này không lẽ ta lại lên từng trang một dowload từng thư viện một sau đó về bỏ lại vào project, sửa tên file…bla..bla… sao?

“Thằng ở trên chém gió đấy, dùng Bower làm gì cho mất công, cứ luyện tập tính kiên nhẫn update từng thư viện một đi cho quen tay, nâng trình độ di chuột + gõ bàn phím lên master luôn.”

• Tới kịch bản thứ hai là sau khi đã update xong bằng tay kịch bản 1. Việc tiếp theo bạn cần triển khai push code lên github để cho các “bạn cùng team” có thể lấy bộ source code mới nhất về. Oke cứ đẩy lên như bình thường thôi, tính ra mỗi thư viện có khoảng ít thì hơn chục, mà nhiều thì vài chục file code, chưa kể có thư viện lại import khoảng mấy trăm file fonts, icons, images…Tính sơ sơ thì cũng cả nghìn file rồi.

– Đã có lần mình ngây thơ hồn nhiên push một project với hơn 5k files changed lên github để cho anh trainer đẹp trai của mình kiểm tra và merge code vào nhánh chính. Cảm giác lúc đó …

“Cho đến hiện tại thì mình vẫn đang giữ kỷ lục 5k files này (─‿‿─) “

– Có những nơi làm việc không để ý vấn đề này lắm nhưng nếu ở một môi trường yêu cầu Clean Code, No Convensions … thì đảm bảo làm cách trên kia bạn sẽ “ăn hành” no =)). Và Bower sinh ra để giải quyết vấn đề này.

2 – Cấu hình Bower với Laravel.

-Trong phần này, mình sẽ hướng dẫn từng bước cách setup và triển khai Bower với Framework Laravel.

• Đầu tiên để cài Bower thì cần có phải có npm, trên window thì bạn vào trang nodejs.org tải về rồi cài đặt là có npm. Còn trên Linux thì mở terminal chạy lần lượt mấy lệnh cài đặt dưới đây:

sudo apt update sudo apt install nodejs npm sudo ln -s "$(which nodejs)" /usr/bin/node

• Rồi cài Bower bằng lệnh:

npm install -g bower -Thuộc tính -g viết tắt của global, có nghĩa là Bower sau khi cài sẽ có thể dùng cho bất kỳ project nào trong máy của bạn. -Vậy là đã cài xong Bower rồi đấy, bây giờ triển khai nó vào Project Laravel:

• Mở terminal trong thư mục Project Laravel của bạn, chạy lệnh:

bower init

• Nó hiện ra các tùy chọn cấu hình, cứ Enter với Yes cho nhanh, mục đích là để khởi tạo file bower.json. File này rất quan trọng bởi vì nó là file định nghĩa các gói thư viện mà bạn đã cài, chúng nằm trong thuộc tính dependencies. Ví dụ một file bower.json của mình:

{ "name": "framgia_event", "description": "", "main": "", "authors": [ "trungquandev <quanlightning17@gmail.com>" ], "license": "MIT", "homepage": "https://github.com/trungquandev/framgia_event", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "bootstrap": "https://github.com/twbs/bootstrap.git#^3.3.7", "jquery-flexdatalist": "https://github.com/sergiodlopes/jquery-flexdatalist.git#^2.2.2", "font-awesome": "https://github.com/FortAwesome/Font-Awesome.git#^4.7.0", "font-icons-trungquan17": "https://github.com/trungquandev/font-icons.git", "AlertifyJS": "https://github.com/MohammadYounes/AlertifyJS.git#^1.11.0", "eonasdan-bootstrap-datetimepicker": "^4.17.47", "photoset-grid": "^1.0.1", "pusher-js": "pusher#^4.2.1" } }

-Tiếp theo tạo một file có tên là .bowerrc để config đường dẫn nơi mà ta lưu các thư viện code lấy từ bower về, file này nằm ngang hàng với bower.json, nội dung của .bowerrc như sau:

{ "directory": "public/bower_components/" }

-Một bước nữa, vào file .gitignore thêm dòng này vào:

/public/bower_components

-Mục đích là để không đẩy những file thư viện code trong /public/bower_components lên git mỗi lần mình commit với push.

• Kể từ bây giờ, muốn cài một thư viện bên thứ 3 nào, chúng ta sẽ dùng câu lệnh sau:

bower install <tên package> --save

• Khi đó gói thư viện sẽ được cài và đồng thời –save sẽ lưu thông tin tương ứng của gói thư viện đó vào file bower.json

• Tương tự nếu muốn gỡ bỏ một package nào đó:

bower uninstall <tên package> --save

• Và sau này nếu muốn update version của các thư viện lên phiên bản mới nhất thì chỉ cần:

bower update

-Ví dụ cụ thể bây giờ mình muốn cài gói thư viện Font-Awesome vào project thông qua bower như sau:

• Bước 1: truy cập vào https://bower.io/search/ và search Font-Awesome, nó sẽ hiện ra kết quả, click vào thì sẽ redirect mình đến trang github của thư viện Font Awesome.
• Bước 2: Copy link Clone của repo này:

• Bước 3: Quay lại Terminal và gõ:

bower install --save https://github.com/FortAwesome/Font-Awesome.git

-Khi này trong file bower.json đã lưu thông tin của thằng Font Awesome và đồng thời mã nguồn thư viện được lưu tại /public/bower_components/font-awesome/

-Đơn giản phải không nào? Tiếp tục nhé, thế nếu như bây giờ mình lên bower.io search một thư viện mà không ra thì sao? Tức là thư viện đó chưa được Bower hỗ trợ. Lúc này mình phải tự đẩy thư viện đó lên một repo github của riêng mình và đăng ký nó với Bower.

Nếu các bạn để ý thì ở file bower.json ở trên của mình có 1 dòng trong dependencies:

"font-icons-trungquan17": "https://github.com/trungquandev/font-icons.git",

Đó là một Repo với hơn 2000 file fonts mà mình cần dùng cho project. Cụ thể các bước thực hiện sẽ ở phần tiếp theo dưới đây.

3 – Tự tạo một gói Bower cho riêng mình.

Như đã nói ở bước trên, không phải lúc nào những thư viện mà chúng ta cần cũng được Bower hỗ trợ, lúc này chính chúng ta là người đăng ký thư viện đó với Bower để sử dụng. -Đầu tiên, phải chắc chắn rằng thư viện của bạn luôn luôn sẵn sàng trực tuyến trên github.

• Vào trang github của bạn, sang tab Repositories và nhấn New:

• Nhập tên repo của bạn rồi nhấn create:

• Nó sẽ hỏi bạn tạo một file README.md, cứ tạo đi, viết gì cũng được, sau khi tạo xong thì repo của bạn trông giống như hình phía dưới, đồng thời các bạn để ý 3 mũi tên cho mình, Create new file, Upload files, và Copy link Clone with HTTPS.

• Create New File: bước này đặc biệt quan trọng, chúng ta sẽ phải tạo một file mới có tên là bower.json thì Bower mới cho phép đăng ký. Nội dung file bower.json như dưới đây, bạn copy về và sửa lại một số thông tin của bạn là được. Lưu ý trong “homepage” phải sửa lại đường dẫn chính là cái Link Repo Clone with HTTPS của chính bạn như ở hình trên nhé. Sau đó nhấn Commit.

{ "name": "demo-bower", "version": "1.0.1", "authors": [ "Trung Quan <quanlightning17@gmail.com>" ], "description": "Framgia standard demo Bower", "main": "/", "keywords": [ "fonticons" ], "license": "MIT", "homepage": "https://github.com/trungquandev/demo-bower.git", "ignore": [ "README.md" ] }

• Upload files: bước này chính là bước để các bạn Upload các thư viện mà bower chưa hỗ trợ lên, mình chỉ demo nên upload luôn ở đây cho nhanh, còn nếu bạn cần upload nhiều file hay thư viện thì cứ Clone repo về máy rồi chỉnh sửa, commit lên như bình thường nhé.

– Giả sử mình upload một thư viện tên là trungquandev.js lên:

• Copy Link Clone with HTTPS: sau khi copy link github của thư viện, bạn quay lại Terminal gõ lệnh sau:

bower register demo-bower https://github.com/trungquandev/demo-bower.git

– Trong đó demo-bower là tên package mình đặt có thể đặt tên là gì cũng được, và phía sau là link github của mình, bower sẽ hỏi bạn có đồng ý đăng ký không, nhấn yes, sau khi thành công thì sẽ trông như thế này.

– Tiếp theo chúng ta thử cài gói này vào project xem nó thế nào nhé:

bower install --save demo-bower

hoặc:

bower install --save https://github.com/trungquandev/demo-bower.git

– Thế là xong rồi đấy, đơn giản phải không nào, bây giờ trong thư mục public/bower_components/ của mình đã có folder demo-bower đồng thời file bower.json trong project cũng đã update thêm một dòng trong dependencies: "demo-bower": "https://github.com/trungquandev/demo-bower.git" – Còn nếu bạn muốn hủy đăng ký gói thư viện này thì gõ lệnh bower login sau đó nhập username với password tài khoản github, cuối cùng gõ: bower unregister https://github.com/trungquandev/demo-bower.git

– Như vậy mình đã giới thiệu và hướng dẫn xong về Bower cũng như ứng dụng cụ thể vào Laravel, nếu có chỗ nào chưa hiểu hoặc thấy bài viết có sai sót, hãy để lại comment dưới bài viết, mình sẽ trả lời sớm nhất có thể.

Cảm ơn các bạn đã xem bài viết của mình !!!

Best Regards – Trung Quân – Green Cat

Khóa học lập trình làm việc thực tế:

Trên YouTube mình dạy hết từ Front-end cho đến Back-end, FREE công khai nha. Đã có rất nhiều bạn học bộ MERN Stack Pro này của mình và để lại feedback chất lượng dưới nhiều video rồi. Các bạn hãy tham khảo trang Landing Page mình giới thiệu toàn bộ MERN Stack (ReactJS, NodeJS, MongoDB, ExpressJS...vv) ở đây nhé. KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG BowerLaraveltrungquandev