Laravel

Sử dụng Bower để quản lý các thư viện code trong laravel

Chào các bạn. Hôm nay chúng ta sẽ cùng tìm hiểu xem Bower là gì, công dụng của nó và cách dùng nó trong ứng dụng web. Cụ thể hơn, mình sẽ hướng dẫn ứng dụng nó vào trong Framework Laravel.

Nội dung trong bài này gồm:

  1. Bower là gì? Công dụng của nó?
  2. Cách cấu hình Bower với laravel.
  3. Cách sử dụng Bower để install các thư viện.

1. Bower là gì? Công dụng của nó?

Bower là một công cụ quản lý resource cho lập trình front-end được open source bởi Twitter.

Để hiểu hơn về công dụng của Bower, ta hãy thử xét các trường hợp sau nhé.

  • Trường hợp 1: Hãy tưởng tượng bạn đang làm 1 Project cùng team của bạn. 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, sếp ca 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?
  • Trường hợp 2: Sau khi update bằng tay trong trường hợp 1. Bạn sẽ phải push code lên github để các đồng đội trong team có thể lấy source code mới nhất về. Tuy nhiên, 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ó 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.

Bower giúp tìm kiếm, cài đặt, nâng cấp và cố định dependency cho một front-end project.

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:
    {
      "name": "framgia_event",
      "description": "",
      "main": "",
      "authors": [
        "trungquan17 <[email protected]>"
      ],
      "license": "MIT",
      "homepage": "https://github.com/trungquan17/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/trungquan17/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.

3. Cách sử dụng Bower để install các thư viện.

Kể từ bây giờ, muốn cài một thư viện bên thứ 3 nào, chúng ta chỉ cần mở Terminal và gõ câu lệnh sau:

bower install <tên package> --save

Ví dụ:

bower install bootstrap --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

Bạn cũng có thể install 1 thư viện thông qua đường dẫn bằng câu lệnh sau:

bower install <Đường dẫn> --save

Ví dụ:

bower install <https://github.com/twbs/bootstrap.git> --save

Để gỡ bỏ 1 package ta dùng câu lệnh sau:

bower uninstall <tên package> --save

Ví dụ:

bower uninstall bootstrap --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

4. Kết luận

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 !!!

Tham khảo

https://trungquandev.com/toi-da-su-dung-bower-de-quan-ly-cac-thu-vien-code-nhu-the-nao/

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration