带有 AngularJS 的 Electron 中的 Monaco 编辑器答案

【问题标题】：Monaco editor in Electron with AngularJS带有 AngularJS 的 Electron 中的 Monaco 编辑器
【发布时间】：2016-12-08 18:20:57
【问题描述】：

我想在 Electron 中启动并运行 monaco 编辑器。我找到了摩纳哥的电子示例，但它们在我的应用程序中不起作用。

我得到的只是如下错误：

"loader.js:1817 Uncaught Error: Unrecognized require call"

"angular.js:13920 Error: Check dependency list! Synchronous require cannot resolve module 'fs'. This is the first mention of this module! at e.synchronousRequire (loader.js:1063)"

如果 monaco 的 loader.js 不包含在脚本文件中，则一切正常。

当我尝试包含“fs”模块时，错误出现在文件开头的一个 AngularJS 服务中：

var fs = require("fs");

但如前所述：如果不包含 monaco loader.js 文件，这可以正常工作。

有什么建议可以解决这个问题吗？我想在我的 Electron 应用程序中包含 monaco 编辑器，最好在我的 AngularJS 指令和/或服务中访问它。与 ACE 编辑器相比，会简化我的应用程序。

【问题讨论】：

标签： javascript angularjs electron monaco-editor

【解决方案1】：

看起来 Node.js 的 require 函数被 loader.js 覆盖了。而是直接在html中加载，作为节点模块加载。

var loader = require('loader');
loader.config({
    // ...
});
loader(['an/amd/module'], function(value) {
    // code is loaded here
});

详见vscode-loader github页面。

【讨论】：

我认为这是不可能的。我正在使用 AngularJS，稍后会实例化一些控制器和服务。我之前无法加载所有 node.js 模块。据我目前所知。也许我错过了什么。
@FDeitelhoff 答案已更新。如果它不起作用，请告诉我

【解决方案2】：

目前我正在使用以下方式将 Monaco 编辑器与 AngularJS 集成到我的 Electron 应用程序中：

<script>
    var nodeRequire = global.require;
</script>

<script src="node_modules/monaco-editor/min/vs/loader.js"></script>

<script>

    var amdRequire = global.require;
    global.require = nodeRequire;

</script>

通过 HTML 文件中的这些行，我正在为 Monaco 加载 amdRequire 并保存/恢复 Node.js 要求。

在我的 AngularJS 控制器中，我可以使用以下行加载 Monaco 编辑器：

amdRequire.config({
    baseUrl: 'node_modules/monaco-editor/min'
});
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
...

现在一切正常。

尽管如此，将 Monaco 集成到使用不同语言的各种项目中是一个痛苦的过程。摩纳哥团队已经“确认”了这一点，并且正在着手整合流程。

【讨论】：

【解决方案3】：

我发现我的用例最简洁的方法是将其加载到 iframe 中。这避免了与您当前系统的所有冲突。您可以通过$("#iframe-id").contentWindow.editor.getValue() 访问内容。（注意，这假设在您的 iframe 中，您将编辑器引用存储在名为 editor 的全局变量中）

查看此页面了解如何： https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

【讨论】：

【解决方案4】：

我将 Monaco 与 NW.JS 一起使用，因此使用编辑器的 Electron 要求是相似的。这需要我在加载 Monaco loader.js 脚本之前保留当前上下文的 require 函数，因为该脚本将自定义 monaco AMD 加载器设置为全局 require。就在加载 loader.js 之后，我将 Monaco 加载器持久化到一个单独的全局变量中，也许是 meRequire 并将 NW.JS 全局 require 恢复到第一次持久化的那个。

<script type="text/javascript">
    // persist global require function before monaco loader.js overwrites it
    tempRequire = require;
</script>
<script src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js" type="text/javascript"></script>
<script type="text/javascript">
    // persist monaco's custom loader
    meRequire = require;
    // restore global require function
    require = tempRequire;
    // configure monaco's loader
    meRequire.config(
    {
        baseUrl: 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/'
    } );
</script>

现在创建编辑器实例只需使用 meRequire

meRequire( [ 'vs/editor/editor.main' ], () =>
{ 
    // create an editor instance
    let editor = monaco.editor.create( document.getElementById('elementId'), {} );
})

我创建了一个用于创建 Monaco-editor 实例的敲除绑定并将其放在 GitHub 上。它不使用节点或 npm 包，而是下载所有源。您可以在以下位置找到它：https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

此外，编辑器的 playground 是如何使用编辑器的示例的重要来源，GitHub 上的 samples 提供了 NW.JS 和 Electon 使用示例。

【讨论】：