Question

我可以使用 react-monaco-editor 和Webpack 4使其运行。只需添加MonacoWebpackPlugin即可达到目的。

现在，我正在尝试找出如何优化Monaco Editor的配置。我将仅在其中使用JS代码，并且只想使用该语言的文件。

查看 webpack-bundle-analyser ，摩纳哥的文件大约有10MB，这实在是一件难事！此外，它会加载TS，CSS，JSON等。

到目前为止，我的代码：

// Webpack plugin config
new MonacoWebpackPlugin();

// Monaco editor options
const options = {
    automaticLayout: false,
    cursorStyle: 'line',
    fontSize: '14px',
    glyphMargin: true,
    lineHeight: '16px',
    readOnly: false,
    renderLineHighlight: 'none',
    roundedSelection: false,
    selectOnLineNumbers: false,
    minimap: {
        enabled: false,
    },
};

// My Component
<MonacoEditor
    language="javascript"
    options={options}
    value="// type your code here"
    onChange={(newValue, e) => console.log('on change monaco editor', newValue)}
    editorDidMount={(editor, monaco) => console.log('monaco editor did mount')}
/>

为了更好地了解摩纳哥环境，我正在尝试研究其文档，但是老实说，它并不是那么简单。 Monaco Editor Documentation API

还有react-monaco-editor GitHub project

因此，我想问一下我需要去哪个方向？

谢谢！

如何使用React和Webpack 4优化Monaco Editor

0 个答案: