Làm thế nào / Trường hợp Magento Chuyển đổi Tên mô-đun RequireJS thành URL?

Trong Magento 2, bạn có thể sử dụng RequireJS để bao gồm một mô-đun javascript với mã trông giống như thế này.

#File: app/code/Package/Name/view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            modulename: 'Package_Name/js/path/to/file'
        }
    }
}

Mặc dù requirejs-config.jstập tin là một chút ma thuật Magento 2, nhưng điều này dường như là RequireJS tiêu chuẩn. Về cơ bản, bạn đang ánh xạ tên ngắn modulenamevào mô-đun javascript có tên Package_Name/js/path/to/file.

Có gì không rõ ràng là nơi hoặc làm thế nào Magento 2 người cải đạo vào tên module javascript trên

Package_Name/js/path/to/file

Vào url HTTP (S)

//magento.example.com/static/frontend/Magento/luma/en_US/Package_Name/js/path/to/file.js

Trong một hệ thống RequireJS chứng khoán, RequireJS sẽ cố gắng tải URL sau

//magento.example.com/Package_Name/js/path/to/file.js

Vì vậy, rõ ràng Magento đang làm gì đó để đảm bảo URL trên được chuyển đổi thành URL lối vào Magento. Điều không rõ ràng là

1. Trường hợp này xảy ra (lớp PHP? Lớp Javascript?)
2. Quy tắc cho chuyển đổi đó là gì. Mô-đun RequireJS không giống như định danh tệp Magento tiêu chuẩn ( Package_Name::js/path/to/file)

Vì vậy, Magento 2 / RequireJS chuyển đổi mô-đun thành một đường dẫn như thế nào / ở đâu.

RequireJS có một tính năng cho phép bạn đặt một BaseUrl tùy chỉnh .

Magento tạo baseUrl cho RequireJS trong phần thân của trang, nơi các tài nguyên JS được yêu cầu. Vì vậy, về cơ bản, nó là một phần nữa của cấu hình RequireJS được tạo bởi Magento. BaseUrl này được tính ở phía máy chủ và dựa trên chủ đề hiện tại, ngôn ngữ và URL cơ sở cho các tệp xem tĩnh cho cửa hàng. Sau đó, chức năng RequireJS riêng tính toán đường dẫn đầy đủ như sau

baseUrl + file + '.js'

Bạn đang tự hỏi làm thế nào

Module_Name/js/path/to/module

trở thành

//magento.example.com/static/frontend/Package/Theme/locale/Module_Name/js/path/to/module.js

Trước hết, điều quan trọng là phải hiểu rằng đây hoàn toàn là yêu cầuJS, không phải bất kỳ loại nước sốt đặc biệt nào của Magento (mặc dù có một số thứ khác ở nơi khác). Đối với hầu hết các phần, front-end chỉ sử dụng hành vi bình thường của RequireJS. Điều kỳ diệu thường là cách nó tạo ra pub/static, cụ thể là cách liên view/area/web/js/path/to/module.jskết với nhau pub/static/area/Package/theme/Module_Name/js/path/to/module.js. Điều này được xử lý bởi quy trình biên dịch tài sản tĩnh của Magento và tôi không đi sâu vào đây.

requirejs-config.js

Hãy giới thiệu một tập tin mới mà bạn đề cập : requirejs-config.js. Đây là một số nước sốt đặc biệt Magento 2, nhưng có lẽ không nhiều như bạn nghĩ.

Tệp này có thể là bất kỳ JavaScript nào, nhưng ít nhất nên khai báo một biến (toàn cầu) được gọi config. Đối tượng bị ràng buộc configđược truyền trực tiếp đến requestJS để cấu hình nó.

Cách thức hoạt động này là Magento tìm thấy tất cả requirejs-config.jstrong một dự án. Đây có thể là trong một mô-đun, dưới view/area, hoặc trong một chủ đề, trong thư mục gốc của nó, và trong override mô-đun của một chủ đề, ví dụ Magento_Catalog/requirejs-config.js. Lưu ý rằng điều này không bao gồm bất kỳ con của một webthư mục. Nói chung, tập tin này nên là anh chị em với một webthư mục.

Sau khi được toàn cầu hóa, mỗi tệp được trang trí trong một bao đóng (vì vậy biến toàn cục của chúng ta thực sự không có) và một dòng ở cuối bao đóng chuyển configbiến cho requiređối tượng. Điều này có thể được nhìn thấy:

Đây là Magento_Checkout::view/frontend/requirejs-config.js:

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = { 
 map: { 
 '*': { 
 discountCode: 'Magento_Checkout/js/discount-codes',
 shoppingCart: 'Magento_Checkout/js/shopping-cart', 
 regionUpdater: 'Magento_Checkout/js/region-updater', 
 opcOrderReview: 'Magento_Checkout/js/opc-order-review',
 sidebar: 'Magento_Checkout/js/sidebar', 
 payment: 'Magento_Checkout/js/payment', 
 paymentAuthentication: 'Magento_Checkout/js/payment-authentication' 
 }
 } 
};

Khi đến mặt trước, nó sẽ trông như thế này:

(function() {
 /**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

 var config = { 
 map: { 
 '*': { 
 discountCode: 'Magento_Checkout/js/discount-codes',
 shoppingCart: 'Magento_Checkout/js/shopping-cart', 
 regionUpdater: 'Magento_Checkout/js/region-updater', 
 opcOrderReview: 'Magento_Checkout/js/opc-order-review',
 sidebar: 'Magento_Checkout/js/sidebar', 
 payment: 'Magento_Checkout/js/payment', 
 paymentAuthentication: 'Magento_Checkout/js/payment-authentication' 
 }
 } 
}; require.config(config);
})();

Trang trí này có thể được nhìn thấy trong Magento\Framework\RequireJs\Config.

Mỗi tập tin được trang trí này được nối và đổ vào static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js. Vị trí này được thỏa thuận trước thời hạn, do đó HTML tải tập lệnh này khi nó yêu cầuJS:

<script type="text/javascript" src="https://magento.example.com/static/area/Package/theme/locale/requirejs/require.js"></script> <script type="text/javascript" src="https://magento.example.com/static/_requirejs/area/Package/theme/locale/secure/requirejs-config.js"></script>

Tôi xem xét cách cấu hình RequireJS ngoài phạm vi cho câu trả lời này, nhưng họ có tài liệu khá tốt về điều này . Có hai điều quan trọng cần lưu ý:

1. Các cuộc gọi liên tiếp require.configsẽ xếp các đối tượng chồng lên nhau, do đó, lần viết cuối cùng sẽ thắng. Họ không thay thế, đó là rất quan trọng.
2. Có một cấu hình ở đầu cấu hình này đặt baseUrl. Đây không phải là trong một requirejs-config.js. Điều này được chèn vào thời gian biên dịch bởi Magento\Framework\RequireJs\Config.

Quên một lúc làm thế nào Magento làm việc mà các mô-đun RequireJS cần tải (một cuộc thảo luận tốt cho một lần khác, có lẽ; Như một gợi ý, hãy nhìn vào mage/apply/main.js), giả sử chúng ta có mã:

require(['modulename'], function () {});

trong chân không ở đâu đó Làm thế nào để Magento biết phải làm gì?

Chà, điều đầu tiên đòi hỏiJS sẽ làm là tìm kiếm modulenametrong bản đồ của nó. Trong trường hợp của chúng tôi, nó sẽ học được rằng nó nên coi tất cả các yêu cầu modulenamelà một yêu cầu Module_Name/js/path/to/module. Nó chỉ làm điều này một lần. Ánh xạ không được đệ quy. Tôi lặp lại. Nếu bạn có một ánh xạ từ ađến bvà từ bđến a, điều này sẽ trao đổi từng yêu cầu và sẽ không gây ra một vòng lặp vô hạn.

Khi chúng tôi đã trải qua bản đồ brouhaha, RequireJS xem xét những gì nó có. Nếu nó kết thúc .jsvà không giống như một liên kết tuyệt đối hoặc một URL, nó sẽ thêm vào tập lệnh được cấu hình baseUrlvà tải tập lệnh đó thông qua các thủ tục thông thường của nó. Nếu nó không kết thúc .jsvà không phải là một liên kết hoặc URL tuyệt đối, nó sẽ thêm .jsvào cuối, sau đó thêm vào cấu hình baseUrlvà tải thông qua các thủ tục thông thường của nó. Nếu requestJS cho rằng nó có URL, nó chỉ cố tải nó.

Đó là sử dụng các thành phần chi tiết hơn nữa, bạn kiểm tra Magento \ Framework \ View \ Element \ Js \ Lớp thành phần và nhà cung cấp tệp mô-đun mặc định \ magento \ module-catalog \ view \ frontend \ layout \ default.xml

<referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Catalog::js/components.phtml"/>
    </referenceContainer>