使用Vite 2导入monaco-editor

Question

目前，我已经建立了一个 Vite 2 项目作为monaco-editor依赖项。

每当我尝试使用它时，它都会说工人不是进口的。

editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
    at webWorker.js:38

由于我使用的是 Vite 2，我假设只需rollup-plugin-monaco-editor在插件数组中指定汇总插件即可。但是，我仍然遇到这个问题。

editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
    at webWorker.js:38

有没有合适的方法导入monaco-editor到Vite 2项目中？

Answer 1

最新版本 ( 2.0.0-beta.59) 已修复此问题。

您现在可以添加环境工作人员，无需任何进一步配置（参考： https: //github.com/vitejs/vite/discussions/1791）

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'

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()
  }
}