javascript - 将外部 JavaScript(来自 cdn)捆绑到 React 组件中

Question

有哪些选项可以将外部 javascript sdk 捆绑到 React 组件中？

我尝试在 index.html 中包含 javascript 并通过 window.xyz 引用它。它运行良好，但我无法进行生产构建，因为 javascript 未以这种方式打包。

有没有办法简单地将 javascript 文件导入到 React 组件定义中？

PS:这里是 React 新手!

Answer 1

如果您希望将脚本捆绑在构建中，您有 2 个选择:

<强>1。如果外部文件是 module ，我会按如下方式处理它:

1. 下载外部 JS 文件并将其保存在项目中的某个位置。例如，将其保存到 /utils 文件夹。
2. 只需引用它并在组件中使用它:import { test } from '/utils/external'

<强>2。如果不是模块:

1. 同上 - 将文件保存到您的项目中。
2. 不同之处在于您必须配置模块 bundler 以导出全局变量。此过程称为匀场 和here's how to do it with Webpack .
3. 与第 2 步相同 - import { test } from '/utils/external'

* 在这两种情况下，我都假设它是一个独立的外部文件，而不是作为一个包(npm/bower/等)托管在某个地方。如果它是一个包，而不是手动下载它，您应该使用包管理器。

---

如果你想异步加载它(但不捆绑):

关注@Paras answer ，他建议使用库进行脚本异步延迟加载。