Импортировать монако-редактор с помощью Vite 2

Question

В настоящее время я создал проект Vite 2 с зависимостью.

Всякий раз, когда я пытаюсь использовать, он говорит, что рабочие не импортированы.

      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в массиве плагинов. Однако у меня все еще возникает эта проблема.

      export default defineConfig({
  plugins: [
    vue(),
    monaco({ languages: ['javascript'] }),
  ],
});

Есть ли правильный способ импортировать 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()
  }
}

Answer 2

Принятый ответ подходит для сборки dev, но в производственной сборке текущей версии (v2.1.2), Uncaught ReferenceError: window is not definedподнимается при загрузке страницы.
Итак, в дополнение к принятому ответу, build.rollupOptions.output.manualChunks необходимо добавить к vite.config.js вроде следующего.

      // vite.config.js
import { defineConfig } from 'vite';
const prefix = `monaco-editor/esm/vs`;
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          jsonWorker: [`${prefix}/language/json/json.worker`],
          cssWorker: [`${prefix}/language/css/css.worker`],
          htmlWorker: [`${prefix}/language/html/html.worker`],
          tsWorker: [`${prefix}/language/typescript/ts.worker`],
          editorWorker: [`${prefix}/editor/editor.worker`],
        },
      },
    },
  },
});