Quản lí thư viện javascript với Yarn trong rails

Để có một giao diện gần gũi với người dùng chúng ta sẽ cần phải sử dụng thư viện javascript để có một giao diện người dùng tốt hơn trên ứng dụng web. Tuy nhiên trong rails thêm một thư viện Javascript nó không dễ dàng như chúng ta thêm một gem.

Bạn phải download một thư viện Javascript và phải tự thêm nó vào trong vendor. Tuy nhiên bạn phải tự config các đường dẫn cho nó hoặc có thể bạn có thể dùng gem phù hợp mục đích của bạn tuy nhiên điều gì sẽ xảy ra khi gem bạn đang sử dụng không được cập nhật trong một thời gian dài. Bạn sẽ phải tìm một cái gem khác để thay thế nó ? Và rồi bạn phải config nó lại từ đầu ?

Hãy xem hệ thống quản lý thư viện của Javascript npm, bower và gần đây nhất là yarn. Tại sao chúng ta lại không sử dụng chúng ? Yarn là một trong nhưng hệ thống quản lý thư viện Javascript và một sự thay thế cho NPM. Nó hoạt động gần giống như NPM nhưng có một điểm hơn NPM là nó tạo ra một file yarn.lock để giúp bạn có thể kiểm tra và kiểm soát thư viện mình đang sử dụng

Để sử dụng Yarn trước hết bạn cần phải cài đặt Yarn. Trên macOs bạn có thể sử dụng homebrew để cài đặt nó bạn có thể chạy lệnh

install yarn

Trên Ubuntu bạn cần cấu hình repository

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Sau đó bạn chạy

sudo apt-get update && sudo apt-get install yarn

Khởi tạo Rails project

Trước tiên tạo một Rails app chúng ta cần chạy

rails new yarn-with-rails
cd yarn-with-rails

Tiếp theo đó chúng ta sẽ khởi tạo yarn

yarn init

Sau khi chạy câu lệnh trên sẽ tạo ra file package.json

Tiếp theo chúng ta hãy cài bootstrap cho App của bạn

yarn add bootstrap

Câu lệnh trên sẽ cài bootstrap vào node_modules/, và nó cũng tạo ra yarn.lock với các thông tin về package versions, Hãy nhớ thêm node_modules/ vào file .gitignore

Tiếp theo đó chúng ta sẽ yêu cầu Rails tìm kiếm assets trong node_modules bằng cách add dòng lệnh vào config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

Cho application.css và application.js tải các assets của bootstrap bằng các thêm các dòng sau

# In app/assets/stylesheets/application.css:
*= require bootstrap/dist/css/bootstrap

# In app/assets/javascripts/application.js:
//= require bootstrap/dist/js/bootstrap

Đó là tất cả để bạn sử dụng Yarn trong rails.Bạn có thể khởi động lại Rails server và bạn sẽ có các thư viện bootstrap đã được cài đặt. Điều này sẽ không còn cần thiết khi dùng Rails 5.1 nhưng bạn có thể dùng nó cho các phiên bản cũ hơn

Conclusion

Vì vậy bây giờ với Yarn chúng ta có thể dễ dàng truy xuất các thư viện Javascript và quản lý chúng. Chúng là công cụ giúp ta tiếp kiệm thời gian nhất