Magento 2: requestjs-config.js trong các chủ đề?

Có thể bao gồm một requirejs-config.jstệp (hoặc cấu hình RequireJS) thông qua chủ đề Magento không? Hoặc là khả năng dành riêng cho các mô-đun Magento? Các thông tin tài liệu dev trên cấu trúc theme là mơ hồ đến thời điểm này.

Các tài liệu dev không đề cập bất cứ điều gì về RequireJS - tuy nhiên, các chủ đề bao gồm một webđiều đó có nghĩa là javascript có thể được gói cùng với chúng. Nếu javascript có thể được gói cùng với một chủ đề, điều đó có nghĩa là mô-đun RequireJS có thể được gói cùng với một chủ đề và nếu mô-đun RequireJS có thể được gói cùng với một chủ đề mà mô-đun có thể yêu cầu cấu hình RequireJS cụ thể.

Giả định ngây thơ của tôi sẽ là các chủ đề sẽ có khả năng này, nhưng tôi không thể tìm thấy bất kỳ tài liệu nào theo cách này hay cách khác, và không có thời gian rảnh rỗi để làm trò chơi mã yêu cầu trên requirejs-config.jstệp Magento bao gồm.

bạn thực sự có thể bao gồm một request-config.js trong các thư mục Mô-đun chủ đề của bạn.

Vấn đề là (thực sự đối với nhóm frontend của chúng tôi) dường như không có khả năng, để ghi đè cấu hình, nhưng để mở rộng cấu hình.

Vì vậy, để lấy mô-đun Magento_Theme làm ví dụ ở đây, nếu bạn thêm một tệp request-config.js trong <theme_base_dir>/Magento_Themethư mục, cấu hình sẽ được thêm vào tệp Yêu cầu-config.js được tạo và cả cấu hình từ mô-đun Magento_Theme sẽ được thêm vào.

Để trả lời câu hỏi của bạn, tôi cũng đã cố gắng thêm một tệp request-config.js trong <theme_base_dir>/webthư mục chủ đề và cũng theo thư mục gốc của chủ đề. Cả hai đều không hoạt động. cập nhật: thực sự theo câu trả lời dưới đây, có thể bằng cách đặt nó vào thư mục cơ sở chủ đề

Vì vậy, câu trả lời về cơ bản là có, vì bạn có thể thêm bất kỳ yêu cầu js nào dưới bất kỳ mô-đun nào (các tệp js liên quan đến chủ đề có thể được đặt tốt nhất trong <theme_base_dir>/Magento_Themethư mục)

Mặc dù tôi có thể nói, nên có khả năng thêm một yêu cầu chủ đề liên quan đến bên ngoài bất kỳ Mô-đun nào (có thể bạn hủy kích hoạt mô-đun đã cho) và cũng có thể ghi đè lên mô-đun request-config.js.

Cả hai dường như không thể atm.

=== CẬP NHẬT ===

trên thực tế có vẻ như có một chủ đề cụ thể theo yêu cầu-config.js. Xem câu trả lời của @Gareth Daine bên dưới

OK, tôi nghĩ rằng tôi có thể đã giải quyết nó và tôi tin rằng tài liệu này không rõ ràng và cần cập nhật để làm rõ quy trình.

Tôi đã chuyển requirejs-config.jstừ bên trong web/jsvà các webthư mục tương ứng cho cả hai Magento_Themevà gốc của chủ đề của tôi tại <Vendor>/<theme>và bây giờ cấu hình RequireJS của tôi được hợp nhất vào chính requirejs-config.jsvới tất cả các bao gồm khác.

Vì vậy, có vẻ như bạn phải đưa requirejs-config.jstệp vào các vị trí sau dựa trên các yêu cầu chủ đề / mô-đun.

Cấp chủ đề

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Cấp độ mô-đun

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

Vì vậy, trong requirejs-config.jschủ đề của bạn, bạn nên ánh xạ thành phần của mình vào một đường dẫn và sau đó sử dụng shimđể khai báo bất kỳ phụ thuộc nào:

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Sau đó, bạn sẽ cần tạo một mẫu để giữ việc khởi tạo các thành phần thông qua <script>thẻ (trừ khi bạn đính kèm trực tiếp vào một phần tử trong tệp .phtml) nếu đây là tuyến bạn muốn đi xuống, bao gồm nội dung sau:

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Ngoài ra, liên kết nó với một yếu tố:

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Sau đó, chỉ cần bao gồm mẫu .phtml trong hướng dẫn bố cục của bạn, ví dụ: tôi đã đặt của tôi trong phạm vi default.xmlnằm ở app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutdưới nút cơ thể và được tham chiếu:

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />

Không có đủ đại diện để đưa ra nhận xét này, nhưng chỉ cần lưu ý rằng câu trả lời của Gareth không hoàn toàn phù hợp với tôi.

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Bao bọc 'thành phần': 'js / thành phần' với '*':{} đã thực hiện thủ thuật.

Ngoài ra, thay vì tạo một tệp mẫu, tôi đã thêm mã bên dưới ở đầu app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

Có requirejs-config.jscó thể được thêm vào chủ đề như sau. Đây là cách tôi thêm thư viện dotdotdot trong chủ đề tùy chỉnh magento2 của mình.

1. Tải xuống và thêm Thư viện Js trong chủ đề của bạn theo đường dẫn:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Tạo tập tin requestjs của một chủ đề như sau và cho những người yêu cầu biết thư viện mới được thêm vào.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Sử dụng thư viện đã thêm trong tệp js chính của chủ đề của bạn như sau:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. và bao gồm tệp js của chủ đề trong đầu trang web của bạn như sau:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Bạn có thể thêm bất kỳ thư viện JS bên ngoài và tệp tùy chỉnh trên mỗi trang trong magento2.