Magento 2: आवश्यकताjj- विषयों में config.js?

Question

क्या requirejs-config.jsकिसी Magento विषय के माध्यम से फ़ाइल (या अन्यथा आवश्यकता कॉन्फ़िगर करें) को शामिल करना संभव है ? या क्षमता Magento मॉड्यूल के लिए आरक्षित है? विषय संरचना पर देव डॉक्स जानकारी इस मुद्दे पर अस्पष्ट है।

देव डॉक्स ने जेएसजेएस के बारे में कुछ भी उल्लेख नहीं किया है - हालांकि, थीम में एक ऐसा webअर्थ शामिल है जिसका मतलब है कि जावास्क्रिप्ट उनके साथ बंडल किया जा सकता है। यदि जावास्क्रिप्ट को एक थीम के साथ बंडल किया जा सकता है, तो इसका मतलब है कि एक आवश्यकता मॉड्यूल को एक विषय के साथ बंडल किया जा सकता है, और यदि एक आवश्यकता मॉड्यूल को एक विषय के साथ बंडल किया जा सकता है, जिसके लिए मॉड्यूल को एक विशेष आवश्यकता विन्यास की आवश्यकता हो सकती है।

मेरे भोली धारणा होगा विषयों होगा यह क्षमता है, लेकिन मैं इस एक ही रास्ता या अन्य पर किसी भी प्रलेखन ढूँढने में सक्षम नहीं किया गया है, और एक दोपहर Magento के पर आवश्यक कोड spelunking कर खर्च करने के लिए स्वतंत्र नहीं है requirejs-config.jsसहित फ़ाइल।

Comments

हाय @ आलन। क्या आप कृपया उस पर गौर कर सकते हैं? => magento.stackexchange.com/questions/253507/…

— रोहन हापानी

@RohanHapaniNot वास्तव में इन दिनों M2 विकास कर रहा है, इसलिए मैं सिर के ऊपर नहीं कह सकता।

— एलन स्टॉर्म

Answer 1

आप वास्तव में अपने विषयों मॉड्यूल डायर में एक आवश्यकता-config.js शामिल कर सकते हैं।

समस्या यह है (वास्तव में हमारी फ्रंटेंड टीम के लिए) कि कॉन्फ़िगरेशन को ओवरराइड करने के लिए, लेकिन कॉन्फ़िगरेशन को विस्तारित करने के लिए कोई संभावना नहीं है।

तो, यहाँ एक उदाहरण के लिए Magento_Theme मॉड्यूल को लेने के लिए, यदि आप <theme_base_dir>/Magento_Themedir के तहत एक config -js.js जोड़ते हैं , तो कॉन्फ़िगर को जनरेटेड आवश्यकता-config.js फ़ाइल में जोड़ा जाएगा और साथ ही Magento_Theme मॉड्यूल से कॉन्फ़िगर भी जोड़ा जाएगा।

आपके प्रश्न का उत्तर देने के लिए, मैंने थीम <theme_base_dir>/webdir के तहत और विषयों रूट dir के तहत एक आवश्यकता-config.js जोड़ने का भी प्रयास किया । दोनों ने काम नहीं किया। अद्यतन: वास्तव में नीचे दिए गए उत्तर के अनुसार, यह विषय बेस डायर में रखकर संभव है

तो उत्तर मूल रूप से हां होगा, क्योंकि आप किसी भी मॉड्यूल के तहत किसी भी जेएस आवश्यकता को जोड़ सकते हैं (थीम संबंधित जेएस फाइलें <theme_base_dir>/Magento_Themeडीआईआर के तहत सर्वश्रेष्ठ रखी जा सकती हैं )

हालांकि मैं कहूंगा, किसी भी मॉड्यूल के बाहर एक विषय से संबंधित आवश्यकता-config.js जोड़ने की संभावना होनी चाहिए (शायद आप दिए गए मॉड्यूल को निष्क्रिय कर दें) और यह भी एक मॉड्यूल आवश्यकता- config.js को ओवरराइड करने के लिए संभव होना चाहिए।

दोनों ही संभव नहीं लगते।

=== अद्यतन ===

वास्तव में यह एक विषय विशिष्ट आवश्यकता- config.js के लिए संभव लगता है। नीचे @Gareth Daine का उत्तर देखें

Comments

पुन: "Magento_Theme के तहत" आप अधिक स्पष्ट हो सकते हैं - यह 100% स्पष्ट नहीं है कि किस विषय में फ़ोल्डर और / या आपके संदर्भ में मॉड्यूल है। स्पष्ट अर्थpath/to/theme/files/[etc/Magento_Theme

— एलन स्टॉर्म

मेरा मतलब था कि आपकी थीम में एक्यूट मॉड्यूल ओवरराइड है। इसलिए मॉड्यूल Magento / Theme के लिए आवश्यकता-config.js होगा <theme_base_dir> /Magento_Theme/require-config.js जहां Magento_Theme वास्तविक मॉड्यूल नाम है

— डेविड वेरहोलेन

अच्छा, इसे और अधिक स्पष्ट करने के लिए उत्तर को अपडेट किया

— डेविड वेरहोलन

तो, क्या मैं यह सोचने में सही हूं कि एक आवश्यकता-config.js फ़ाइल ऐप / डिज़ाइन / फ्रंटएंड / <विक्रेता> / <थीम> / वेब / जेएस के तहत काम नहीं करती है?

— गारेथ डाइन

यह डॉक्स में कहता है कि जावास्क्रिप्ट संसाधनों को ऐप / डिज़ाइन / {क्षेत्र} / {विक्रेता} / {थीम} / वेब में सभी पुस्तकालयों के लिए थीम स्तर पर निर्दिष्ट किया जा सकता है।

— गारेथ डाइन

Answer 2

ठीक है, मुझे लगता है कि मैंने इसे हल कर लिया है और मुझे विश्वास है कि प्रलेखन अस्पष्ट है और प्रक्रिया को स्पष्ट करने के लिए अद्यतन करने की आवश्यकता है।

मैंने अपना और निर्देशिका दोनों के लिए क्रमशः अपने विषय के requirejs-config.jsभीतर से स्थानांतरित कर दिया और अब मेरे अन्य आवश्यकताओं में मुख्य के साथ मेरा आवश्यकताएँ कॉन्फ़िगर किया गया है ।web/jswebMagento_Theme<Vendor>/<theme>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" />

Comments

{} इन "js / कंपोनेंट": {} का उपयोग कंपोनेंट के विकल्प को पास करने के लिए किया जाता है

— विन्सेन्ट हॉर्निक्स

Answer 3

यह टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं था, लेकिन बस ध्यान दें कि गैरेथ का जवाब मेरे लिए काफी काम नहीं आया।

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

'घटक' को लपेटना: '*':{}चाल के साथ 'js / घटक' ।

इसके अलावा एक टेम्पलेट फ़ाइल बनाने के बजाय मैंने नीचे दिए गए कोड को सबसे ऊपर जोड़ा 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>

Answer 4

हाँ requirejs-config.js को थीम के रूप में जोड़ा जा सकता है। यह है कि मैं अपने magento2 कस्टम विषय में dotdotdot पुस्तकालय कैसे जोड़ता हूं।

1. पथ के बाद अपने विषय में जेएस लाइब्रेरी को डाउनलोड करें और जोड़ें:

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

2. पालन के रूप में एक विषय की आवश्यकता फ़ाइल बनाएँ और आवश्यकताओं को नव जोड़ा पुस्तकालय पता है।

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

3. अपने विषय के मुख्य जेएस फ़ाइल में जोड़े गए पुस्तकालय का पालन करें:

// 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. और अपनी थीम के जेएस फ़ाइल को अपनी साइट के सिर में शामिल करें:

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

आप magento2 में हर पृष्ठ पर किसी भी बाहरी जेएस लाइब्रेरी और कस्टम फ़ाइल को जोड़ सकते हैं।

Comments

मैंने requirejs-config.jsइस तरह से एक पुस्तकालय को जोड़ने की कोशिश की । हालाँकि, आवश्यकताजेएस तब js/some.library.jsथीम निर्देशिका से मूल से लोड करने का प्रयास करता है ।

— fritzmg

आह, आपको .jsविस्तार छोड़ना होगा ... मूर्खतापूर्ण :)

— fritzmg