Wie man GrapesJS mit Vite einrichtet (vollständiger Leitfaden 2026)

Warum Vite for GrapesJS

Vite bietet GrapesJS einen schnellen Dev-Server und ein optimiertes Produktionspaket mit Fast keine Konfiguration. GrapesJS liefert einen ESM-Build aus, also übernimmt Vite das aus Die Schachtel. Dieser Guide installiert GrapesJS, importiert CSS und Core und initialisiert Der Lektor.

1. Installation

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

2. Initialisieren Sie in der Eintragsdatei

In 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;

Füge den Behälter hinzu:index.html

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

3. Laufen und bauen

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

Wenn du jemals eine Vor-Bündel-Warnung siehst, pinne GrapesJS an vite.config.js:

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

4. Fügen Sie ein Plugin hinzu

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

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

Fehlerbehebung

Wenn der Editor lädt, aber ungestylt aussieht, hast du es in deiner Eintragsdatei vergessenimport 'grapesjs/dist/css/grapes.min.css'. Wenn Vite eine Warnung für die Abhängigkeit vor dem Bündeln meldet, füge in optimizeDeps.include vite.config.js. hinzu.grapesjs Vite im SSR-Modus verwenden (SvelteKit, Nuxt, Astro)? Initialisiere GrapesJS nur auf dem Client – der Dev-Server rendert auch auf dem Server, und der Editor benötigt den DOM. Für die Produktion ist nichts Besonderes erforderlich: vite build Tree-Shakes und Bündelt GrapesJS wie jede ESM-Abhängigkeit.

Voraussetzungen

Du brauchst Node.js 18+ und ein Vite-Projekt (npm create vite@latest). GrapesJS liefert ein ES-Modul aus, sodass Vite es praktisch ohne Konfiguration bewältigt – Dieser Leitfaden behandelt die wenigen Fälle, in denen du ihn anstoßen musst.

Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu

Registrieren Sie ziehbare Blöcke mit dem Blockmanager nach grapesjs.init:

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

Ziehe fertige Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Set.

Verwendung von GrapesJS innerhalb eines Frameworks auf Vite

Wenn deine Vite-App React oder Vue verwendet, mounte GrapesJS in einem Client-Only-Effekt, damit es während eines SSR-Durchlaufs wird nie ausgeführt und der Container existiert zuerst:

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

Aufführungstipps

Importiere GrapesJS dynamisch (import('grapesjs')), sodass Vite es in Teile aufteilt Es ist ein eigener Chunk und der Rest deiner App bleibt leicht. vite build Tree-Shake und Minifiziert es für die Produktion, ohne zusätzliche Arbeit. Wenn nur ein Teil deiner Die App nutzt den Editor, lädt sie hinter der Route, die sie benötigt.

Fehlerbehebung häufiger Fehler

Der Editor lädt unstilisiert bedeutet, dass du es vergessen hast import 'grapesjs/dist/css/grapes.min.css' In deinem Eintrag. A Die Vor-Bündelungswarnung wird durch Hinzufügen grapesjs zu optimizeDeps.include in vite.config.js. Ein SSR "Dokument ist nicht definiert" (SvelteKit/Nuxt/Astro auf Vite) bedeutet, dass du es unbedingt tun musst Initialisiere den Editor nur im Client.

Vite vs Webpack für GrapesJS

Vite ist die Option mit niedrigerer Konfiguration – es übernimmt den ESM-Build und CSS-Import aus dem Box und bietet dir einen schnellen Dev-Server. Greifen Sie nur zu Webpack, wenn es ein bestehendes Projekt ist standardisiert es bereits darauf; das GrapesJS-Setup selbst ist bei beiden gleichermaßen einfach.

Nächste Schritte

Siehe die verwandten GrapesJS + Svelte und GrapesJS + React Guides, durchsuchen Sie die GrapesJS-Marktplatz oder starte mit dem GJS.Market-Startseite.

FAQ

Wie importiere ich GrapesJS-Stile in Vite?

Importieren Sie 'grapesjs/dist/css/grapes.min.css' in Ihre Eintragsdatei — Vite Es wird in die Entwicklung eingefügt und für die Produktion gebündelt.

Braucht GrapesJS eine spezielle Vite-Konfiguration?

Meistens nicht. Wenn Sie auf ein Problem mit der Vorbündelung stoßen, fügen grapesjs Sie mehr hinzu optimizeDeps.include.

Kann ich Plugins mit Vite verwenden?

Ja – installiere über npm, importiere und übergebe es im Array plugins von grapesjs.init.