Magento 2: requirejs-config.js ในธีมหรือไม่

เป็นไปได้หรือไม่ที่จะรวมrequirejs-config.jsไฟล์ (หรือกำหนดค่า RequireJS) ผ่านธีม Magento? หรือความสามารถที่สงวนไว้สำหรับโมดูล Magento? ข้อมูลdev docs เกี่ยวกับโครงสร้างของธีมนั้นคลุมเครือจนถึงจุดนี้

เอกสาร Dev ไม่ได้พูดถึงสิ่งใด ๆ เกี่ยวกับ RequireJS - อย่างไรก็ตามชุดรูปแบบรวมถึงสิ่งwebที่หมายถึงจาวาสคริปต์สามารถรวมกับพวกเขา หากสามารถรวม javascript เข้ากับธีมนั่นหมายถึงโมดูล RequireJS สามารถรวมกับธีมได้และหากโมดูล RequireJS สามารถรวมกับธีมที่โมดูลนั้นอาจต้องการการกำหนดค่า RequireJS เฉพาะ

สมมติฐานที่ไร้เดียงสาของฉันจะเป็นรูปแบบที่จะมีความสามารถนี้ แต่ฉันไม่สามารถหาเอกสารใด ๆ เกี่ยวกับวิธีนี้หรืออื่น ๆ และไม่ได้บ่ายฟรีที่จะใช้รหัสที่จำเป็น spelunking ในrequirejs-config.jsไฟล์ของวีโอไอพีรวมถึง

คุณสามารถรวม require-config.js ในโมดูลของคุณ

ปัญหาคือ (จริง ๆ แล้วสำหรับทีมส่วนหน้าของเรา) ที่ดูเหมือนจะไม่มีความเป็นไปได้ที่จะแทนที่การตั้งค่า แต่เพื่อขยายการกำหนดค่า

ดังนั้นในการใช้โมดูล Magento_Theme สำหรับตัวอย่างที่นี่ถ้าคุณเพิ่ม require-config.js ภายใต้<theme_base_dir>/Magento_Themedir การกำหนดค่าจะถูกเพิ่มไปยังไฟล์ require-config.js ที่สร้างขึ้นและยังเพิ่มการกำหนดค่าจากโมดูล Magento_Theme

เพื่อตอบคำถามของคุณฉันได้ลองเพิ่ม require-config.js ภายใต้ธีม<theme_base_dir>/webdir และภายใต้ธีมรูท dir ทั้งสองไม่ทำงาน อัปเดต: จริง ๆ แล้วตามคำตอบด้านล่างเป็นไปได้โดยวางลงใน dir ฐานธีม

ดังนั้นคำตอบก็คือใช่เพราะคุณสามารถเพิ่มข้อกำหนด js ใด ๆ ภายใต้โมดูลใด ๆ (ไฟล์ที่เกี่ยวข้องกับชุดรูปแบบ js อาจอยู่ที่ดีที่สุดภายใต้<theme_base_dir>/Magento_Themedir)

แม้ว่าฉันจะบอกว่ามีความเป็นไปได้ที่จะเพิ่มชุดรูปแบบที่เกี่ยวข้อง require-config.js นอกโมดูลใด ๆ (บางทีคุณอาจปิดการใช้งานโมดูลที่กำหนด) และมันก็เป็นไปได้ที่จะแทนที่โมดูลที่ต้องการ -conf.js

ทั้งสองดูเหมือนเป็นไปไม่ได้ ATM

=== UPDATE ===

จริง ๆ แล้วมันเป็นไปได้ที่จะมีธีมเฉพาะ require-config.js ดูคำตอบของ @Gareth Daine ด้านล่าง

ตกลงฉันคิดว่าฉันอาจจะแก้ไขได้และฉันเชื่อว่าเอกสารมีความคลุมเครือและจำเป็นต้องมีการปรับปรุงเพื่อชี้แจงกระบวนการ

ฉันขยับ requirejs-config.jsจากภายในweb/jsและwebไดเรกทอรีตามลำดับสำหรับทั้งคู่Magento_Themeและรูทของชุดรูปแบบของฉันที่<Vendor>/<theme>และตอนนี้การกำหนดค่า RequireJS ของฉันถูกรวมเข้ากับหลักrequirejs-config.jsด้วยส่วนอื่น ๆ ทั้งหมด

ดังนั้นจึงปรากฏว่าคุณต้องรวมrequirejs-config.jsไฟล์ไว้ในตำแหน่งต่อไปนี้ตามข้อกำหนดของธีม / โมดูล

ระดับธีม

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

ระดับโมดูล

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

ดังนั้นในrequirejs-config.jsธีมของคุณคุณควรแมปส่วนประกอบของคุณกับพา ธ แล้วใช้shimเพื่อประกาศการขึ้นต่อกัน:

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

จากนั้นคุณจะต้องสร้างแม่แบบเพื่อระงับการเริ่มต้นของส่วนประกอบผ่านทาง <script>แท็ก (เว้นแต่คุณจะแนบโดยตรงกับองค์ประกอบภายในไฟล์. phtml) หากเป็นเส้นทางที่คุณต้องการลงไปให้รวมเนื้อหาต่อไปนี้:

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

หรือผูกมันกับองค์ประกอบ:

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

จากนั้นก็รวมเทมเพลต. phtml ไว้ในคำแนะนำเลย์เอาต์ของคุณตัวอย่างเช่นฉันวางระเบิดไว้ในส่วนที่default.xmlอยู่app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutใต้โหนดของร่างกายและอ้างอิง:

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

ไม่มีตัวแทนที่เพียงพอในการแสดงความคิดเห็น แต่เพียงเพื่อให้ทราบว่าคำตอบของ Gareth ไม่ได้ผลสำหรับฉัน

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

การห่อ 'ส่วนประกอบ': 'js / component' ด้วย '*':{}การใช้กลอุบาย

นอกจากนี้แทนที่จะสร้างไฟล์เทมเพลตฉันเพิ่มรหัสด้านล่างที่ด้านบนของ 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>

ใช่requirejs-config.jsสามารถเพิ่มในธีมดังต่อไปนี้ นี่คือวิธีที่ฉันเพิ่มไลบรารี dotdotdot ในธีมที่กำหนดเอง magento2 ของฉัน

1. ดาวน์โหลดและเพิ่ม Js Library ในธีมของคุณตามเส้นทาง:

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

2. สร้างไฟล์ requirejs ของชุดรูปแบบดังต่อไปนี้และแจ้งให้ requirejs ทราบไลบรารีที่เพิ่มใหม่

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

3. ใช้ไลบรารีที่เพิ่มเข้ามาในไฟล์ js หลักของธีมดังนี้:

// 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. และรวมไฟล์ js ของธีมของคุณไว้ในส่วนหัวของเว็บไซต์ดังนี้:

// 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>

คุณสามารถเพิ่มไลบรารี JS และไฟล์ที่กำหนดเองภายนอกได้ทุกหน้าใน magento2