Me gustaría usar tiptap para un proyecto https://tiptap.dev/installation .
Las instrucciones en el sitio web indican que después de ejecutar npm install @tiptap/core @tiptap/starter-kit , puedo usar el siguiente código para configurar una demostración básica
import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' new Editor({ element: document.querySelector('.element'), extensions: [ StarterKit, ], content: '<p>Hello World!</p>', })Me gustaría envolver tiptap core y tiptap starter-kit en un solo archivo JavaScript que pueda cargar y usar en una página HTML como
<html> <body> <div class="element"></div> <script src="bundle.js"></script> <script> new Editor({ element: document.querySelector('.element'), extensions: [ StarterKit, ], content: '<p>Hello World!</p>', }) </script> </body> </html> He intentado usar webpack para crear un solo archivo usando el siguiente archivo webpack.config.js
const path = require('path'); module.exports = { entry: ['@tiptap/core', '@tiptap/starter-kit'], output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', libraryTarget: 'umd', // make the bundle export }, };Sin embargo, esto no funciona. Vuelve la consola del navegador
Uncaught ReferenceError: Editor is not defined at [some line reference here]¿Cómo puedo agrupar tiptap y usar solo el archivo bundle.js en mi página HTML y scripts?
Resolví esto usando https://rollupjs.org
Paso 1. Cree un nuevo directorio y ejecute npm init --yes inside
Paso 2. Instale el paquete acumulativo desde npm
npm install --global rollup @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser
Paso 3. Instalar tiptap desde npm
npm install @tiptap/core @tiptap/starter-kit
Paso 4. Agregue un archivo rollup.config.js al directorio
import replace from "@rollup/plugin-replace"; import { terser } from "rollup-plugin-terser"; export default { input: "index.js", output: [ { file: "tiptap-rollup.js", format: "iife", name: "window", extend: true }, { file: "tiptap-rollup.min.js", format: "iife", name: "window", extend: true, plugins: [ terser() ] } ], plugins: [ replace({ "process.env.NODE_ENV": "'production'" }), nodeResolve() ] }; Paso 5. Agregue la entrada para resumen: index.js en este ejemplo.
import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' export { Editor, StarterKit } Paso 6. Ejecute rollup -c desde la línea de comando en el nuevo directorio que creó.
<html> <body> <div class="element"></div> <script src="tiptap-rollup.min.js"></script> <script> new Editor({ element: document.querySelector('.element'), extensions: [ StarterKit, ], content: '<p>Hello World!</p>', }) </script> </body> </html>