Tengo una aplicación de reacción y quiero incrustar Monaco Editor en mi aplicación principalmente para la validación de SQL y los escenarios de Autocompletar. Uso neutrinorc.js para configurar complementos o realizar una instalación directa usando npm install plugin-name en la aplicación.
Mi webpack.config.js parece,
// 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();Noté que hay, https://github.com/react-monaco-editor/react-monaco-editor https://github.com/jaywcjlove/react-monacoeditor
Y los de Microsoft, https://github.com/microsoft/monaco-editor-webpack-plugin https://github.com/Microsoft/monaco-editor
No entiendo que si quiero incrustar un Editor de Mónaco en mi aplicación React, ¿cuál de los paquetes anteriores necesito y debo configurarlos en neutrinorc.js ?
Sería genial si alguien puede explicar esto en detalle.
No conozco neutrinorc.js, pero puedo explicar los otros aspectos. La integración de Monaco en una aplicación React requiere 2 cosas:
Especialmente el segundo punto es un poco complicado, dependiendo de tu aplicación. Si creó eso usando CRA (create-react-app), no tendrá acceso al archivo de configuración del paquete web, a menos que "expulse" la aplicación. Por lo general, esto no es deseable, por lo tanto, agregue otro módulo de nodo a la mezcla, llamado react-app-rewired . Este módulo le permite agregar otro archivo de configuración de paquete web (config-overrides.js) a la raíz de su proyecto y agregar datos de configuración allí. Algo como:
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; }Con ese complemento de paquete web, puede decidir qué idioma desea admitir en Mónaco y distribuir solo los archivos requeridos por ellos (especialmente TS + JS requieren archivos bastante grandes para estar allí).