如何将普通javascript导入react应用程序

我想为我的研究小组写一个Office AddIn（React应用程序），在word文档中跟踪化合物。我们在大学里用来画分子的软件叫做“ChemDoodle”，它附带了一个基于HTML5和JavaScript的免费WebAPI:。 如果您想在普通HTML网站中使用它们，首先要向HTML文件的标题部分添加两个引用：

<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>

然后，只需通过以下操作，就可以在同一文件的body部分访问库

<script>//Do something ChemDoodle related </script>

//做些与ChemDoodle相关的事情

“ChemDoodleWeb.js”文件在外部预设了一个名为“ChemDoodle”的变量，用于控制画布

我对反应非常陌生，一般来说是OfficeAddIn或JavaScript。所以我的问题可能是完全愚蠢的：但是我有没有可能在我的办公室里使用这个图书馆呢？我试着导入它，当然它不是一个模块

谁能有更多的线索，有一个简单的API看看，并告诉我，如果有一种方法

大量Thx

---

Christoph

您有两个选项，您可以使用

导入
或
要求
下载源代码并在react项目中本地导入，或者您可以假设模块在那里，并通过
窗口
、
文档
或
全局范围访问它

看起来chemdoodle有一个Web组件实现，您也可以在react中使用。您可以将此页面用作参考：
ChemDoodle Web组件不是作为React模块分发的，但您可以从提供的源代码创建一个。如果您不想这样做，我建议您在首先设置DOM时为ChemDoodle Web组件创建元素。然后，您可以使用ChemDoodle Web组件库，在对已经创建的元素进行React设置之后。本教程页面显示了它的工作原理：

本教程介绍如何在DOM中已经存在的元素上初始化ChemDoodle Web组件，以及如何在没有预先存在元素的封闭DOM中创建ChemDoodle Web组件

我还想解决一个常见的关于Web组件的误解，如Simen所说。ChemDoodle Web组件不是HTML5 Web组件。ChemDoodle Web组件库于2009年6月15日公开发布。Alex Russell在Fronteers 2011上宣布的W3C Web组件。CWC将来可能会支持部分规范。
源代码是可下载的，但是如果我用“导入”导入它，我会得到一个编译器错误，它无法解决它。我不确定它是否真的是一个网络组件ScriptHi KJTdev！谢谢你的回答：）这很有帮助——至少在更广泛的理解上是如此。但我认为我的问题，在这里更深一层。我已经无法将.js文件导入到我的typescript文件中。我正在用React用打字机写一个office插件。我将标签包含在taskpane.html文件中，该文件是WebApp的入口点。但是当在我的组件渲染函数中使用//Do Something标记时：什么也不会发生。你能帮我一下吗？谢谢，我不知道这是否正是您遇到的问题，但是ChemDoodle Web组件是按照ES6最佳标准编写的。这意味着ChemDoodle对象可以在其导入到的范围内访问，但未设置为该范围。因此，如果您在全局范围内导入它，您可以在全局范围内访问ChemDoodle变量，但它将不是全局对象的变量。如果希望从全局对象访问ChemDoodle，则应在导入CWC库后立即使用以下代码行：window.ChemDoodle=ChemDoodle；对不起，我提出了一些愚蠢的问题，谢谢你的帮助！我对整个WebApp开发和JavaScript都很陌生。所以我有一个“App.tsx”文件，在这里我开发了Office插件的AppComponent。在那里我想画一幅“化学涂鸦画布”。在该.tsx文件的顶部，我导入了ChemDoodle库：`import ChemDoodle from'./ChemDoodleWeb.js'，但是您的行由于解析错误而失败：“type Window和typeof globalThis上不存在属性”。您可以指定导入类的方式，尤其是导入类的位置吗。另外：我是否应该使用未打包的版本？我没有使用TypeScript的经验，但是错误听起来像窗口对象是大写的，您应该使用“window.ChemDoodle=ChemDoodle；”。您需要做的是确保全局对象定义了ChemDoodle，以便以后可以从该全局对象访问它。也可以将其指定给传递的任何其他对象。至于包装和未包装，应该没有区别。在开发中，使用未打包的版本，以便可以修改和查看完整的错误跟踪。在生产中，使用打包版本下载较小的文件。