我如何捆绑一个 npm 包，以便我可以在脚本中从中导入对象？

Question

我想在一个项目中使用 tiptap https://tiptap.dev/installation。

网站上的说明说运行 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
  },
};

但这不起作用。浏览器控制台 returns

Uncaught ReferenceError: Editor is not defined at [some line reference here]

如何捆绑 tiptap 并在我的 HTML 页面和脚本中仅使用 bundle.js 文件？

Answer 1

我用 https://rollupjs.org

解决了这个问题

步骤

步骤1.新建一个目录并在运行npm init --yes里面

步骤 2. 从 npm 安装 rollup

npm install --global rollup @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser

步骤 3. 从 npm 安装 tiptap

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>

我如何捆绑一个 npm 包，以便我可以在脚本中从中导入对象？

How can I bundle up an npm package so I can import objects from it in a script?

javascript

webpack

tiptap

步骤

用法示例