无法理解不同 monaco 编辑器包集成之间的区别

Question

我有一个 React 应用程序，我想将 Monaco Editor 嵌入到我的应用程序中，主要用于 SQL 验证和 AutoComplete 场景。 我使用neutrinorc.js来配置插件或在应用程序中使用npm install plugin-name直接安装。

我的webpack.config.js看起来像，

// Whilst the configuration object can be modified here, the recommended way of making
// changes is via the presets' options or Neutrino's API in `.neutrinorc.js` instead.
// Neutrino's inspect feature can be used to view/export the generated configuration.
const neutrino = require('neutrino');

module.exports = neutrino().webpack();

我注意到有， https : //github.com/react-monaco-editor/react-monaco-editor https://github.com/jaywcjlove/react-monacoeditor

和微软的， https : //github.com/microsoft/monaco-editor-webpack-plugin https://github.com/Microsoft/monaco-editor

我不明白，如果我想将 Monaco 编辑器嵌入到我的 React 应用程序中，我需要上述哪些包，我是否需要在neutrinorc.js配置它们？

如果有人可以详细解释这一点，那就太好了。

Answer 1

我不知道 neutrinorc.js，但我可以解释其他方面。 在 React 应用程序中集成 Monaco 需要两件事：

1. 摩纳哥编辑器的 React 包装器。 您可以自己编写一个，也可以使用react-monaco-editor节点模块。
2. 您必须配置 webpack 以加载所需的文件。 这就是monaco-editor-webpack-plugin 的用武之地。

尤其是第二点有点棘手，具体取决于您的应用程序。 如果您使用 CRA (create-react-app) 创建它，您将无法访问 webpack 配置文件，除非您“弹出”该应用程序。 这通常是不可取的，因此添加另一个节点模块，称为react-app-rewired 。 此模块允许您将另一个 webpack 配置文件 (config-overrides.js) 添加到项目的根目录并在那里添加配置数据。 就像是：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const webpack = require("webpack");

module.exports = function override(config, env) {
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ["typescript", "javascript", "sql", "mysql", "python", "json", "markdown", "ini", "xml"]
    })

    return config;
}

使用该 webpack 插件，您可以决定要在 Monaco 中支持哪种语言，并仅分发它们所需的文件（尤其是 TS + JS 需要相当大的文件）。