vue.js - 使用 Vite 2 导入 monaco-editor
问题描述
目前,我已经建立了一个 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
在 plugins 数组中指定汇总插件。但是,我仍然遇到这个问题。
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()
}
}
推荐阅读
- paypal - 登录付款人后出现错误 - “我们无法为您完成付款。要让您的付款再次正常进行,请检查您的帐户或联系我们”?
- javascript - ChartJS 无法为时间序列数据呈现水平条形图
- c++ - 为什么当我们有 const 引用时创建临时对象?
- django - 在 django 中使用搜索词进行自定义排序
- excel - VBA 在新工作表中显示图表 & 如果它已经存在则删除
- jquery - 使用 setTimeout 在 AJAX 上加载成功后添加类和删除类
- android - 使用 Moshi 解析未知的 JSON 密钥
- node.js - “类型 'string | string[]' 不可分配给类型 'string'
- javascript - 在javascript中过滤嵌套对象数组
- core-data - 如何检测 iOS App 是由特定用户(不是在特定设备上)首次启动的?