我正在对这个问题进行一个更新的回答,因为自上次回答以来,一些ProseMirror和Rollup捆绑包已经升级。
在经过将近3天的搜索后,以下是对我有效的步骤。
在您的应用程序根目录中,初始化node_modules和package.json:
npm init
安装我们将需要用于main.js文件和rollup.config.js文件的ProseMirror和Rollup基本捆绑包:
npm install prosemirror-view prosemirror-model prosemirror-state prosemirror-transform prosemirror-schema-basic @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace @rollup/plugin-terser --save-dev
在您的package.json中,在描述之后添加以下行:
"main": "dist/prosemirror-bundle.min.js",
"module": "public/js/main.js",
"type": "module",
在您的应用程序根目录中创建一个名为rollup.config.js的文件(位于package.json所在的位置),并使用以下行填充它:
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',
output: {
file: 'dist/prosemirror-bundle.min.js',
format: 'umd',
name: 'ProseMirror'
},
plugins: [
resolve({
browser: true,
preferBuiltins: false
}),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
preventAssignment: true
}),
(process.env.NODE_ENV === 'production' && terser())
]
};
创建 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 install
使用rollup配置文件构建您的代码,使用以下命令:
rollup -c
您可以在此命令的末尾添加--watch,以便在编码时继续监视输入文件(main.js)中的更改,如下所示:
rollup -c --watch
如果您不再处于开发环境中,请运行以下命令,它将缩小您的代码:
NODE_ENV=production rollup -c rollup.config.js
然后您应该在html页面中实现ProseMirror。
希望这能帮助到某些人。