GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 26/08/2015 | 00:00 GMT+7

Cách quản lý phụ thuộc JavaScript và CSS Front-End với Bower trên Ubuntu 14.04

Đã qua lâu rồi những ngày ta phải tự tìm kiếm, download , extract và tìm ra các folder cài đặt cho các khuôn khổ, thư viện và nội dung front-end của bạn .

Bower là một trình quản lý gói cho các module front-end thường bao gồm JavaScript và / hoặc CSS. Nó cho phép ta dễ dàng tìm kiếm, cài đặt, cập nhật hoặc loại bỏ các phụ thuộc front-end này.

Lợi thế của việc sử dụng Bower là bạn không phải kết hợp các phụ thuộc bên ngoài với dự án của bạn khi bạn phân phối nó. Bower sẽ quản lý mã của bên thứ ba khi bạn chạy bower install và đưa các phần phụ thuộc đó đến đúng vị trí. Nó cũng làm cho gói dự án cuối cùng nhỏ hơn để phân phối.

Biểu trưng Bower

Trong hướng dẫn này, bạn sẽ học cách cài đặt và sử dụng Bower trên server Ubuntu 14.04. Ta sẽ sử dụng Bower để cài đặt Bootstrap và AngularJS và minh họa chúng chạy một ứng dụng đơn giản trên web server Nginx.

Yêu cầu

Trước khi ta bắt đầu, có một số bước quan trọng mà bạn cần phải hoàn thành:

Ngoài ra, Bower cần Git , Node.js và npm .

  • Cài đặt Git trên server của bạn bằng lệnh sau:
  •   sudo apt-get install git

Nếu bạn muốn có hướng dẫn chuyên sâu hơn về cách cài đặt Git, bạn có thể xem Cách cài đặt Git trên Ubuntu 14.04 .

  • Cài đặt Node.js trên server của bạn bằng lệnh sau:
  •   sudo apt-get install nodejs

Nếu bạn muốn có hướng dẫn chuyên sâu hơn về cách cài đặt Node.js, bạn có thể xem Cách cài đặt Node.js trên server Ubuntu 14.04 .

  • Cài đặt npm trên server của bạn bằng lệnh sau:
  •   sudo apt-get install npm

Nếu bạn muốn có hướng dẫn chuyên sâu hơn về cách cài đặt npm, bạn có thể xem Cách sử dụng npm để quản lý các gói Node.js trên Server Linux .

  • Vì ta đã cài đặt Node.js từ trình quản lý gói, file binary của bạn có thể được gọi là nodejs thay vì node . Bởi vì npm dựa trên thực tế là file binary Node.js của bạn sẽ được gọi là nút , bạn chỉ cần softlink nó như sau:
  sudo ln -s /usr/bin/nodejs /usr/bin/node

Bạn có thể đọc thêm về vấn đề này trên Github và bạn có thể tìm hiểu thêm về softlink từ câu hỏi StackExchange này .

Khi bạn hoàn thành các bước này, bạn có thể tiếp tục với hướng dẫn này.

Bước 1 - Cài đặt Bower

Cài đặt Bower bằng npm:

  • sudo npm install bower -g

Lựa chọn -g được sử dụng để cài đặt Bower global trên hệ thống.

Bây giờ ta đã cài đặt Bower, ta sẽ tiếp tục với một ví dụ thực tế. Trong các bước tiếp theo, ta sẽ

  • Tạo một dự án Bower mới
  • Cài đặt Bootstrap bằng Bower
  • Cài đặt AngularJS với Bower
  • Phục vụ trang web qua Nginx

Ở cuối hướng dẫn này, trong phần Tham khảo Bower , bạn có thể đọc thêm về từng tùy chọn Bower.

Bước 2 - Chuẩn bị Thư mục Dự án

Ta sẽ tạo dự án Bower của bạn trong folder /usr/share/nginx/html để ta có thể dễ dàng truy cập ứng dụng của bạn dưới dạng trang web. Đây là folder root tài liệu mặc định của Nginx.

Vì vậy, ta cần thay đổi folder này bằng lệnh cd :

  • cd /usr/share/nginx/html

Theo mặc định, Nginx trên Ubuntu 14.04 có một khối server được bật theo mặc định. Nó được cấu hình để phục vụ các tài liệu ngoài folder /usr/share/nginx/html nói ở trên.

Trong ví dụ nhanh của ta , ta sẽ sử dụng trang web mặc định.

Tuy nhiên, đối với một ứng dụng production , bạn có thể nên cài đặt một khối server cho domain cụ thể của bạn .

Trước khi ta có thể thực hiện bất kỳ công việc nào trong folder /usr/share/nginx/html , ta phải cấp quyền cho user sudo của ta đối với nó.

Thay đổi quyền sở hữu của folder bằng lệnh sau:

  • sudo chown -R sammy:sammy /usr/share/nginx/html/

Thay vì sammy, bạn sẽ sử dụng user sudo của riêng mình mà bạn đã tạo trong hướng dẫn cài đặt server ban đầu Ubuntu 14.04 tiên quyết.

Bước 3 - Khởi tạo dự án Bower

Bây giờ, bên trong folder /usr/share/nginx/html , thực hiện lệnh sau để tạo một dự án Bower mới:

  • bower init

Bạn sẽ được hỏi một loạt câu hỏi. Đối với dự án ví dụ nhanh này, bạn chỉ cần nhấn ENTER để chọn tất cả các giá trị mặc định.

Xem bảng phân tích chi tiết các câu trả lời bên dưới, được đánh dấu màu đỏ :

Interactive
? May bower anonymously report usage statistics to improve the tool over time? Yes ? name: BowerTest ? version: 0.0.0 ? description: Testing Bower ? main file: index.html ? what types of modules does this package expose? Just press ENTER ? keywords: bower angular bootstrap ? authors: Nikola Brežnjak ? license: MIT ? homepage: http://bower.example.com ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No  {   name: 'BowerTest',   version: '0.0.0',   description: 'Testing Bower',   main: 'index.html',   keywords: [     'bower',     'angular',     'bootstrap'   ],   authors: [     'Nikola Brežnjak'   ],   license: 'MIT',   homepage: 'http://bower.example.com',   ignore: [     '**/.*',     'node_modules',     'bower_components',     'test',     'tests'   ] }  ? Looks good? Yes

Một số lưu ý về các tùy chọn này:

  • Chỉ để truy cập lại ghi chú từ trước, bạn không cần nhập bất kỳ tùy chọn nào khi chạy lệnh bower init cho dự án ví dụ này
  • Trong phần What types of modules does this package expose? câu hỏi, bạn có thể chọn hoặc bỏ chọn các tùy chọn bằng cách nhấn SPACEBAR cách. Nhấn ENTER xác nhận lựa chọn. Theo mặc định, không có cái nào được chọn và đối với ví dụ đơn giản này, ta không cần cái nào trong số chúng. Bạn có thể đọc thêm về chúng từ ấn bản GitHub chính thức
  • Đối với một dự án production , bạn muốn điền vào trường authors và các cài đặt khác để những người khác biết thêm về dự án
  • Cài đặt homepage chỉ được sử dụng để hiển thị trang web của bạn và không liên quan gì đến cài đặt của server thực nơi bạn đang chạy ứng dụng này

Đến đây bạn sẽ có một file bower.json trong folder làm việc của bạn ( /usr/share/nginx/html/ ) với nội dung JSON được hiển thị trong kết quả ở trên.

Bước 4 - Cài đặt AngularJS

AngularJS là một khung JavaScript cho các ứng dụng web. Để cài đặt AngularJS với Bower, hãy chạy lệnh sau:

  • bower install angularjs --save

Bạn có thể xem kết quả của lệnh dưới đây:

Output
                                                bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14 bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#* bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#* bower angularjs#*              resolve git://github.com/angular/bower-angular.git#* bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20% bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24% bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98% bower angularjs#*              extract archive.tar.gz bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3 bower angularjs#~1.4.3         install angularjs#1.4.3  angularjs#1.4.3 bower_components/angularjs

Nếu bạn nhận được kết quả hơi khác so với kết quả hiển thị ở trên, điều đó có thể là do Bower lưu trữ các gói để download nhanh hơn và gói của bạn đã được cài đặt từ bộ nhớ cache.

Bây giờ ta đã cài đặt AngularJS trong folder bower_components/angular (hoặc có thể là folder bower_components/angularjs ), với đường dẫn đến version thu nhỏ (mà ta sẽ sử dụng) là: bower_components/angular/angular.min.js .

Bước 5 - Cài đặt Bootstrap

Bootstrap là một khung công tác CSS. Để cài đặt Bootstrap với Bower, hãy chạy lệnh sau:

  • bower install bootstrap --save

Bạn có thể xem kết quả của lệnh dưới đây:

Output
bower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3 bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3 bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5 bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#* bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4 bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1 bower angularjs#~1.4.3         install angularjs#1.4.3 bower bootstrap#~3.3.5         install bootstrap#3.3.5 bower jquery#>= 1.9.1          install jquery#2.1.4  angularjs#1.4.3 js/angularjs  bootstrap#3.3.5 js/bootstrap └── jquery#2.1.4  jquery#2.1.4 js/jquery

Bây giờ ta đã cài đặt Bootstrap trong folder bower_components/bootstrap với đường dẫn đến version thu nhỏ (mà ta sẽ sử dụng) là: bower_components/bootstrap/dist/js/bootstrap.min.js cho file JavaScript và bower_components/bootstrap/dist/css/bootstrap.min.css cho file CSS.

Lưu ý cách cài đặt jQuery, vì nó là một phụ thuộc được yêu cầu bởi Bootstrap.

Bước 6 - Tạo ứng dụng Hello World

Bên trong chỉnh sửa folder /usr/share/nginx/html/ , hãy thay thế index.html mặc định bằng nội dung của riêng ta :

  • mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

Mở file để chỉnh sửa:

  • vim /usr/share/nginx/html/index.html

Bạn có thể nhập chính xác nội dung này:

/usr/share/nginx/html/index.html
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">      <title>Bootstrap 101 Template</title>      <!-- Bootstrap -->     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container" ng-app>         <form class="form-signin">             <h2 class="form-signin-heading">What you type here:</h2>              <input ng-model="data.input" type="text" class="form-control" autofocus>              <h2 class="form-signin-heading">It will also be shown below:</h2>             <input type="text" class="sr-only">{{data.input}}</label>         </form>     </div>      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <!-- Include all compiled plugins (below), or include individual files as needed -->     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>      <script src="bower_components/angular/angular.min.js"></script> </body> </html>

Tùy thuộc vào cách Bower cài đặt AngularJS trên hệ thống của bạn, đường dẫn đến tập lệnh có thể là bower_components/ angularjs /angular.min.js hơn là bower_components/angular/angular.min.js .

Bây giờ ta có một ứng dụng ví dụ loại Hello World đơn giản bằng cách sử dụng Boostrap với AngularJS, chạy trên Nginx.

(Về cơ bản đây là ví dụ Mẫu đăng nhập từ Bootstrap trong đó nội dung bên trong <body> có dạng đơn giản với hai trường nhập.)

Để xem ứng dụng mẫu này, bạn nên chuyển trong trình duyệt đến IP của Server; thông tin như http:// your_server_ip/ . Bạn sẽ thấy một cái gì đó giống như hình ảnh dưới đây:

Những gì bạn nhập ở đây: Nó cũng sẽ được hiển thị bên dưới:

Nếu bạn nhập nội dung nào đó vào trường hộp văn bản, nội dung giống hệt nhau sẽ xuất hiện bên dưới, sử dụng liên kết dữ liệu hai chiều AngularJS .

Nếu bạn không nhận được bất kỳ kết quả nào, hãy thử khởi động lại Nginx bằng lệnh sau:

  • sudo service nginx restart

Nếu bạn muốn tìm hiểu thêm về AngularJS, hãy truy cập tài liệu chính thức tại https://docs.angularjs.org/tutorial . Nếu bạn muốn tìm hiểu thêm về Bootstrap, hãy truy cập tài liệu chính thức tại http://getbootstrap.com/getting-started/ .

Nếu bạn muốn có thể truy cập web server của bạn thông qua một domain , thay vì địa chỉ IP công cộng của nó, hãy mua một domain rồi làm theo các hướng dẫn sau:

Tham khảo Bower

Bây giờ ta đã xem qua một ví dụ thực tế với Bower, hãy xem xét một số khả năng chung của nó.

Cài đặt các gói

Để cài đặt một gói (ví dụ: AngularJS hoặc Bootstrap), ta cần chạy lệnh sau:

  • bower install package

Thay vì package , hãy nhập tên chính xác của gói bạn muốn cài đặt. Gói có thể là viết tắt của GitHub, điểm cuối Git, URL và nhiều thứ khác.

Bạn cũng có thể cài đặt một version cụ thể của một gói nhất định.

Tìm hiểu thêm về tất cả các tùy chọn có sẵn để cài đặt qua tài liệu chính thức của Bower về cài đặt .

Tìm kiếm các gói

Bạn có thể tìm kiếm các gói thông qua công cụ trực tuyến này hoặc bằng cách sử dụng Bower CLI. Để tìm kiếm các gói bằng Bower CLI, hãy sử dụng lệnh sau:

  • bower search package

Ví dụ: nếu ta muốn cài đặt AngularJS, nhưng ta không chắc về tên gói chính xác hoặc ta muốn xem tất cả các gói có sẵn cho AngularJS, ta có thể thực hiện lệnh sau:

  • bower search angularjs

Ta sẽ nhận được một kết quả tương tự như sau:

Output
Search results:     angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git     AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git     angularjs git://github.com/angular/bower-angular.git     angular-facebook git://github.com/Ciul/Angularjs-Facebook.git     angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git     angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource     angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

Để cài đặt AngularJS, bạn chỉ cần thực hiện lệnh sau:

  • bower install angularjs

Tiết kiệm gói

Khi bắt đầu một dự án với Bower, tiêu chuẩn là bắt đầu bằng việc chạy lệnh init :

  • bower init

Điều này sẽ hướng dẫn bạn cách tạo file bower.json , file mà Bower sử dụng để cấu hình dự án. Quá trình có thể giống như sau:

Output
? name: howto-bower ? version: 0.0.0 ? description: ? main file: ? what types of modules does this package expose? ? keywords: ? authors: Nikola Breznjak <nikola.breznjak@gmail.com> ? license: MIT ? homepage: https://github.com/Hitman666/jsRockstar ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No  {   name: 'howto-bower',   version: '0.0.0',   homepage: 'https://github.com/Hitman666/jsRockstar',   authors: [     'Nikola Breznjak <nikola.breznjak@gmail.com>'   ],   license: 'MIT',   ignore: [     '**/.*',     'node_modules',     'bower_components',     'test',     'tests'   ] }  ? Looks good? Yes

Bây giờ, nếu bạn cài đặt bất kỳ gói nào bằng cách sử dụng lựa chọn --save , chúng sẽ được lưu vào file bower.json , trong đối tượng phụ thuộc . Ví dụ: nếu ta cài đặt AngularJS bằng lệnh sau:

  • bower install angularjs --save

Sau đó, file bower.json của ta sẽ trông giống như sau (lưu ý đối tượng phụ thuộc ):

bower.json
{   "name": "howto-bower",   "version": "0.0.0",   "homepage": "https://github.com/Hitman666/jsRockstar",   "authors": [     "Nikola Breznjak <nikola.breznjak@gmail.com>"   ],   "license": "MIT",   "ignore": [     "**/.*",     "node_modules",     "bower_components",     "test",     "tests"   ],   "dependencies": {     "angularjs": "~1.4.3"   } }

Gỡ gói cài đặt

Để gỡ gói cài đặt Bower, chỉ cần chạy lệnh sau:

  • bower uninstall package

Thao tác này sẽ gỡ cài đặt một gói khỏi folder bower_component của bạn (hoặc bất kỳ folder nào khác mà bạn đã xác định trong file .bowerrc (thêm về cấu hình trong phần tiếp theo).

Cấu hình Bower với .bowerrc

Để cấu hình Bower, bạn phải tạo một file có tên .bowerrc . (Lưu ý dấu chấm - nghĩa là đó là một file ẩn trong môi trường Linux.)

Tạo file .bowerrc trong folder root của dự án của bạn (cùng với file bower.json ). Bạn có thể có một file .bowerrc cho mỗi dự án, với các cài đặt khác nhau.

Bower cho phép bạn cấu hình nhiều tùy chọn bằng cách sử dụng file này, mà bạn có thể đọc thêm về các tùy chọn cấu hình từ tài liệu chính thức.

Một tùy chọn hữu ích là tùy chọn directory , cho phép bạn tùy chỉnh folder mà Bower lưu tất cả các gói của nó.

Để đặt tùy chọn đơn giản này, hãy tạo một file .bowerrc dạng như sau:

.bowerrc
{   "directory": "js/"   }

Kết luận

Sau khi hoàn thành hướng dẫn này, bạn nên biết cách sử dụng Bower để cài đặt các phụ thuộc cho một ứng dụng AngularJS đơn giản.

Bạn cũng nên có ý tưởng về cách sử dụng Bower cho các ứng dụng tùy chỉnh của bạn .

Tags:

Các tin liên quan