2

我有一个使用Docusaurus 2构建的网站。

现在，我想将Monaco Editor嵌入到一个页面中，并且我将向该 Monaco Editor 注册一种语言。我可以使用react-monaco-editor,monaco-languageclient和vscode-languageserver在一个新的 React 网站中实现这一点，但我不知道如何将它添加到 Docusaurus。

首先，我将这些包添加到package.json我的 Docusaurus 网站，然后我尝试制作一个组件App，以便我可以添加<App />到 Docusaurus 页面。

在组件的一个文件中，我有：

import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

在组件的另一个文件中，我有：

import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";

然后我得到了

./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

和

./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'

在此处输入图像描述

有谁知道该怎么做才能让它工作？

4

1 回答 1

4

似乎这里的问题是关于 webpack 无法加载 CSS。你需要通过插件为 webpack 添加 CSS 加载器。

您可以尝试参考Hermes 网站上的此Pull Request，它将 Monaco 编辑器添加到网站，您可以通过单击“Playground”来尝试编辑器。

在这里使用monaco-editor-webpack-plugin可能会更好，因为它可以帮助您添加必要的加载器，例如您当前设置中缺少的 CSS 加载器。

于 2020-05-06T10:00:20.370 回答