Làm thế nào để viết code JS ES6 trong Rails?

Bài đăng này đã không được cập nhật trong 5 năm

JS ES6, cái tên chắc chắn không còn quá xa lạ mình không cần giới thiệu nhiều bởi chắc chắn khi bạn đã tìm đến đây thì bạn hẳn đã có ý định muốn tận dụng sức mạnh của ES6 vào dự án Rails của mình.

Trước Rails 5.1 thì hầu như bạn phải tự làm bằng tay để có thể cấu hình được babel vào Rails để compile code ES6 về ES5. Rails 5.1 ra đời với một công cụ hết sức hữu ích đó là Webpacker. Nói nôm na Webpacker là một Ruby gem dùng để tích hợp Webpack vào dự án Rails sử dụng chung với Asset Pipeline.

OK, bây giờ làm thế nào để viết JS "hiện đại" trong Rails đây? Bắt đầu nào.

Yêu cầu hệ thống:

Ruby 2.2+

Rails 4.2+

Node.js 6.0.0+

Yarn 0.25.2+

Cài đặt

Từ Rails 5.1+ đã có thể thêm webpacker vào Rails như 1 option khi khởi tạo project.

rails new a_rails_app --webpack

Hoặc cách truyền thống là add vào Gemfile

gem 'webpacker', '~> 3.5'

Sau đó chạy bundle để cài đặt webpack

bundle install
bundle exec rails webpacker:install

# Or if Rails version is under 5.0
# bundle exec rake webpacker:install

Trong quá trình cài đặt nếu bạn gặp warnings "unmet peer dependency", chỉ cần chạy lệnh dưới:

yarn upgrade

Lưu ý với Rails 5.2+

Phiên bản Rails 5.2 trở lên cần enable unsafe-eval ở môi trường development

# file: config/initializers/content_security_policy.rb

if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end

Sử dụng

Cấu trúc code của webpacker như bên dưới:

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

Webpacker cung cấp một số helpers để chèn JS/CSS vào trang views

<!-- Helper generate script, link tag -->
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

Nếu muốn link một static asset cho thẻ <link rel="prefetch"> hoặc <img> bạn có thể dùng helper asset_pack_path:

<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" />
<img src="<%= asset_pack_path 'images/logo.svg' %>" />

Note: Để file style và các file tĩnh dùng được trong view, bạn cần phải link chúng từ thư mục pack.

Hãy thử thêm tí code trong app/javascript/packs/application.js xem chúng đã hoạt động chưa nào:

setTimeout(() => alert('Hi there!'), 1000);

Sau đó tải lại trang (đảm bảo là bạn đã nhúng file application.js vào view rồi nhé). Ispect code JS ra bạn sẽ thấy arrow function đã được dịch thành khai báo hàm như ES5.