Hiểu biết về Webpacker trong Rails 6

Bắt đầu với Rails 6, Webpacker là một compiler mặc định trong javascript. Nghĩa là tất cả code JavaScript sẽ được xử lý bởi Webpacker thay vì Asset Pipeline như trong rails 5. Về asset pipeline mình xin phép được trình bày trong một bài viết khác . Trong phạm vi bài viết này, chúng ta sẽ cùng nhau tìm hiểu về cách Webpacker xử lý code JavaScript như thế nào.

Nói cho đơn giản thì nó là một ruby gem được sử dụng để quản lý và đóng gói các đoạn code javascript.

Khi bạn tạo một ứng dụng Rails 6 mới, bạn sẽ thấy đầu ra sau trong bảng điều khiển. Bạn cũng sẽ tìm thấy webpackerđá quý Gemfiletheo mặc định. Các rails newlệnh cũng sẽ cài đặt tấn gói NPM qua yarn.

Các ứng dụng cũ được nâng cấp lên Rails 6, không được webpackercài đặt gem theo mặc định. Bạn cần tự đưa nó vào Gemfile rồi chạy rails webpacker:install. Chúng tôi sẽ đề cập đến cách sử dụng Webpacker trong ứng dụng Rails hiện có trong một bài đăng trên blog sau. Điểm đến mới cho mã JavaScript Trước Rails 6, tất cả các mã JavaScript được cho là nằm trong app/assets/javascripts. Nhưng trong ứng dụng Rails 6, app/assets/javascriptsthư mục thậm chí không tồn tại. Thay vào đó, chúng tôi có app/javascriptthư mục để lưu trữ tất cả các mã JavaScript. Tên này sao cho nó chứa phần JavaScript của ứng dụng có thể là tất cả mã cho phần frontend của ứng dụng của bạn.

Chúng ta hãy đi qua nội dung của thư mục này trong một ứng dụng Rails 6 trống.

Nó chứa hai thư mục, channelsvà packs. Thư mục channelsđược tạo bởi thành phần Cáp hành động của Rails. Chúng ta có thể bỏ qua nó một cách an toàn cho bây giờ. Thư mục packsrất quan trọng đối với chúng tôi vì vậy hãy xem nó chứa gì

Một gói là gì? webpack có một khái niệm về các điểm vào là các tệp mà nó tìm kiếm đầu tiên khi nó bắt đầu biên dịch mã JavaScript của bạn. Webpacker gem tạo applicationgói dưới dạng application.jstập tin này bên dưới app/javascript/packs. Nếu bạn nhớ đường ống tài sản, tệp này tương đương với app/assets/javascripts/application.jstệp.

Các applicationgói được tạo ra bởi Rails chứa mã liên quan đến các thành phần Rails như turbolinks, Active và kho tàng Action cáp.

note: Bạn sẽ nhận thấy rằng tất cả các khung Rails có thành phần JavaScript như Rails-UJS, Turbolinks, Active Storage đều được di chuyển để hỗ trợ Webpacker. Ngay cả các khung công tác mới được giới thiệu trong Rails 6 như Action Text cũng hoạt động với Webpacker.

Vì vậy, applicationgói là điểm nhập cảnh cho tất cả các mã JavaScript của bạn. Chúng tôi có thể tạo các gói tùy chỉnh và đặt chúng trong app/javascript/packsthư mục và Webpacker sẽ tìm thấy chúng một cách vui vẻ trong khi biên dịch.

Cài đặt này được cấu hình bởi Webpacker cho chúng tôi trong tệp config/webpacker.yml

Nếu chúng tôi muốn webpack tìm kiếm các thư mục bổ sung cho mã JavaScript, chúng tôi có thể định cấu hình cài đặt resolved_pathstrong config/webpacker.yml. Các tập tin là khá tự giải thích về các tùy chọn cấu hình.

Biên dịch mã JavaScript Bước tự nhiên tiếp theo là xem xét cách biên dịch mã JavaScript bằng Webpacker và webpack. Trong chế độ phát triển, bạn không phải làm gì cả. Khi bạn chạy máy chủ rails, quá trình biên dịch xảy ra trong yêu cầu tương tự như cách nó được sử dụng để làm việc với đường ống tài sản.

Tải lại trực tiếp bằng webpack-dev-server Webpacker tạo một tệp bin/webpack-dev-servercó thể được sử dụng để tải lại trực tiếp trong giai đoạn phát triển. Chúng tôi phải chạy riêng webpack-dev-server cho mục đích này và sau đó chúng tôi có thể thấy hoạt động tải lại và thay thế mô-đun nóng đang hoạt động.

Chế độ sản xuất Trong sản xuất, webpacker nối thêm webpacker:compilenhiệm vụ vào assets:precompilenhiệm vụ. Vì vậy, nếu đường dẫn xây dựng của bạn chạy assets:precompiletác vụ, nó cũng sẽ đảm nhiệm việc biên dịch các tệp sẽ được biên dịch bởi webpack. Vì gói wepack là một phần của package.json, sợi sẽ đảm nhiệm việc cài đặt nó để có thể biên dịch mã JavaScript.

Bao gồm mã JavaScript trong ứng dụng Chúng tôi đã thấy cách biên dịch mã JavaScript bằng cách sử dụng webpacker nhưng làm cách nào để đưa nó vào ứng dụng của chúng tôi?

Vì thế, Webpacker cung cấp một phương thức trợ giúp javascript_pack_tag. Như tên cho thấy, chúng tôi sử dụng nó để bao gồm các gói webpacker trong các tệp bố trí của chúng tôi. Điều này tương đương với javascript_link_tagtừ đường ống tài sản.

Việc javascript_pack_tagđảm bảo rằng nó tham chiếu các tài sản được biên dịch đúng trong chế độ phát triển cũng như trong chế độ sản xuất tương tự như đường ống tài sản.

Đó là tất cả cho ngày hôm nay. Chúng tôi đã có một cái nhìn tổng quan về cách Webpacker cho phép chúng tôi sử dụng webpack trong ứng dụng Rails 6 và chúng tôi hiểu packstrong thế giới Webpacker. Chúng tôi cũng đã thấy cách biên dịch xảy ra và cách sử dụng mã được biên dịch trong ứng dụng.

Tiếp theo, hãy kiểm tra cách làm chủ "gói" trong Webpacker.