Magento 2 Gói Js nâng cao

Bất cứ ai cũng có thể làm việc trên Gói JS nâng cao ?

Chúng tôi muốn áp dụng khái niệm này cho một trong các dự án khách hàng của chúng tôi.

Bạn có thể giải thích về gói JavaScript nâng cao theo từng bước chi tiết & có mô-đun (hoặc) công cụ nào cần được cài đặt để xác minh không?, Có thể triển khai Gói JS nâng cao trong Magento / 2.2 (Doanh nghiệp) không? *

Lưu ý : Tôi đã theo dõi M2developer Docs nhưng không thể hiểu và thực hiện. Bạn có thể vui lòng hướng dẫn cho tôi và muốn biết những thách thức sẽ xử lý là gì?

Có sự khác biệt nào giữa gói JS và gói JS nâng cao không?

Tôi đã thực hiện R & D về nhiệm vụ này và chuẩn bị một số lưu ý thực hiện nó có thể giúp bạn những người khác nếu bạn muốn làm, vui lòng làm theo các bước dưới đây về

Gói JS nâng cao .

A) Công cụ cần thiết

1. node.js> = 8.x
2. npm> = 6.x
3. Magento 2 DevTool
4. Git

B) Cài đặt DevTool

1. Sao chép kho lưu trữ trong máy cục bộ của bạn Ex: git clone https://github.com/magento/m2-devtools.git
2. Chạy cài đặt npm
3. Chạy npm start (hoặc) npm run build
4. Điều hướng đến chrome: // phần mở rộng
5. Bật chế độ Nhà phát triển
6. Nhấp vào Tải không giải nén
7. Chọn thư mục mở rộng trong thư mục gốc của kho lưu trữ này
8. Đóng và mở lại trình duyệt chrome

C) Sử dụng DevTool

1. Truy cập bất kỳ trang nào trong cửa hàng trong trình duyệt có cài đặt tiện ích mở rộng này

2. Mở RequireJS >> Gói tạo

3. Nhấp vào nút Ghi

4. Bắt đầu điều hướng đến các trang quan trọng của cửa hàng của bạn (Trang chủ / Danh mục / Sản phẩm / Giỏ hàng / Thanh toán)

5. Nhấp vào nút Ghi lại khi bạn kết thúc

6. Làm theo các hướng dẫn cài đặt trong Giao diện người dùng Bundle Generator

Vui lòng tham khảo liên kết bên dưới để sử dụng DevTool lấy một ví dụ từ Magento 2.3.1 mặc định tại đây

• https://drive.google.com/file/d/1ysIjzr8ix1d4Vzi3gnwX4prp6-7_1JmM/view

D) Hướng dẫn cài đặt

1. Cài đặt mô-đun Magento_BundleConfig: Mô-đun này hiện không thể tiêu thụ được thông qua trình soạn thảo. Cài đặt thủ công mô-đun Magento_BundleConfig từ Github. Đảm bảo bạn đã chạy thiết lập: nâng cấp và mô-đun được bật.

Tham khảo : https://github.com/magento/m2-devtools/tree/master/Magento_BundleConfig

2. Set Store to Chế độ sản xuất: triển khai php bin / magento: mode: set sản xuất

3.Backup Nguồn nội dung tĩnh: Đối với chủ đề bạn đang gói, hãy di chuyển từng thư mục ngôn ngữ sang một thư mục cùng tên, được thêm vào _source .

Ví dụ: nếu bạn kết hợp Luma bằng tiếng Anh, hãy di chuyển frontend / Magento / luma / en_US sang frontend / Magento / luma / en_US_source.

Chỉ cần đổi tên en_US thành en_US_source

4. Cài đặt Trình tối ưu hóa RequireJS: Bạn phải cài đặt node.js cục bộ / Máy chủ. Chạy cài đặt npm -g requestjs

5. Lưu cấu hình gói được tạo: Nhấp vào Sao chép vào bảng tạm trong tab Trình tạo gói. Lưu toàn bộ cấu hình trong một tệp có tên build.js trong thư mục gốc của cửa hàng của bạn. (Bạn đã thấy cách lấy build.js từ liên kết tham chiếu video ở trên)

r.js -o build.js baseUrl = "pub / static / frontend / Magento / luma / en_US_source /" dir = "pub / static / frontend / Magento / luma / en_US /"

Ví dụ : r.js -o build.js baseUrl = "pub / static / frontend / Demo / Learning / en_US_source /" dir = "pub / static / frontend / Demo / Learning / en_US /"

Nếu các bước trên đã được thực hiện chính xác, cửa hàng của bạn sẽ chạy với các gói JavaScript được tối ưu hóa.

https://prnt.sc/no7j3z

Nếu cửa hàng Magento của bạn ở chế độ sản xuất thì

Magento 2.2 Nó có thể được thực hiện bằng dòng lệnh

 php bin/magento config:set dev/js/enable_js_bundling 1
 php bin/magento cache:clean

Magento <2.2

UPDATE `core_config_data` SET `value`='1' WHERE `path`='dev/js/enable_js_bundling';

Sau đó chạy lệnh php bin / magento cache: clean