無法理解不同 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 需要相當大的文件）。