我如何在电子应用程序中使用这个摩纳哥图书馆？

Question

如何在我的电子应用程序中使用摩纳哥？ out this 示例：正确的方法是什么？我愿意接受新的建议。我一直在构建一个微前端，但它在 react/electron 中并不是那么好，最后我将不得不使用 iframe 包含最终的索引输出文件。我希望我可以在桌面应用程序中使用我们用 dll 做的事情。注意：我是反应和电子的新手，perdon mystakes 看起来很简单。

好吧，我尝试根据需要“合并”两个 webpack 配置。这是要走的路吗？到目前为止我做不到。我补充说：

  resolve: {
    alias: {
      'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
    }

但找不到 vscode 模块，我收到错误消息：

Module not found: Can't resolve 'vscode' in 'C:\Users\jjj\Desktop\merge\Newton\node_modules\vscode-languageclient\lib\common' even tho the package is installed.

我也尝试在条目部分添加 "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js' 但出现错误：

Forge 内部发生未处理的错误：冲突：多个块将资产发送到相同的文件名 index.js（块 179 和 915）错误：冲突：多个块将资产发送到相同的文件名 index.js（块 179 和 915）

我确实计划——假设这是正确的方法——一旦设法修复了这个 webpackes 合并，我将包含包含以下内容的主文件：

    require('monaco-editor');
    (self as any).MonacoEnvironment = {
        getWorkerUrl: () => './editor.worker.bundle.js'
    }
    require('./client');

然后有 <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> 在某处显示编辑器并且不需要 <script src="main.bundle.js"></script>，因为它将包含在 webscript 的输出 javascript 捆绑文件中，供整个应用程序在其他地方使用。

Answer 1

根据bundler配置的不同，可能会出现各种错误，所以我参考代码monaco-editor and monaco-languageclient做了一个简单的例子。两个存储库都在构建后工作，所以我将主进程和渲染进程文件夹分开以避免重叠输出。这可能与Forge的错误有关。

我使用 monaco-languageclient 的客户端代码创建了一个 Electron 渲染器代码，在主进程中，运行 monaco-languageclient 的服务器。因此，两个进程必须共享相同的 Web 套接字端口。您还可以从外部擦除 following lines 和运行 LanguageServer。

这是一个没有 iframe 的 example。

我如何在电子应用程序中使用这个摩纳哥图书馆？

How do I use this monaco library in an electron app?

node.js

webpack

electron

monaco-editor

building