如何解决来自两个单独的 Javascript 库的类型名称冲突？

Question

首先我要说的是，我主要是一名 C# 程序员，很少涉足 JavaScript。

我可以自己写一些 JS 代码，只要它大部分是普通的。我可以处理 jQuery 和奇怪的自给自足的第 3 方库，但是当 React、Angular、Bootstrap 和其他人出现时，我无法从湿纸袋中编码自己.我也不习惯使用 npm 或任何其他类似的包管理器。

这不是我真正的工作或兴趣，所以我从未去过那里。每当我编写一些 JS 代码时，我都会在我的 <script> 标签中引用所需的 JS 文件，然后尽可能直接使用它们。

我目前正在创建一个非常简单的概念验证 Web 应用程序，它的客户端部分迟早会由有能力的人重建。但与此同时，我必须提供基本功能，作为下一个团队接管的粗略指南，无论何时。

我选择了两个库，当单独使用时，每个库看起来都易于使用并且可以完成工作。但是当我尝试在同一页面上一起使用它们时，我运行遇到了一个问题：它们都使用相同的名称作为它们的主要类型，而且我似乎无法在它们之间消除歧义。

这些是图书馆：

它们都声明了一个名为 JSONEditor 的类型，只要我不同时引用这两个库，我就可以使用它。

到目前为止，我已经尝试通过使用模块和 import-ing 使用不同名称的类型来解决这个问题，但它没有用...我在控制台中遇到了一堆关于“未找到导入”和“未定义 e”，这让我觉得我正在解决这个问题。

如果可能，我将如何使用纯 JS 解决此问题？

更新：按照建议，我提供了一个最小的例子来演示我的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Page</title>
    <link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
    <div id="editor" style="width: 300px; height: 200px;"></div>
    <div id="form"></div>
</div>

<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>

<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>

<script>
    // Library 1: The JSON code editor.
    var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
   
    // Library 2: The form builder.
    var form = new JSONEditor(document.getElementById("form"), {
        ajax: true,
        schema: {
            $ref: "/api/describe/service/test"
        }
    });
</script>

</body>
</html>

如果我注释掉一个库（以哪个为准）的使用，另一个库将按预期工作并且内容显示在各自的目标 <div>。但是如果我同时尝试两者，如上所示，则没有任何显示，并且向控制台输出以下错误：

Uncaught TypeError: t is undefined

这发生在 var editor = new JSONEditor 行，这让我认为第二个库中的类型覆盖了第一个并导致了问题。

这对我来说是可以理解的，并不是问题本身。问题是我不知道如何导入这两个 JSONEditor 类型，以便它们可以单独引用。

Answer 1

代码编辑器（JSON 编辑器，而不是 JSON Schema Form Builder）的维护者过去已经解决并关闭了与此相关的问题：https://github.com/josdejong/jsoneditor/issues/270

他推荐的解决方案如下：

<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
  var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
  var JSONEditorB = JSONEditor;
</script>

如果您必须使用脚本标签，这可能是可行的方法。

如何解决来自两个单独的 Javascript 库的类型名称冲突？

How to resolve type name conflict from two separate Javascript libraries?

javascript

es6-modules