无法理解不同摩纳哥编辑器包集成之间的差异

Question

我有一个react应用程序，我想将摩纳哥编辑器嵌入到我的应用程序中，主要用于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

我不明白，如果我想将摩纳哥编辑器嵌入到我的React应用程序中，我需要在neutrinorc.js中配置这些包中的哪一个？

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

Answer 1

我不知道neutrinorc.js，但我可以解释其他方面。将摩纳哥集成到一个React应用程序中需要2件事：

1. 摩纳哥编辑器的反应包装。您可以自己编写一个，也可以使用react摩纳哥-编辑节点模块。
2. 您必须配置webpack来加载所需的文件。这就是摩纳哥-编辑-webpack-插件进来的地方。

特别是第二点有点棘手，这取决于你的应用程序。如果您使用CRA ()创建该应用程序，您将无法访问webpack配置文件，除非您“弹出”该应用程序。这通常是不可取的，因此在混合中添加另一个节点模块，称为反应-应用程序-重新连线。这个模块允许您将另一个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插件，您可以决定在摩纳哥支持哪种语言，并且只分发它们所需的文件(特别是TS + JS需要相当大的文件)。