如何修复错误:在 vue-cli-3 中为摩纳哥编辑器加载外语模块时意外使用

Question

当我尝试在我的 vue-cli-3 项目中包含优化选项时，该项目在某些页面中使用 monaco 编辑器，我在控制台中收到以下错误：

languageFeatures.js?ff36:85 Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
at eval (webWorker.js?af50:54)

这是我的 vue.config.js 文件：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");

module.exports = {
transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
configureWebpack: {
devtool: false,
optimization: {
splitChunks: {
minSize: 10000, 
maxSize: 250000, 
},
nodeEnv: "production",
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: 'false',
parallel: true,
}),
],
removeEmptyChunks: true,
removeAvailableModules: true,
mergeDuplicateChunks: true
},
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'css', 'html', 'typescript', 'json'],
features: ['!gotoSymbol'],
}),
new PurgecssPlugin({paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true})}),
],
}
};

• 摩纳哥编辑器 - v0.20.0
• 摩纳哥编辑器 webpack 插件 - v1.9.0
• Vue/cli - v4.3.1

所以问题是，如何避免获得此错误？

Answer 1

在尝试导入editor.main.js之前，应定义 Monaco 环境的基本 URL，并导入主工作线程。在尝试加载编辑器之前，可以尝试通过执行以下代码来解决问题。

(window as any).MonacoEnvironment = {
getWorkerUrl: function (workerId, label) {
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
self.MonacoEnvironment = { baseUrl: '${window.location.origin}/' };
importScripts('${window.location.origin}/vs/base/worker/workerMain.js');
`)}`;
}
};

同样重要的是要注意，您应该将 URL 更改为托管 vs 文件的位置。

Answer 2

您也可以通过这种方式加载 Web 工作者(如有必要，请正确访问摩纳哥工作线程(：

window.MonacoEnvironment = {
getWorker: (workerId, label) => {
if (label === 'json') {
return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker?worker', import.meta.url));
}
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', import.meta.url));
}
};