目录
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 |
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