使用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",
});

Esbuild配置

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",
  },
});

Log From Browser Console

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。对它的跟踪可能会破坏公国。如果您只删除这一行，您的代码似乎可以正常工作。