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

Question

我有一个 React 应用程序，我想将 Monaco Editor 嵌入到我的应用程序中，主要用于 SQL 验证和自动完成场景。我在应用程序中使用 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 Editor 嵌入到我的 React 应用程序中，我需要上述哪些软件包以及是否需要在 neutrinorc.js 中配置它们？

如果有人能详细解释一下就好了。

Answer 1

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

Monaco 编辑器的 React 包装器。您可以自己编写一个或使用 react-monaco-editor 节点模块。
您必须配置 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 需要相当大的文件）。

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

Unable to understand the difference between different monaco editor packages integration

javascript

reactjs

webpack

monaco-editor

neutrino