我经历了@Rob的方法，几乎成功了。只有一件事，在完成所有步骤后，我遇到了一个错误（见下文）。

代码来自官方的第一个示例。

不知道为什么会发生这种情况，我必须手动将<div id="content"></div>放在<div id="editor"></div>之后才能开始。
但是<div id="content"></div>不应该自动添加吗？@Rob或者官方的第一个例子没有提到你必须添加这个div，不知道出了什么问题。

我对这个问题做了一个***更新***的回答，因为自从上次回答之后，一些ProseMirror和Rollup包已经升级了。
以下是在网上搜索了近3天后对我起作用的步骤。

在应用的根目录中，初始化node_modules和package.json：

npm初始化

安装main.js文件和rollup.config.js文件所需的ProseMirror和Rollup基本包：

npm安装进程镜像-查看进程镜像-模型进程镜像-状态进程镜像-转换进程镜像-模式-基本@汇总/插件-公用js @汇总/插件-节点-解析@汇总/插件-替换@汇总/插件-terser--保存-开发

在您的package.json中，在描述后添加以下行：

“主”：“远端/进程镜像包.最小. js”，
“模块”：“公共/js/main. js”，
“类型”：“模块”，

在应用程序的根目录（package.json所在的位置）中创建一个名为rollup.config.js的文件，并使用以下行填充该文件：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';

export default {
    input: 'public/js/main.js', // Entry point for the bundle
    output: {
        file: 'dist/prosemirror-bundle.min.js', // Output file path and name
        format: 'umd', // Format of the output bundle (Universal Module Definition)
        name: 'ProseMirror' // Name of the exported global variable
    },
    plugins: [
        resolve({
            browser: true, // Resolve modules for browser environment
            preferBuiltins: false // Do not prefer built-in modules over local modules
        }),
        commonjs(), // Convert CommonJS modules to ES6
        replace({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), // Replace NODE_ENV variable with 'development' (or current environment)
            preventAssignment: true // Prevent replacement of variable assignment
        }),
        (process.env.NODE_ENV === 'production' && terser()) // If in production environment, minify the code
    ]
};

创建main.js文件（我的文件在public/js中，正如我在package.json和rollup.config.js中提到的那样），并记下以下行：

import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';

window.addEventListener('DOMContentLoaded', (event) => {
    console.log("2");

    const editorNode = document.getElementById('mad_interactive_editor');

    const state = EditorState.create({
      schema,
    });
    
    const view = new EditorView(editorNode, {
      state,
    });
});

创建一个html文件并在其中添加一个div：

<div id="mad_interactive_editor"></div>

**使用依赖项更新package.json：**


npm安装

使用汇总配置文件和以下命令生成代码：

汇总-c

您可以在此命令的末尾添加-watch，以便在编写如下代码时监视输入文件（main.js）中的更改：

汇总-c -手表

如果您不再处于开发环境中，请运行以下命令，它将缩小您的代码：

NODE_ENV=生产汇总-c rollup.config.js

您应该在html页面中实现ProseMirror。

希望这能帮到什么人。

我为一个朋友创建了这个指南。希望它能帮助你和任何寻找相同答案的人。它并不完美，但能让你开始运行。
ProseMirror是一个基于contentEditable的行为良好的富语义内容编辑器，支持协作编辑和自定义文档模式。
问题是关于如何使用演示示例将其从无到有设置为hello world的文档是不存在的。所有文档都假设您已经设置并运行了它。本指南旨在帮助您进入“hello world”阶段
·第一次安装汇总。按照here的说明操作。现在，您的计算机上应该有来自this的项目，当您在浏览器中打开html文件时，会看到“hello world”风格的屏幕。
· cd到learn-rollup项目文件夹并npm安装prosemirror模块包：
1.伪镜像状态。
1.伪镜像。
1.拟似误差模型
1.韵律镜像-图式-基本
1.拟镜像-模式-表
1.拟镜像-示例-设置
·在学习汇总index.html文件中添加以下html html code to add to learn-rollup index.html
1.指向css文件的链接

1. body中id=editor的标记
   learn-rollup folder structure
   ·创建src/scripts/main.js的副本并将其重命名为mainbackup.js。
   ·现在用www.example.com first example中的代码替换main.js中的所有内容prosemirror.net。
   ·运行\节点模块.bin\汇总-c
   ·重新加载.html以查看prosemirror的工作情况。

没有“Hello World”示例说明如何使用prosemirror库本身-问题中链接到的基本示例仍然需要“使用”，如最接近“Hello World”示例的内容所示：https://prosemirror.net/examples/basic/-从文档中看起来可以用更简单的方式表示：

import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"

let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})

相反，您可以查看提供复制/粘贴编辑器并可以合并到项目中的 Package 器库。
使用ProseMirror核心库需要阅读文档-其中有概述部分：http：//prosemirror.net/docs/guide/#intro，以及参考部分：http://prosemirror.net/docs/ref/#top.intro

如果转到the basic example，您将看到一些使用您链接到的示例项目的代码。
这个项目需要更好的记录，恕我直言。我不认为它应该是一个运行散文镜像的例子，但更多的是一个将所有不同部分连接在一起的例子。
ProseMirror的所有部分都在NPM上，可以用这种方式安装，甚至示例项目也是如此。从NPM安装导入，然后将代码复制到index.js或HTML文件中，屏幕上应该有一个基本的编辑器。学习基本的示例repo可以更好地理解这些部分是如何组合在一起的。

要使用Rollup启动并运行最小编辑器，请先安装Rollup：

npm i -g rollup

安装汇总解析插件：

npm i @rollup/plugin-node-resolve

然后将以下内容添加到rollup.config.js文件中：

import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'main.js',
  output: {
    file: 'build.js',
    format: 'iife'
  },
  plugins: [resolve()]
}

安装prosemirror基本库：

npm i prosemirror-schema-basic prosemirror-state prosemirror-view

创建包含以下内容的main.js文件：

import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'

let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})

构建您的编辑器（到build.js）：

rollup -c

最后，将build.js和prosemirror-view包中的可选样式包含到HTML文件中，并享受：

<html>
  <body>
    <div id="editor"></div>
    <script src="build.js"></script>
  </body>
</html>