मैं बिल्ड चरणों के बिना एक बुनियादी वर्डप्रेस क्लासिक थीम पर काम करने की कोशिश कर रहा हूं जिसे मैं भविष्य में क्लाइंट साइट विकसित करने के लिए स्टार्टर थीम के रूप में उपयोग कर सकता हूं। इस लेख को लिखने के समय, मैं कोई फ्रीलांस काम नहीं कर रहा हूं क्योंकि मैं एक वेब एजेंसी के लिए काम कर रहा हूं और हम जिन साइटों का निर्माण कर रहे हैं उनमें निर्माण चरण शामिल हैं। इसलिए मैंने सोचा कि मैं वर्डप्रेस थीम में इंपोर्टमैप का उपयोग करने के तरीके पर एक संक्षिप्त ट्यूटोरियल लिखूं।

कैरियर ट्रैकर मेरा एक मौजूदा साइड प्रोजेक्ट है जो पहले से ही बिना बिल्ड स्टेप के इंपोर्टमैप का उपयोग करता है, लेकिन यह एक शुद्ध जावास्क्रिप्ट ऐप है।

आइए देखें कि हम इसे वर्डप्रेस की दुनिया में कैसे कर सकते हैं।

एनक्यू मॉड्यूल स्क्रिप्ट

मेरे थीम फ़ंक्शन.php में, मैं अपनी जावास्क्रिप्ट फ़ाइल ऐप.जेएस को वर्डप्रेस से wp_enqueue_script_module फ़ंक्शन के साथ एक मॉड्यूल स्क्रिप्ट के रूप में सूचीबद्ध करता हूं।

wp_enqueue_script_module( 'frontend-scripts', GEARUP_THEME_URL . '/static/js/app.js', [], GEARUP_THEME_VERSION, true );

यह फ्रंटएंड पर नीचे दिए गए स्क्रिप्ट टैग पर आउटपुट करेगा।

मेरी जावास्क्रिप्ट फ़ाइलें थीम फ़ोल्डर के स्थिर फ़ोल्डर में रखी गई हैं।

static
├── css
│   ├── app.css
│   ├── global.css
│   ├── reset.css
│   ├── utils.css
│   └── variables.css
└── js
    ├── admin.js
    ├── app.js
    ├── components
    │   └── menu.js
    └── utils
        └── index.js

जैसा कि आप इस फ़ाइल संरचना में देख सकते हैं, मुझे यूटिल्स फ़ोल्डर से इंडेक्स.जेएस और कंपोनेंट्स फ़ोल्डर से मेनू.जेएस को अपने ऐप.जेएस में आयात करने की आवश्यकता है। इंपोर्टमैप जोड़ने से पहले, आइए देखें कि जब मैं उन दो फ़ाइलों को अपने ऐप.जेएस में आयात करता हूं तो यह कैसा दिखता है।

// Utils
import { onDocumentReady } from './utils/index.js';
// Components
import Menu from './components/menu.js';

लेकिन मेरे मन में इस तरह की फ़ाइलें आयात करना है।

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

एक बार जब मैं इस प्रारूप में आयात बदल देता हूं, तो ब्राउज़र इस त्रुटि को कंसोल में फेंक देगा।

Uncaught TypeError: Failed to resolve module specifier "utils/index.js". Relative references must start with either "/", "./", or "../".

इंपोर्टमैप बचाव के लिए आता है

इसे अपने टेम्प्लेट HTML हेड टैग के अंदर जोड़ें। आपको इस भाग को php में प्रस्तुत करने की आवश्यकता हो सकती है ताकि आप स्थैतिक फ़ोल्डर में डायनामिक यूआरएल प्राप्त कर सकें।

इसे मेरे ऐप.जेएस में उपयोग करें

अब इंपोर्टमैप सेटअप के साथ, भले ही यह एक नोड वातावरण नहीं है, हम अभी भी उस संरचना के तहत फ़ाइलें आयात कर सकते हैं जिससे हम परिचित हैं। ध्यान रखें कि फ़ाइलें .js से समाप्त होनी चाहिए।

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

यदि मैं अपने utils/index.js से .js को utils/index में हटा देता हूं, तो ब्राउज़र इस त्रुटि को कंसोल में लॉग कर देगा।

GET http://test.local/wp-content/themes/GearUp/static/js/utils/index net::ERR_ABORTED 404 (Not Found)

सीडीएन से फ़ाइलें हमारे आयात मानचित्र में जोड़ें

मैं अपने वेब घटक संग्रह के लिए एक सीडीएन लिंक लेता हूं और इसे अपने आयात मानचित्र में जोड़ता हूं। एक बार जुड़ने के बाद, अब हम वेब घटकों को इस तरह से ऐप.जेएस में आयात कर सकते हैं। क्या यह सुंदर नहीं है?

import "ccw/side-nav/index.js";
import "ccw/side-nav-item/index.js";
import "ccw/icon/index.js";
import "ccw/form-layout/index.js";
import "ccw/text-field/index.js";
import "ccw/email-field/index.js";
import "ccw/date-picker/index.js";
import "ccw/option/index.js";
import "ccw/select/index.js";

वेब घटकों के लिए, स्पष्ट रूप से मैं इसे अपने वर्डप्रेस थीम में उपयोग नहीं कर रहा हूं, लेकिन आप साइड प्रोजेक्ट कैरियर ट्रैकर की जांच कर सकते हैं जिसका मैंने शुरुआत में उल्लेख किया था यह देखने के लिए कि वे कैसे काम करते हैं।