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

Question

Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.首先让我说，我主要是一名 C# 程序员，很少冒险进入 JavaScript。

I can write myself some JS code as long as its mostly plain.我可以给自己写一些 JS 代码，只要它最简单。 I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene.我可以处理 jQuery 和奇怪的自给自足的第三方库，但是当 React、Angular、Bootstrap 和其他人进入现场时，我无法从湿纸袋中编码自己。 I'm also not used to using npm or any other similar package manager.我也不习惯使用 npm 或任何其他类似的 package 管理器。

It was never really my job nor interest, so I never went there.这从来都不是我的工作，也不是我的兴趣，所以我从来没有去过那里。 Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.每当我编写一些 JS 代码时，我都会在我的<script>标记中引用所需的 JS 文件，然后尽可能直接地使用它们。

I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later.我目前正在创建一个非常简单的概念证明 web 应用程序，它迟早会由有能力的人重建其客户端部件。 But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.但与此同时，我必须提供基本功能，作为下一个团队接管的粗略指导，无论何时。

I've picked two libraries that each seem easy to use and get the job done, when used separately.我选择了两个库，每个库似乎都易于使用并完成工作，单独使用时。 But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.但是当我尝试在同一页面上同时使用它们时，我遇到了一个问题：它们的主要类型都使用相同的名称，我似乎无法消除它们之间的歧义。

These are the libraries:这些是库：

JSON Editor JSON 编辑器
JSON Schema Form Builder JSON 模式表单生成器

They both declare a type named JSONEditor , which I can use as long as I don't reference both of the libraries at once.他们都声明了一个名为JSONEditor的类型，只要我不同时引用这两个库，我就可以使用它。

So far I've tried to solve this by using modules and import -ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.到目前为止，我已经尝试通过使用模块和import -ing 使用不同名称的类型来解决这个问题，但它没有用......我在控制台中遇到了一堆关于“找不到导入”和“e 是未定义”，这让我觉得我在解决这个问题。

How would I solve this using plain JS if possible?如果可能的话，我将如何使用纯 JS 解决这个问题？

UPDATE : As suggested, I'm providing a minimal example that demonstrates my use:更新：正如建议的那样，我提供了一个演示我使用的最小示例：

<!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>

If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div> .如果我注释掉一个库的使用（无论哪个），另一个会按预期工作，并且内容将显示在相应的目标<div>中。 But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:但是如果我同时尝试两者，如上所示，什么都没有显示，并且以下错误是 output 到控制台：

Uncaught TypeError: t is undefined未捕获的类型错误：t 未定义

This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.这发生在var editor = new JSONEditor行，这让我认为第二个库中的类型会覆盖第一个并导致问题。

This is understandable to me and isn't the issue per-se.这对我来说是可以理解的，本身不是问题。 The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.问题是我不知道如何导入这两个JSONEditor类型以便可以单独引用它们。

Answer 1

The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270代码编辑器的维护者（JSON 编辑器，而不是 JSON Schema Form Builder）过去已经解决并关闭了一个关于此的问题： https://github.com/josdejong/jsoneditor/issues/270

His recommended solution is something like the following:他推荐的解决方案如下所示：

 <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>

If you must use script tags this is probably the way to go.如果您必须使用脚本标签，这可能是 go 的方式。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-08-11 17:22:56

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-08-11 17:22:56

解决方案1
2 已采纳 2020-08-11 17:22:56