Vào đầu thời đại internet, các trang web đơn giản hơn nhiều và không có tính tương tác cao. Với sự tiến bộ của công nghệ, thiết bị và ngôn ngữ lập trình, chúng trở nên phức tạp hơn và bao gồm một số tệp, bao gồm các nội dung như hình ảnh và bảng định kiểu CSS.
Trang web của bạn càng tương tác, bạn càng phải sử dụng nhiều mã JavaScript. Để sử dụng mã như vậy, bạn phải bao gồm tất cả các tệp mã HTML bằng thẻ script. Cách tiếp cận như vậy dễ xảy ra lỗi vì bạn phải nhớ bao gồm mọi tệp đơn lẻ và giữ đúng thứ tự, nếu không, mã của bạn có thể không hoạt động. Với công cụ Webpack, những vấn đề này sẽ biến mất. Webpacker là cầu nối giữa Webpack và ứng dụng Rails.
Bài viết này đi sâu vào Webpacker và đưa ra lời giải thích chi tiết giúp bạn hiểu cách hoạt động của công cụ này. Để làm cho nội dung có giá trị nhất có thể, tôi quyết định chia nó thành các phần sau:
- Tổng quan cấp cao - trước khi chúng ta tìm hiểu sâu, tôi sẽ giải thích tổng quan cấp cao của cả Webpack và Webpacker. Bạn có thể coi đó là sự chuẩn bị cho các chủ đề nâng cao hơn.
- Giải thích cấu trúc - vì chúng ta sẽ khám phá nhiều tệp, nên biết lý do tại sao cấu trúc cụ thể được sử dụng và cách nó đáp ứng với mục đích chung.
- Giải thích về giải phẫu - phần này bao gồm việc điều tra các tệp quan trọng nhất của thiết lập Webpack. Biết cách chúng hoạt động là điều cần thiết cho quá trình phát triển hiệu quả và không gặp rắc rối.
- Thiết lập môi trường cụ thể - phần cuối giải thích cách hoạt động của Webpacker trong môi trường phát triển và sản xuất.
Sau khi đọc bài viết này, bạn sẽ biết Webpack và Webpacker là gì và tại sao chúng ta cần chúng trong ứng dụng Rails của mình. Tìm hiểu sâu về nội bộ của Webpacker sẽ giúp bạn hiểu cách công cụ kết nối với Webpack và cách nó giao tiếp với ứng dụng Rails.
Trước khi lặn
Trước khi xuống vùng nước sâu, trước tiên chúng ta cần chuẩn bị. Tổng quan cấp cao là một cách tuyệt vời để bắt đầu làm việc với bất kỳ công nghệ nào vì nó giúp chúng tôi hiểu mục đích của một công cụ nhất định và các vấn đề mà nó giải quyết mà không cần đi sâu vào nội bộ của nó.
Webpack
Tôi đã đề cập rằng Webpack giúp chúng tôi tổ chức mã tệp JavaScript của mình để tránh lỗi và cải thiện hiệu suất của trang web. Nó tổ chức mã thành các gói.
Gói là một tệp trong đó nhiều mô-đun được đặt một cách thông minh, tôn trọng biểu đồ phụ thuộc được tạo lần đầu tiên. Nhờ quy trình này, chúng tôi có thể chắc chắn rằng mã của chúng tôi sẽ hoạt động như mong đợi và trước khi chúng tôi gọi mã của một thư viện nhất định, mã đó sẽ được tải.
Webpack không phải là công cụ duy nhất được sử dụng theo mặc định trong phiên bản Rails mới nhất. Khi dự án được tạo, các tệp cấu hình cho Babel và PostCSS cũng được tạo. PostCSS là một công cụ để chuyển đổi CSS bằng JavaScript và Babel là một trình biên dịch JavaScript cho phép chúng ta viết JavaScript hiện đại mà không cần lo lắng về sự hỗ trợ của trình duyệt.
Webpacker
Webpacker là một công cụ tích hợp Webpack với một ứng dụng Rails. Nó giúp bạn dễ dàng định cấu hình và phát triển các ứng dụng giống JavaScript và tối ưu hóa chúng cho môi trường sản xuất.
Mã nguồn có sẵn dưới dạng đá quý và thư viện đi kèm với máy chủ phát triển giúp quá trình phát triển ứng dụng diễn ra rất nhanh vì bạn không phải dừng và khởi động máy chủ để xem các thay đổi được giới thiệu trong các tệp JavaScript.
Chìm đắm sâu
Bây giờ bạn đã biết tại sao Webpack được tạo ra và vai trò của Wepacker trong ứng dụng Rails, chúng ta có thể tập trung vào nội bộ của Webpacker để xem cách nó tổ chức tệp, tăng tốc quá trình phát triển và tối ưu hóa tệp cho môi trường sản xuất.
Webpacker có sẵn trong phiên bản Rails mới nhất. Trước khi tạo một dự án mới, hãy đảm bảo rằng phiên bản Node lớn hơn hoặc bằng 10.17.0 dưới dạng webpacker:install lệnh sẽ tự động được gọi với lệnh mới rails.
Cấu trúc tệp Webpacker
Sau khi lệnh cài đặt được thực thi, các tệp sau sẽ được tạo:
-
config/webpacker.yml- tệp cấu hình chính chứa cấu hình mặc định và cấu hình cho các môi trường cụ thể -
config/webpacker/- thư mục nơi các tệp cấu hình JavaScript cho các môi trường cụ thể được tạo -
bin/webpack- một tệp thực thi gọi webpack để tạo các gói -
bin/webpack-dev-server- một tệp thực thi khởi động máy chủ phát triển, máy chủ này sẽ tải lại gói web mỗi khi bạn thực hiện thay đổi bên trong các tệp JavaScript có trong gói
Giải phẫu của tệp cấu hình
Tệp cấu hình chính cho Webpacker nằm trong thư mục cấu hình và nó được đặt tên là webpacker.yml . Không giống như Webpacker, cấu hình cho Webpack được lưu trữ riêng biệt cho từng môi trường trong config/webpack thư mục.
Webpacker
Theo mặc định, tệp cấu hình chứa nhiều mục nhập - mục nhập mặc định và các mục cho từng môi trường nơi bạn có thể ghi đè cài đặt cụ thể. Hãy xem các cài đặt quan trọng nhất:
-
source_path- nguồn chính của các tệp javascript trong ứng dụng của bạn. Nó được đặt thànhapp/javascripttheo mặc định và thông thường, không cần thay đổi giá trị này. -
source_entry_path- tên của thư mục trong source_path nơi bạn giữ các tệp gói, hay còn gọi là các điểm nhập. Theo mặc định, cài đặt này được đặt thành thư mục của gói. -
public_root_path- đường dẫn đến thư mục trong ứng dụng của bạn có thể truy cập được từ trình duyệt. Trong một ứng dụng Rails điển hình, đó là một thư mục công khai -
public_output_path- khi Webpacker biên dịch các tệp của bạn, nó sẽ đặt tất cả các tệp đã biên dịch trong thư mục này dướipublic_root_path. Theo mặc định, thư mục được đặt tên là gói, nhưng bạn có thể gọi nó bất cứ thứ gì bạn muốn. -
webpack_compile_output- nếu cờ được đặt thành true, thì các thông báo đầu ra sẽ được hiển thị khi các tệp được biên dịch. Điều này rất hữu ích khi quá trình biên dịch không thành công, vì bạn sẽ nhận thức được điều đó và có thể thực hiện hành động.
Điều đáng nói là phần phát triển cũng chứa cấu hình cho máy chủ nhà phát triển được sử dụng để biên dịch tệp trong môi trường phát triển mà không cần khởi động lại máy chủ.
Nếu bạn muốn truy cập cấu hình từ bảng điều khiển rails hoặc cấp mã, bạn có thể gọi Webpacker.manifest.config , sẽ trả về cá thể lớp cấu hình.
Webpack
Mỗi môi trường có tệp cấu hình của nó, nhưng trong mỗi tệp, tệp môi trường chính được nhập:config/webpack/environment.js . Trong tệp cấu hình môi trường, có một nơi để tải các plugin tùy chỉnh sẽ sửa đổi hành vi mặc định của Webpack. Chúng tôi cũng có thể thêm các quy tắc tùy chỉnh để biên dịch các tệp của mình.
Giải phẫu của tệp gói
Các gói nằm trong app/javascript/packs danh mục. Mỗi tệp gói được Webpacker coi như một điểm vào khi quá trình biên dịch bắt đầu.
Tệp gói mặc định
Khi bạn tạo một dự án Rails mới, một tệp gói mặc định có tên application.js sẽ được tạo với nội dung sau:
import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
Rails.start();
Turbolinks.start();
ActiveStorage.start();Như bạn có thể thấy, bước đầu tiên là nhập thư viện đã cho và sau đó gọi phương thức khởi tạo của nó khi cần thiết. Khi bạn gọi nhập, hệ thống sẽ tìm kiếm một mô-đun nút nhất định hoặc một thư viện cục bộ. Với cách tiếp cận tiêu chuẩn, bạn không cần phải khởi chạy thư viện một cách rõ ràng như khi nó được khởi tạo khi bạn đưa nó vào nguồn trang với thẻ script.
Các phương pháp hay cho một tệp gói
Mặc dù bạn có thể đặt mã JavaScript thông thường bên trong tệp gói và thực thi nó, nhưng bạn không nên giữ mã JavaScript bên trong tệp gói. Phương pháp tốt nhất là giữ cho các tệp sạch sẽ và chỉ nhập và khởi tạo các thư viện ở đây và giữ các logic khác bên ngoài thư mục gói.
Bao gồm gói tệp trong ứng dụng
Các tệp gói không được tự động đưa vào nguồn của trang web. Cũng giống như trong trường hợp đường dẫn nội dung, chúng tôi phải sử dụng một thẻ đặc biệt bên trong chế độ xem của mình:
<%= javascript_packs_with_chunks_tag 'application' %>
Phương pháp này hoạt động như thế nào? Bên dưới, nó gọi cấu hình Webpacker chứa dữ liệu bạn đưa vào config/webpacker.yml tập tin. Nó tìm kiếm tệp application.js bên trong thư mục điểm nhập, trong trường hợp của chúng tôi, là app/javascript/packs . Bạn có thể xác minh nó bằng cách gọi mã sau:
Webpacker.manifest.config.source_entry_path
Khi các mục nhập được tìm thấy, Webpacker sẽ gọi javascript_include_tag , một trình trợ giúp từ ActionView thư viện có sẵn theo mặc định trong Rails. Phương thức này chấp nhận một hoặc nhiều nguồn và trả về các thẻ tập lệnh mà bạn có thể áp dụng ngay cho chế độ xem của mình.
Máy chủ phát triển
Điểm vào của máy chủ phát triển Webpacker là tệp thực thi được đặt bên trong bin thư mục và được đặt tên là webpack-dev-server . Quá trình chạy máy chủ bao gồm năm bước:
- Môi trường thiết lập - tên môi trường cho Node and Rails được đặt. Khi môi trường không được chỉ định, chương trình sẽ giả định rằng máy chủ sẽ được thực thi trong môi trường phát triển.
- Đang tải cấu hình - tệp
config/webpacker.ymlđược tải với các cài đặt cho môi trường đã đặt ở bước trước. - Các tùy chọn lệnh xác thực - chương trình kiểm tra xem chúng tôi có chuyển các tùy chọn thích hợp cho lệnh máy chủ hay không. Ví dụ:nó sẽ xuất hiện một lỗi khi
--httpstùy chọn được đưa ra, nhưng chúng tôi không chỉ định nó trongconfig/webpacker.ymltệp. - Xác minh tính khả dụng của cổng - chương trình kiểm tra xem cổng đã cho có sẵn để sử dụng hay không. Nếu một chương trình khác đang sử dụng chương trình đó, nó sẽ báo lỗi cho bạn biết rằng bạn phải cập nhật cấu hình máy chủ webpack bên trong
config/webpacker.ymltệp. - Thực thi lệnh phục vụ gói web - khi thư mục mô-đun nút tồn tại, chương trình thực hiện lệnh trong thư mục, ngược lại, nó thực thi lệnh đó với sợi. Chương trình chuyển tùy chọn cấu hình cho lệnh trỏ đến một trong các tệp được đặt bên trong
config/webpack/thư mục.
Máy chủ hiện đang chạy và nó biên dịch mã của bạn một cách nhanh chóng, vì vậy bạn không cần phải khởi động lại máy chủ để xem các thay đổi và kiểm tra xem webpack có thể tạo gói với mã mới hay không.
Mã của máy chủ phát triển khá đơn giản. Nó chỉ tải cấu hình từ tệp cấu hình ở định dạng YAML và chuyển cấu hình thích hợp ở định dạng JavaScript trực tiếp đến webpack serve yêu cầu. Bạn cũng có thể chạy nó bằng tay, nhưng bạn không phải quan tâm đến các đối số lệnh thích hợp với lệnh tích hợp sẵn.
Biên dịch tệp cho môi trường sản xuất
Giả sử bạn muốn triển khai ứng dụng đang sử dụng webpacker. Trong trường hợp đó, bạn có thể chỉ cần gọi các tài sản assets:precompile tác vụ như Webpacker tự động kết nối tác vụ webpacker:compile với nó.
Làm thế nào để webpacker:compile nhiệm vụ làm việc dưới mui xe? Hãy cùng tìm hiểu nó và xem. Nó thực hiện những điều sau:
- Nó bao bọc cuộc gọi chính thành hai khối để đảm bảo rằng
NODEmôi trường được thiết lập và nhật ký Webpacker được xuất theo tiêu chuẩn. - Nó gọi Webpack và sau đó phân tích các nhật ký của nó để xác định xem hành động có thành công hay không.
Bây giờ bạn có thể truy cập public/packs/js thư mục để xem các tệp đã biên dịch. Chúng sẽ được triển khai tới máy chủ.
Tóm tắt
Chúng ta vừa tìm hiểu cách hoạt động của Webpacker. Bạn có thể coi nó như một cầu nối giữa thư viện Webpack và ứng dụng Rails cho phép bạn định cấu hình Webpack với Ruby và dễ dàng sử dụng mã javascript bên trong ứng dụng của bạn.
Để tóm tắt toàn bộ bài viết, chúng ta hãy nhớ lại các yếu tố chính của Webpacker một lần nữa:
- Cấu hình - nó được đặt bên trong
config/webpacker.ymlvà cho phép bạn trỏ Webpacker đến thư mục nơi bạn lưu giữ các gói và tệp javascript của mình - Đóng gói - đó là một điểm nhập duy nhất mà từ đó Webpacker bắt đầu biên dịch. Mỗi thư viện được nhập và khởi tạo trong tệp đó sẽ được biên dịch tự động.
- Máy chủ phát triển - một tập lệnh đơn giản cho phép bạn biên dịch tệp nhanh chóng, vì vậy bạn không phải khởi động lại máy chủ mỗi khi sửa đổi tệp JavaScript
- Tác vụ biên dịch - một tác vụ rake đơn giản gọi Webpack và biên dịch các tệp trong thư mục công khai để bạn có thể triển khai chúng tới máy chủ sản xuất và cung cấp chúng cho người dùng cuối
- View helper - helper cho phép bạn đưa các tệp đã biên dịch vào bên trong các view
Đối với nhiều nhà phát triển không có nhiều kinh nghiệm, Wepacker có vẻ hơi kỳ diệu, nhưng trên thực tế, đó là một thư viện đơn giản giúp chúng ta sử dụng Webpack theo cách Ruby.
Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng xuất hiện trên báo chí, hãy đăng ký bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!