使用 Vite 2 导入 monaco-editor
Import monaco-editor using Vite 2
目前,我已经建立了一个以 monaco-editor
作为依赖的 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 项目中吗?
在最新版本 (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()
}
}
接受的答案在开发版本中是正确的,但在当前版本 (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`],
},
},
},
},
});
目前,我已经建立了一个以 monaco-editor
作为依赖的 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 项目中吗?
在最新版本 (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()
}
}
接受的答案在开发版本中是正确的,但在当前版本 (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`],
},
},
},
},
});