目次
1. vue-monaco-editor を使用する必要がありますか?
2. monaco-editor を直接使用するときに発生する問題
2.3 this.getOptions は関数ではありません
1. vue-monaco-editor を使用する必要がありますか?
Vue プロジェクトでコード エディターとして monaco-editor を使用する場合、vue-monaco-editor を渡す必要はありません
これにはいくつかの理由があります。
1. vue-monaco-editor にはライセンスがありません
2. vue-monaco-editor はメンテナンスされなくなりました
3. vue-monaco-editor は、monaco-editor をインポートするために内部でloader.js を使用します。正しく使用するには、正しい 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 のバージョンを下げる
変更前:
| パッケージ | バージョン |
| モナコ編集者 | 0.34.1 |
| モナコエディターウェブパックプラグイン | 7.0.0 |
変更後:
| パッケージ | バージョン |
| モナコ編集者 | 0.30.1 |
| モナコエディターウェブパックプラグイン | 6.0.0 |
github の問題の回答を参照してください
2.2 欠落しているクラスプロパティ変換
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 プラグインを追加します。
解決：
[email protected] をインストールします
2.3 this.getOptions は関数ではありません
理由：
less-loaderをインストールした後に表示されました。理由はless-loaderのバージョンが高すぎるためです
解決：
ダウングレードバージョン
yarn add [email protected]