如何创建多个摩纳哥 JavaScript 编辑器，使它们不共享全局命名空间？

Question

我希望一个页面上有多个 Monaco 编辑器，但每个编辑器都有自己的一组全局变量。在一个编辑器中创建的变量不应该在另一个编辑器中作为类型使用。

我尝试过设置monaco.languages.typescript.javascriptDefaults.setCompilerOptions({isolatedModules: true})，但这似乎并没有影响这些共享的全局类型。

如何创建多个 monaco javascript 编辑器，以便它们不共享全局命名空间？

// set up code for the Monaco Playground:
const container = document.getElementById("container");
const container1 = document.createElement("div");
const container2 = document.createElement("div");
container1.style.height="200px";
container1.style.border = "solid 2px black";
container1.style.marginBottom = "16px";
container2.style.height="200px";
container2.style.border = "solid 2px black";
container.appendChild(container1);
container.appendChild(container2);



// actual code:
monaco.editor.create(container1, {
    model: monaco.editor.createModel(`const abc = 123;`,
        "javascript",
        monaco.Uri.parse("js:editor1.js")
    )
});

monaco.editor.create(container2, {
    model: monaco.editor.createModel(
        "const value = abc; // should be typed as `any`, but is typed as `123` instead!",
        "javascript",
        monaco.Uri.parse("js:editor2.js")
    )
});

在操场上尝试一下： https: //microsoft.github.io/monaco-editor/playground.html

Answer 1

我在https://github.com/microsoft/monaco-editor/issues/262中找到了一些讨论。

export {}我的临时解决方案是在代码开头添加。希望我能找到一种更优雅的方式来解决这个问题。

// set up code for the Monaco Playground:
const container = document.getElementById("container");
const container1 = document.createElement("div");
const container2 = document.createElement("div");
container1.style.height = "200px";
container1.style.border = "solid 2px black";
container1.style.marginBottom = "16px";
container2.style.height = "200px";
container2.style.border = "solid 2px black";
container.appendChild(container1);
container.appendChild(container2);



// actual code:
monaco.editor.create(container1, {
    model: monaco.editor.createModel(
        `export {}\nconst abc = 123;`,
        "javascript",
        monaco.Uri.parse("js:editor1.js"),
    )
});

monaco.editor.create(container2, {
    model: monaco.editor.createModel(
        "export {}\nconst a = abc; // should be typed as `any`, but is typed as `123` instead!",
        "javascript",
        monaco.Uri.parse("js:editor2.js")
    )
});