monaco-editor - 使用 esbuild 捆绑时出现意外使用

Question

以下简单设置在使用 webpack 捆绑时有效，但在 esbuild 上无效。捆绑没有问题，esbuild 正确吐出所有文件，但不知何故在浏览器上出现此错误。对这个问题有任何想法吗？

index.js

import * as monaco from "monaco-editor";

self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    if (label === "typescript" || label === "javascript") {
      return "./ts.worker.bundle.js";
    }
    return "./editor.worker.bundle.js";
  },
};

monaco.editor.create(document.getElementById("container"), {
  value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
  language: "javascript",
});

构建配置

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: {
    app: "./index.js",
    "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
    "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker",
  },
  globalName: "self",
  entryNames: "[name].bundle",
  bundle: true,
  outdir: "./dist",
  loader: {
    ".ttf": "file",
  },
});

从浏览器控制台记录

app.bundle.js:2393 Uncaught Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (app.bundle.js:16294)
    at app.bundle.js:17060
    at app.bundle.js:2393

Answer 1

这条线看起来有问题：

globalName: "self",

在浏览器中，self已经是一个内置变量：https://developer.mozilla.org/en-US/docs/Web/API/Window/self。跟踪它可能会破坏摩纳哥。如果您只是删除该行，您的代码似乎可以工作。