vue2项目 monaco-editor 使用心得

目录

1. 使用vue-monaco-editor 是否必要？

2. 直接使用monaco-editor遇到的问题

2.1 编译报错

2.2 missing class properties transform

2.3  this.getOptions is not a function

---

1. 使用vue-monaco-editor 是否必要？

在vue项目使用monaco-editor作为代码编辑器，并不是一定要通过vue-monaco-editor

原因有以下几点：

1. vue-monaco-editor 没有license

2. vue-monaco-editor 已经不再被维护

3. vue-monaco-editor内部使用loader.js引入monaco-editor，需要配置正确的srcPath才可以正确使用，并且受限于monaco-editor的版本，不能灵活的变化

2. 直接使用monaco-editor遇到的问题

2.1 编译报错

运行yarn add monaco-editor之后，在项目引用该包，出现编译报错：

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

 解决方法：降低monaco-editor和monaco-editor-webpack-plugin的版本

修改之前：

package	version
monaco-editor	0.34.1
monaco-editor-webpack-plugin	7.0.0

修改之后：

package	version
monaco-editor	0.30.1
monaco-editor-webpack-plugin	6.0.0

参考了github issues的答案

2.2 missing class properties transform

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");
}

解决办法：

模仿monaco-vim项目的babel.config.js文件的配置，添加transform-class-properties插件

 

解决办法：

安装babel-plugin-transform-class-properties@6.24.1

2.3  this.getOptions is not a function

原因：

在安装了less-loader之后出现，原因是less-loader版本过高

解决：

降低版本

yarn add less-loader@5.0.0