Как мне связать пакет npm, чтобы я мог импортировать объекты из него в скрипт?

Я хотел бы использовать типтап для проекта 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 поддерживает модульную структуру, что способствует организации кода на больших проектах.


44
1

Ответ:

Решено

Я решил это, используя 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>