我有一個 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 Editor 嵌入到我的 React 應用程式中，我需要上述哪些包，我需要在其中配置它們neutrinorc.js嗎？
如果有人可以詳細解釋這一點，那就太好了。
uj5u.com熱心網友回復：
我不知道 neutrinorc.js，但我可以解釋其他方面。在 React 應用程式中集成 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 需要相當大的檔案）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/352535.html
標籤：javascript 反应 网络包 摩纳哥编辑 中微子
上一篇：蓋茨比陰影問題