1. ¿Es necesario usar vue-monaco-editor?

Usar monaco-editor como editor de código en un proyecto vue no tiene que pasar vue-monaco-editor

Hay varias razones para esto:

1. vue-monaco-editor no tiene licencia

2. vue-monaco-editor ya no se mantiene

3. vue-monaco-editor usa internamente loader.js para importar monaco-editor, necesita configurar el srcPath correcto para usarlo correctamente y está limitado por la versión de monaco-editor, por lo que no se puede cambiar de manera flexible

2. Problemas encontrados al usar monaco-editor directamente

2.1 Error de compilación

Después de ejecutar yarn add monaco-editor, se hace referencia al paquete en el proyecto y se produce un error de compilación:

ERROR Failed to compile with 2 errors
error in ./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js

Module parse failed: Unexpected token (130:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Solución: baje la versión de monaco-editor y monaco-editor-webpack-plugin

Antes de la modificación:

paquete	versión
monaco-editor	0.34.1
monaco-editor-webpack-plugin	7.0.0

después de la modificación:

paquete	versión
monaco-editor	0.30.1
monaco-editor-webpack-plugin	6.0.0

Consulte la respuesta de los problemas de github

2.2 transformación de propiedades de clase faltantes

Failed to compile with 2 errors

in ./src/utils/vim/cm_adapter.js
Syntaxe error: SyntaxError: C:\Users\Xiayidan.alimu\Desktop\code\luoshu\xalpha-web\src\utils\vim\cm_adapter.js:Missing class properties transform.

export default class CMAdapter {

    static Pos = Pos;
    static signal = signal;
    static on = dummy("on");
    static off = dummy("off");
}

Solución:

Imite la configuración del archivo babel.config.js del proyecto monaco-vim y agregue el complemento transform-class-properties