前言

我不是网络开发者 . 我再说一遍,我不是网络开发者 . 我刚刚开始进入npm,JS,TS,React等世界,它来自一个非常移动/桌面的背景 . 拜托巴尼风格的任何答案都是愚蠢的,以表彰这一点 .

概要

我'm trying to get Microsoft' s Monaco EditorElectron工作React,使用Electron Forge . 但是,我没有收到 . 我根据我的发现确定了一个解决方案 . closest SO post I found没有答案 . 我为Ace Editor尝试了相同的过程,它工作得很好;但是,如果可能的话,我更倾向于在我的应用程序中使用Monaco编辑器 .


Electron React Monaco

$ electron-forge init electron-monaco-test --template=react
$ cd electron-monaco-test
$ yarn add react-monaco-editor

然后我将 src/app.jsx 编辑为:

import React from 'react';
import MonacoEditor from 'react-monaco-editor';

export default class App extends React.Component {
  render() {
    return <MonacoEditor language='javascript' />;
  }
}

然后:

$ npm start

我收到以下错误引用 module.js:545

未捕获错误:无法在Module._resolveFilename(module.js:543:15)的Function.Module._resolveFilename(/ Users / Zac / Dev / electron-monaco-test / node_modules / electron / dist)找到模块'monaco-editor' /Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12)在Module.require的Function.Module._load(module.js:473:25)(module.js) :586:17)在Object的require(internal / module.js:11:18) . (/Users/Zac/Dev/electron-monaco-test/node_modules/react-monaco-editor/lib/editor.js:11:21)在Object . (/Users/Zac/Dev/electron-monaco-test/node_modules/react-monaco-editor/lib/editor.js:188:3)在Object.require的Module._compile(module.js:642:30) . 在Module.load(模块,扩展名 . (匿名函数)[as .js](/Users/Zac/Dev/electron-monaco-test/node_modules/electron-compile/lib/require-hook.js:77:14) . JS:561:32)

我也尝试添加 monaco-editor 作为直接的项目依赖,但这也不起作用 .


Electron React Ace Editor

当我将完全相同的过程应用于Ace Editor时,它就可以了 .

$ electron-forge init electron-ace-test --template=react
$ cd electron-ace-test
$ yarn add react-ace

src/app.jsx

import React from 'react';
import AceEditor from 'react-ace'

import 'brace/theme/github'
import 'brace/mode/javascript'

export default class App extends React.Component {
  render() {
    return (
      <AceEditor
        mode='javascript'
        theme='github' />
    );
  }
}

然后:

$ npm start

有关如何修复摩纳哥设置的任何建议?