将外部JavaScript(从cdn)捆绑到React组件中

Question

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

我试过在index.html中包含javascript并通过window.xyz引用它.它工作得很好但我不能做生产构建,因为javascript没有以这种方式打包.

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

PS:在这里反应新手!

Answer 1

如果要将脚本捆绑在构建中，则有两个选项：

1.如果外部文件是模块，我将按以下方式处理它：

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

2.如果不是模块：

1. 与上述相同-将文件保存到您的项目中。
2. 区别在于您必须配置模块捆绑器以导出全局变量。这个过程称为Shimming，这是使用Webpack的方法。
3. 与步骤2相同- import { test } from '/utils/external'

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

如果要异步加载（但不捆绑）：

遵循@Paras答案，他建议使用库进行脚本异步延迟加载。