当前位置:   article > 正文

在Vite5.x中使用monaco-editor

vite5.x

Uncaught (in promise) Error: Unexpected usage
at _EditorSimpleWorker.loadForeignModule

如果你像我这样报错,那一般是getWorker部分出问题了.
在这里插入图片描述

首先推个帖子:

https://github.com/vitejs/vite/discussions/1791

然后是代码

不需要在vite.config.ts中做任何设置,也不用装任何插件.
我使用的是自定义元素(CustomElements),所以和你的写法有些许不同,但终归是能用的.

import "./Monaco.less"

//https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
//https://github.com/vitejs/vite/discussions/1791
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'



export class Monaco extends HTMLElement {

    private editor: monaco.editor.IStandaloneCodeEditor
    private sizeObserver: ResizeObserver = new ResizeObserver(() => { this.editor.layout() })
    constructor() {
        super()
        self.MonacoEnvironment = {
            getWorker(_, label) {
                if (label === 'json') { return new jsonWorker() }
                if (label === 'css' || label === 'scss' || label === 'less') { return new cssWorker() }
                if (label === 'html' || label === 'handlebars' || label === 'razor') { return new htmlWorker() }
                if (label === 'typescript' || label === 'javascript') { return new tsWorker() }
                return new editorWorker()
            }
        }

        this.editor = monaco.editor.create(this, {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'typescript'
        });

        this.editor.onDidChangeModelContent(() => {
            if (this.editor) {
                const value = this.editor.getValue() // 给父组件实时返回最新文本
                this.emit('change', value)
            }

        })


        monaco.editor.setTheme('vs-dark');//设置深色主题 需要在编辑器创建完毕以后使用

        //在此类被创建的时候,可能还没有被添加到DOM树中
        //因此不会存在parentElement,也无法计算实际大小大小
        //我们需要等到上层代码将此类添加到DOM以后 再处理它们
        //通常情况下 上层代码在创建完毕以后应立即将他添加到dom中
        //使用requestAnimationFrame可以有效的解决这个问题
        requestAnimationFrame(() => {
            this.editor.layout();
            if (this.parentElement) this.sizeObserver.observe(this.parentElement)
        })




    }

    emit(en: string, data: string) {
        this.dispatchEvent(new CustomEvent(en, { detail: data }))
    }

    destroy() {
        this.sizeObserver.disconnect()
        this.editor.dispose();
    }
}


export default Monaco



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79

使用的是 vite:^5.0.8 monaco-editor:^0.45.0

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/92695
推荐阅读