在 Docusaurus 网站 MDX 中嵌入自定义 Monaco 编辑器答案

【问题标题】：Embed a custom Monaco Editor in a Docusaurus website MDX在 Docusaurus 网站 MDX 中嵌入自定义 Monaco 编辑器
【发布时间】：2020-05-06 08:43:15
【问题描述】：

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

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

首先，我将这些包添加到我的 Docusaurus 网站的 package.json，然后我尝试制作一个组件 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'

有人知道怎么做吗？

【问题讨论】：

标签： javascript webpack monaco-editor docusaurus

【解决方案1】：

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

您可以尝试在Hermes website 上引用此Pull Request，它将摩纳哥编辑器添加到网站，您可以通过单击“游乐场”来尝试编辑器。

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

【讨论】：

我不知道我们可以接受并投票赞成一个答案......只是投票赞成。