[英]Unable to understand the difference between different monaco editor packages integration
I have a react application, and I want to embed Monaco Editor into my application mainly for SQL validation and AutoComplete scenarios.我有一个 React 应用程序,我想将 Monaco Editor 嵌入到我的应用程序中,主要用于 SQL 验证和 AutoComplete 场景。 I use
neutrinorc.js
to configure plugins or direct install using npm install plugin-name
in the application.我使用
neutrinorc.js
来配置插件或在应用程序中使用npm install plugin-name
直接安装。
My webpack.config.js
looks like,我的
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();
I noticed that there is, https://github.com/react-monaco-editor/react-monaco-editor https://github.com/jaywcjlove/react-monacoeditor我注意到有, https : //github.com/react-monaco-editor/react-monaco-editor https://github.com/jaywcjlove/react-monacoeditor
And Microsoft ones, https://github.com/microsoft/monaco-editor-webpack-plugin https://github.com/Microsoft/monaco-editor和微软的, https : //github.com/microsoft/monaco-editor-webpack-plugin https://github.com/Microsoft/monaco-editor
I don't understand that if I want to embed a Monaco Editor into my React application which of the above packages do I need and do I need to configure them in neutrinorc.js
?我不明白,如果我想将 Monaco 编辑器嵌入到我的 React 应用程序中,我需要上述哪些包,我是否需要在
neutrinorc.js
配置它们?
It would be great if someone can explain this in detail.如果有人可以详细解释这一点,那就太好了。
I don't know neutrinorc.js, but I can explain the other aspects.我不知道 neutrinorc.js,但我可以解释其他方面。 Integrating Monaco in a React app requires 2 things:
在 React 应用程序中集成 Monaco 需要两件事:
Especially the second point is a bit tricky, depending on your app.尤其是第二点有点棘手,具体取决于您的应用程序。 If you created that using CRA (create-react-app) you will not have access to the webpack config file, unless you "eject" the app.
如果您使用 CRA (create-react-app) 创建它,您将无法访问 webpack 配置文件,除非您“弹出”该应用程序。 This is usually not desirable, hence add another node module to the mix, called react-app-rewired .
这通常是不可取的,因此添加另一个节点模块,称为react-app-rewired 。 This module allows you to add another webpack config file (config-overrides.js) to the root of your project and add configuration data there.
此模块允许您将另一个 webpack 配置文件 (config-overrides.js) 添加到项目的根目录并在那里添加配置数据。 Something like:
就像是:
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;
}
With that webpack plugin you can decide which language you want to support in Monaco and distribute only those files required by them (especially TS + JS require quite large files to be there).使用该 webpack 插件,您可以决定要在 Monaco 中支持哪种语言,并仅分发它们所需的文件(尤其是 TS + JS 需要相当大的文件)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.