परिचय
GrapesJS ड्रैग-एंड-ड्रॉप वेब बिल्डर बनाने के लिए सबसे लचीले ओपन-सोर्स फ्रेमवर्क में से एक है। इसकी असली शक्ति इसके प्लगइन पारिस्थितिकी तंत्र में निहित है, जो डेवलपर्स को नए ब्लॉक, लक्षणों, पैनल, कमांड और एकीकरण के साथ संपादक का विस्तार करने की अनुमति देता है।
यह लेख आधिकारिक GrapesJS CLI का उपयोग करके स्क्रैच से GrapesJS प्लगइन बनाने के तरीके के बारे में एक पूर्ण, चरण-दर-चरण मार्गदर्शिका प्रदान करता है। यह डेवलपर्स, एजेंसियों और कंपनियों के लिए डिज़ाइन किया गया है जो कस्टम समाधान बनाना चाहते हैं या बढ़ते GrapesJS समुदाय में योगदान करना चाहते हैं।
इस गाइड से मुख्य टेकअवे:
- GrapesJS और GrapesJS सीएलआई क्या हैं
- सीएलआई के साथ एक नया प्लगइन प्रोजेक्ट कैसे मचान करें
- पहला प्लगइन तर्क लिखना (ब्लॉक, लक्षण, आदेश)
- एक देव सर्वर चलाना और उत्पादन-तैयार कोड बनाना
- मुद्रीकरण के अवसर
GrapesJS क्या है?
GrapesJS 2016 में विकसित एक ओपन-सोर्स, एमआईटी-लाइसेंस प्राप्त वेब बिल्डर फ्रेमवर्क है। इसका व्यापक रूप से उपयोग किया जाता है:
- वेबसाइट बनाने वाले
- ईमेल टेम्पलेट संपादक
- पृष्ठ और दस्तावेज़ डिज़ाइन उपकरण
- SaaS उत्पादों में ड्रैग-एंड-ड्रॉप इंटरफेस
मुख्य विशेषताएं:
- ड्रैग-एंड-ड्रॉप ब्लॉक मैनेजर
- कस्टम लक्षण और शैली प्रणाली
- डिवाइस पूर्वावलोकन मोड (डेस्कटॉप, टैबलेट, मोबाइल)
- परत प्रबंधक और शैली पैनल
- पूरी तरह से एक्स्टेंसिबल प्लगइन सिस्टम
👉 प्लगइन्स आवश्यक हैं क्योंकि वे डेवलपर्स को GrapesJS कोर को फूले बिना विशेष सुविधाएँ बनाने की अनुमति देते हैं।
GrapesJS सीएलआई क्या है?
GrapesJS सीएलआई प्लगइन विकास के लिए आधिकारिक कमांड-लाइन इंटरफ़ेस है। यह प्रदान करके बिल्ड सिस्टम स्थापित करने की जटिलता को समाप्त करता है:
- मचान → एक कमांड के साथ उपयोग के लिए तैयार प्लगइन प्रोजेक्ट उत्पन्न करें
- विकास सर्वर → प्लगइन को चलाएं और परीक्षण करें GrapesJS
- उत्पादन निर्माण → आउटपुट को छोटा किया गया, वितरण के लिए अनुकूलित कोड
संक्षेप में, GrapesJS सीएलआई प्लगइन्स को तुरंत विकसित करना शुरू करने के लिए आवश्यक सब कुछ प्रदान करता है।
चरण 1: GrapesJS सीएलआई के साथ एक प्लगइन प्रारंभ करें
grapesjs-my-plugin नाम का प्लगइन बनाने के लिए:
एक नया फ़ोल्डर बनाएँ:
mkdir grapesjs-my-plugin cd grapesjs-my-plugin
एनपीएम आरंभ करें:
एनपीएम इनिट -वाई
सीएलआई स्थापित करें:
npm install --save-dev grapesjs-cli
प्लगइन प्रोजेक्ट को मचान बनाएं:
एनपीएक्स grapesjs-सीएलआई इनिट
यह src/index.js पर एक प्रविष्टि फ़ाइल के साथ एक पूर्ण परियोजना संरचना उत्पन्न करता है।
विकास सर्वर चलाएँ:
एनपीएक्स grapesjs-सीएलआई सर्व
प्लगइन http://localhost:8080 पर GrapesJS अंदर लोड होगा।
उत्पादन के लिए निर्माण:
एनपीएक्स grapesjs-सीएलआई बिल्ड
संकलित प्लगइन डिस्ट/फ़ोल्डर में उपलब्ध होगा।
चरण 2: परियोजना संरचना
सीएलआई परियोजना GrapesJS मचान में शामिल हैं:
grapesjs-मेरा-प्लगइन/
├── src/ │ └��─ index.js ← मुख्य प्लगइन प्रविष्टि फ़ाइल ├── dist/← संकलित वितरण फ़ाइलें├ ── package.json├ ── README.md ├── babel.config.js ├── webpack.config.js ← वैकल्पिक कस्टम कॉन्फ़िगरेशन
- src/index.js → में प्लगइन लॉजिक होता है
- → उत्पादन-तैयार बिल्ड आउटपुट
- README.md → दस्तावेज़ीकरण टेम्पलेट
- webpack.config.js → डिफ़ॉल्ट बिल्ड कॉन्फ़िगरेशन के अनुकूलन की अनुमति देता है
चरण 3: प्लगइन लॉजिक लिखना
src/index.js में, प्लगइन सुविधाएँ जोड़ें।
उदाहरण: एक ब्लॉक जोड़ना
निर्यात डिफ़ॉल्ट (संपादक, ऑप्ट्स = {}) => { const bm = संपादक। ब्लॉकमैनेजर;
bm.add('हैलो-ब्लॉक', {
लेबल: 'हैलो ब्लॉक',
श्रेणी: 'बेसिक', सामग्री
: '<div क्लास = "हैलो-ब्लॉक">प्लगइन से नमस्ते!</div>',
});};
उदाहरण: एक कस्टम विशेषता जोड़ना
संपादक। TraitManager.addType('अपरकेस', {
createInput() {
const el = document.createElement ('इनपुट');
el.type = 'चेकबॉक्स';
रिटर्न el;
},
onUpdate ({ elInput, घटक }) {
स्थिरांक चेक = elInput.checked;
component.addStyle({ 'टेक्स्ट-ट्रांसफ़ॉर्म': चेक किया गया? 'अपरकेस': 'कोई नहीं' });
}
});
उदाहरण: एक कमांड और पैनल बटन जोड़ना
संपादक। कमांड्स.ऐड ('कहो-हैलो', {
रन (संपादक) {
अलर्ट (' GrapesJS प्लगइन से नमस्ते!');
}
});
संपादक। Panels.addButton('विकल्प', {
आईडी: 'say-hello-btn',
className: 'fa fa-bell', command
: 'say-hello',
attributes: { title: 'नमस्ते कहो' },
persist: true,}
);
चरण 4: चल रहा है और डिबगिंग
एनपीएक्स grapesjs-cli सर्व का उपयोग करते समय:
- editor.on ('इवेंट-नाम', कॉलबैक) के साथ घटनाओं की निगरानी करें
- editor.getSelected() के साथ चयनित घटकों का निरीक्षण करें
- लक्षणों और शैली अपडेट का परीक्षण सीधे लाइव संपादक में करें
चरण 5: निर्माण और प्रकाशन
एक उत्पादन बिल्ड बनाएं:
एनपीएक्स grapesjs-सीएलआई बिल्ड
README.md को इसके साथ पूरा करें:
- प्लगइन विवरण
- कॉन्फ़िगरेशन विकल्प (ऑप्ट)
- उदाहरण उपयोग स्निपेट
- डेमो लिंक
एनपीएम पर प्रकाशित करें:
एनपीएम पब्लिश
पर साझा करें:
- GJS.Market
- GitHub रिपॉजिटरी
- ओपन-सोर्स डेवलपर समुदाय
चरण 6: एसईओ और वितरण रणनीति
अनुशंसित कार्रवाई:
- उपयोग के उदाहरणों के साथ तकनीकी ब्लॉग पोस्ट प्रकाशित करें
- Dev.to, मीडियम, हैशनोड पर ट्यूटोरियल लिखें
- YouTube पर वीडियो वॉकथ्रू रिकॉर्ड करें
- Reddit r/webdev और हैकर समाचार को सबमिट करें
- संबंधित ओपन-सोर्स प्रोजेक्ट्स से बैकलिंक्स बनाएँ
चरण 7: मुद्रीकरण के अवसर
कंपनियां और डेवलपर कर सकते हैं:
- उन्नत सुविधाओं के साथ एक प्रो संस्करण जारी करें
- SaaS और एजेंसियों के लिए कस्टम एकीकरण प्रदान करें
- GJS.Market पर प्लगइन्स बेचें
- सशुल्क सहायता, रखरखाव या परामर्श प्रदान करें
चाबी छीन लेना
- GrapesJS एक शक्तिशाली ढांचा है, लेकिन प्लगइन्स इसे वास्तव में लचीला बनाते हैं।
- GrapesJS सीएलआई प्लगइन्स को मचान बनाने, परोसने और बनाने का एक आसान तरीका प्रदान करता है।
- सरल ब्लॉक या लक्षणों से शुरू करें, फिर कार्यक्षमता का विस्तार करें।
- प्लगइन अपनाने के लिए दस्तावेज़ीकरण और एसईओ महत्वपूर्ण हैं।
- व्यावसायिक उपयोग के मामलों के लिए मुद्रीकरण विकल्प मौजूद हैं।
निष्कर्ष
GrapesJS सीएलआई के साथ, प्लगइन्स बनाना एक सुव्यवस्थित प्रक्रिया बन जाती है: प्रोजेक्ट को मचान बनाएं, तर्क जोड़ें, लाइव सर्वर चलाएं और उत्पादन-तैयार फ़ाइलें बनाएं।
प्लगइन्स न केवल GrapesJS बढ़ाते हैं बल्कि व्यवसायों के लिए नवाचार करने, दृश्यता बढ़ाने और राजस्व उत्पन्न करने के अवसर भी खोलते हैं।
👉 चलाना:
एनपीएक्स grapesjs-सीएलआई इनिट
आज ही अपना खुद का GrapesJS प्लगइन बनाना शुरू करें।