Я хотел бы использовать типтап для проекта https://tiptap.dev/установка.
В инструкциях на веб-сайте указано, что после запуска npm install @tiptap/core @tiptap/starter-kit
я могу использовать следующий код для настройки базовой демонстрации.
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
Я хотел бы объединить ядро tiptap и стартовый набор tiptap в один файл JavaScript, который я могу загрузить и использовать на HTML-странице, такой как
<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>
Я попытался использовать webpack для создания одного файла, используя следующий файл 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
},
};
Однако это не работает. Консоль браузера возвращается
Uncaught ReferenceError: Editor is not defined at [some line reference here]
Как я могу связать tiptap и использовать только файл bundle.js на моей HTML-странице и в сценариях?
🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.
Я решил это, используя https://rollupjs.org
Шаг 1. Создайте новый каталог и запустите npm init --yes
внутри
Шаг 2. Установить накопительный пакет из npm
npm install --global rollup @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser
Шаг 3. Установить типтап из npm
npm install @tiptap/core @tiptap/starter-kit
Шаг 4. Добавить файл rollup.config.js
в каталог
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()
]
};
Шаг 5. Добавьте ввод для свертки — index.js
в этом примере.
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
export { Editor, StarterKit }
Шаг 6. Запустите rollup -c
из командной строки в новом созданном вами каталоге.
<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>