如何解决使用 Vite 2 导入 monaco-editor
目前,我已经建立了一个以 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 以来,我假设只需在 plugins 数组中指定汇总插件 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`],},});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。