如何在反应中包含外部javascript

Posted 2023-02-21

【中文标题】如何在反应中包含外部javascript

【英文标题】：how to include external javascript in react

【发布时间】：2017-10-14 19:50:28

【问题描述】：

在 html 页面中，您可以包含 <script src="path"></script> 的 javascript 文件 如果路径是，例如，您如何从这样的外部路径中获取变量？ <script src="https://unpkg.com/flux-sdk-helpers@0.1/dist/flux-sdk-helpers.min.js"></script>

感谢大家的帮助

【问题讨论】：

请您选择一个答案来帮助遇到此问题的其他人

一个好的答案在这里：***.com/a/34425083/1406849

【参考方案1】：

以这种方式加载的脚本通常将自身安装为全局变量和/或其他一些全局库的属性。

根据the docs，flux-sdk-helpers 在您以这种方式安装时会将其自身安装为全局变量FluxHelpers。

这意味着您的 React 代码可以通过 FluxHelpers 或 window.FluxHelpers 访问它。

【讨论】：

所以，只是为了绕开它，我将文件包含在 index.html 的头部中，然后我必须'从'...'导入 FluxHelpers；还是什么？否则它会给我错误

如果您将其作为脚本标签包含，则无需导入。只需使用变量。但是，您可能有 eslint 或编译器设置，这些设置会在未知变量上生成错误，并且由于它不知道您的脚本标签，因此它会在编译时抛出错误。使用window.FluxHelpers 将“愚弄”编译器使其正常工作。如果是 eslint 错误，可以将变量添加到 eslintrc 中的全局变量列表中。真的对于这个库，最好使用npm install 然后导入它。 FluxHelper 文档展示了如何做到这一点。

【参考方案2】：

如果你正在使用 react，那么你可能还应该了解 webpack。

如果你将使用 webpack，那么你可以很容易地import method from "package" 从 NPM（节点包管理器）获得的大多数脚本。

【讨论】：

这种方式导入与外部文件无关。

我以这种方式导入所有外部库。

也许我做错了什么，但导入为 import * from '<URL>' 或 import '<URL>' 对我不起作用。你能举一个有效的例子吗？

如果是外部 url，是的，我认为这无法完成。我的意思是作为 npm 包获取的外部文件。

如果您在答案中明确表示，我可以删除 -1

【参考方案3】：

你可以在你的 index.html 文件中链接它，只是在你这样做时要小心你所说的东西，不要在不同的地方重复使用名称