我想建立一个使用所见即所得的网站，例如 ProseMirror。他们的文档有点清楚，构建所有东西并不是一个简单的过程，因为他们首先关注开发的其他部分。但是，它们确实提供了一个可以克隆和运行的项目。
但是，我不确定如何实际运行此示例。
我在我的活动 MAMP 目录中创建了一个新文件夹，并且已经完成npm install了 package.json 中的所有项目。然后我已经运行npm run build，以便项目现在构建到distpackage.json 中默认指定的文件夹中。
但是，我如何真正让它在浏览器中运行？如果我去浏览器，它只是显示我的文件和文档列表，而不是实际的应用程序。
我也尝试过运行npm start，但 package.json 中没有任何链接命令。我确实看到这是使用 rollup.js。我以前没用过，也许有一些命令？
我为朋友创建了本指南。希望这可以帮助您和任何寻找相同答案的人。它并不完美，但可以让您启动并运行。
ProseMirror 是一款基于 contentEditable 的表现良好的丰富语义内容编辑器，支持协作编辑和自定义文档模式。
问题是关于如何使用演示示例将其从无到有的设置的文档是不存在的。所有文档都假定您已设置并正常工作。本指南旨在帮助您进入“hello world”阶段
• 第一次安装汇总。请按照此处的说明进行操作。您现在应该在您的计算机上拥有该项目，当您在浏览器中打开 html 文件时，会看到“hello world”样式屏幕。
• cd 进入 learn-rollup 项目文件夹和 npm install prosemirror 模块包：
• 在 learn-rollup index.html 文件中添加以下 html html 代码以添加到 learn-rollup index.html
• 创建 src/scripts/main.js 的副本并将其重命名为 mainbackup.js。
• 现在将 main.js 中的所有内容替换为 prosemirror.net第一个示例中的代码。
• 运行 \node_module.bin\rollup -c
• 重新加载.html 以查看prosemiror 工作。
没有“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})
相反，您可以查看提供复制/粘贴编辑器并且可以合并到您的项目中的包装库。
使用 ProseMirror 核心库需要您阅读文档 - 有一个概述部分：http ://prosemirror.net/docs/guide/#intro和一个参考部分： http: //prosemirror.net/docs/ref/ #top.intro
要使用汇总启动并运行最小编辑器，请先安装汇总：
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()]
}
安装 prosemiror 基础库：
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将 prosemiror-view 包中的样式包含并可选地包含到您的 HTML 文件中并享受：
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
我经历了@Rob 的方法，几乎成功了。只有一件事，在完成所有步骤后，我遇到了一个错误（见下文）。
代码来自官方的第一个示例。
不知道为什么会这样，我必须手动放一个<div id="content"></div>之后<div id="editor"></div>才能开始。
但是不应该<div id="content"></div>自动添加吗？@Rob 或者官方的第一个例子没有提到你必须添加这个 div，不知道出了什么问题。
