Vite के साथ GrapesJS कैसे सेट करें (पूरी गाइड 2026)

GrapesJS के लिए विटे क्यों

Vite GrapesJS एक तेज़ देव सर्वर और एक अनुकूलित उत्पादन बंडल देता है लगभग कोई कॉन्फ़िगरेशन नहीं। GrapesJS एक ईएसएम बिल्ड शिप करता है, इसलिए वाइट इसे संभालता है बॉक्स। यह मार्गदर्शिका GrapesJS स्थापित करती है, सीएसएस और कोर आयात करती है, और आरंभ करती है संपादक।

1. स्थापित करें

npm create vite@latest my-editor
cd my-editor
npm install grapesjs

2. प्रविष्टि फ़ाइल में आरंभ करें

में :src/main.js

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: false,
  components: '<h1>Hello from GrapesJS</h1>',
});

export default editor;

कंटेनर को इसमें index.htmlजोड़ें:

<div id="gjs"></div>
<script type="module" src="/src/main.js"></script>

3. चलाएं और बनाएं

npm run dev     # fast HMR dev server
npm run build   # optimized production bundle

अगर आपको कभी भी बंडलिंग से पहले की चेतावनी दिखाई देती है, तो GrapesJS पिन इन करें vite.config.js:

export default {
  optimizeDeps: { include: ['grapesjs'] },
};

4. एक प्लगइन जोड़ें

import grapesjs from 'grapesjs';
import preset from 'grapesjs-preset-webpage';

grapesjs.init({
  container: '#gjs',
  plugins: [preset],
  pluginsOpts: { 'grapesjs-preset-webpage': {} },
});

समस्या निवारण

यदि संपादक लोड होता है लेकिन अनस्टाइल दिखता है, तो आप अपनी प्रविष्टि फ़ाइल में भूल गएimport 'grapesjs/dist/css/grapes.min.css'। यदि Vite एक निर्भरता प्री-बंडलिंग चेतावनी लॉग करता है, तो इसमें vite.config.jsजोड़ें grapesjs optimizeDeps.include। SSR मोड में Vite का उपयोग करना (SvelteKit, Nuxt, Astro)? GrapesJS को केवल क्लाइंट पर प्रारंभ करें - देव सर्वर सर्वर पर भी रेंडर करता है, और संपादक को DOM की आवश्यकता होती है। उत्पादन के लिए, कुछ विशेष की आवश्यकता नहीं है: vite build पेड़-शेक और बंडल किसी भी ईएसएम निर्भरता की तरह GrapesJS ।

आवश्यक शर्तें

आपको Node.js 18+ और एक Vite प्रोजेक्ट ()npm create vite@latest की आवश्यकता होगी। GrapesJS एक ईएस मॉड्यूल शिप करता है, इसलिए वाइट इसे अनिवार्य रूप से बिना किसी कॉन्फ़िगरेशन के संभालता है - इस गाइड में उन कुछ मामलों को शामिल किया गया है जहां आपको इसे कुहनी मारने की आवश्यकता है।

संपादक में कस्टम ब्लॉक जोड़ें

इसके बाद grapesjs.initब्लॉक मैनेजर के साथ ड्रैग करने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और GJS.Market से प्रीसेट खींचें।

Vite पर एक ढांचे के अंदर GrapesJS का उपयोग करना

यदि आपका Vite ऐप React या Vue का उपयोग करता है, तो GrapesJS केवल-क्लाइंट-प्रभाव में माउंट करें ताकि यह किसी भी एसएसआर पास के दौरान कभी नहीं चलता है और कंटेनर पहले मौजूद है:

// React example
import { useEffect, useRef } from 'react';
import 'grapesjs/dist/css/grapes.min.css';

export default function Editor() {
  const ref = useRef(null);
  useEffect(() => {
    let editor;
    import('grapesjs').then(({ default: grapesjs }) => {
      editor = grapesjs.init({ container: ref.current, height: '100vh' });
    });
    return () => editor?.destroy();
  }, []);
  return <div ref={ref} />;
}

प्रदर्शन युक्तियाँ

GrapesJS गतिशील रूप से आयात करें ()import('grapesjs') इसलिए Vite इसे विभाजित करता है इसका अपना हिस्सा और आपका बाकी ऐप हल्का रहता है। vite build पेड़-हिलाता है और बिना किसी अतिरिक्त काम के उत्पादन के लिए इसे छोटा करता है। यदि आपका केवल एक हिस्सा ऐप संपादक का उपयोग करता है, इसे उस मार्ग के पीछे लोड करता है जिसे इसकी आवश्यकता होती है।

सामान्य त्रुटियों का समस्या निवारण

संपादक अनस्टाइल लोड का मतलब है कि आप भूल गए import 'grapesjs/dist/css/grapes.min.css' आपकी प्रविष्टि में। ए प्री-बंडलिंग चेतावनी को जोड़कर grapesjs तय किया जाता है optimizeDeps.include में । vite.config.jsएक एसएसआर "दस्तावेज़ परिभाषित नहीं है" (SvelteKit/Nuxt/Astro on Vite) का अर्थ है कि आपको यह करना होगा संपादक को केवल क्लाइंट पर प्रारंभ करें।

GrapesJS के लिए Vite बनाम Webpack

Vite निचला-कॉन्फ़िगरेशन विकल्प है - यह ESM बिल्ड और CSS आयात को संभालता है बॉक्स और आपको एक तेज़ देव सर्वर देता है। वेबपैक के लिए केवल तभी पहुंचें जब कोई मौजूदा प्रोजेक्ट हो पहले से ही इस पर मानकीकृत है; GrapesJS सेटअप स्वयं या तो समान रूप से सरल है।

अगले चरण

संबंधित GrapesJS + Svelte देखें और GrapesJS + React गाइड के लिए, ब्राउज़ करें GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

मैं Vite में GrapesJS शैलियों को कैसे आयात करूं?

अपनी प्रविष्टि फ़ाइल में आयात करें 'grapesjs/dist/css/grapes.min.css' — Vite इसे देव में इंजेक्ट करता है और इसे उत्पादन के लिए बंडल करता है।

क्या GrapesJS विशेष Vite कॉन्फ़िगरेशन की आवश्यकता है?

आमतौर पर नहीं। यदि आप प्री-बंडलिंग समस्या से ग्रस्त हैं, तो इसमें जोड़ें grapesjs optimizeDeps.include.

क्या मैं Vite के साथ प्लगइन्स का उपयोग कर सकता हूँ?

हाँ - एनपीएम के माध्यम से स्थापित करें, आयात करें, और इसे सरणी में पास plugins करें grapesjs.init.