有哪些选项可以将外部javascript sdk捆绑到React Component中？
我尝试将javascript包含在索引中.html并通过 window.xyz 引用它。它运行良好，但我无法进行生产构建，因为 javascript 不是以这种方式打包的。
有没有办法简单地将 JavaScript 文件导入到 React 组件定义中？
PS：在这里反应新手！
脚本捆绑在构建中，您有 2 个选项：
1.如果外部文件是一个模块，我会按如下方式处理它：
- 下载外部 JS 文件并将其保存在项目中的某个位置。例如，将其保存到
/utils文件夹。 - 只需引用它并在组件中使用它：
import { test } from '/utils/external'
阿拉伯数字。如果它不是模块：
- 同上 - 将文件保存到您的项目中。
- 不同之处在于，您必须配置模块捆绑器才能导出全局变量。这个过程称为填充，这里是如何使用 Webpack 完成的。
- 与步骤 2 相同 -
import { test } from '/utils/external'
*在这两种情况下，我都假设它是一个独立的外部文件，而不是作为包(npm/bower/等(托管在某个地方。如果是包，则应使用包管理器，而不是手动下载。
如果要异步加载(但不捆绑(：
按照@Paras答案，他建议使用库进行脚本异步延迟加载。
要从 CDN 加载外部脚本，一个不错的选择是使用react-async-script-loader库。它不仅可以异步加载外部JS文件，还可以加载on demand，即延迟加载并支持并行和顺序加载。
它允许您使用 HOC 装饰您的组件，如下所示：
export default scriptLoader(
[
'https://cdnjs.cloudflare.com/somelibrary1.min.js',
'https://cdnjs.cloudflare.com/somelibrary2.min.js'
]
)(YourComponent)
实际上，您应该了解整个方法，然后查看代码。
您必须为备用 cdnJavaScript文件创建一个单独的文件夹，这些文件不在webpack构建它们的文件中。然后将这些文件粘贴到此文件夹中，然后将它们作为externals导入到webpack配置中。
然后将它们配置为供应商文件，绝对输出文件名应该动态制作，因此webpack构建其捆绑包，然后将JavaScript文件复制到 dist 文件夹中。 请遵循以下内容：
// webpack.configuration.js
~~~
module.exports = {
~~~
externals: {
cdnFileOne: `${srcRoot}/outFiles/cdnFile1.js`,
cdnFileTwo: `${srcRoot}/outFiles/cdnFile2.js`,
},
~~~
};
听起来不错，现在您有JavaScript文件的外部名称，并将其作为externals配置导入webpack配置中。
现在您应该将它们放在entry中以将它们作为单独的文件导入：
// webpack.configuration.js
~~~
module.exports = {
~~~
entry: {
cdnFiles: ['cdnFileOne', 'cdnFileTwo'], <-- cdn files
app: `${srcRoot}/app/index.js`, // <-- its your own codes
},
output: {
path: '/dist',
filename: '[name].js' // <== dynamically make your JavaScript files,
// so, in dist folder you can see app.js and
// cdnFiles.js file
}
~~~
};
当然，您必须将捆绑包添加到HTML模板中：
~~~
res.status(200).send(`
<!doctype html>
<html lang="en">
<head>
<meta charSet="utf-8" />
${styles}
${title}
</head>
<body>
<div id="root">${ssrHTML}</div>
<script src="app.js" defer></script>
<script src="cdnFiles.js" defer></script>
</body>
</html>
`);
~~~
尝试这样的事情：
componentDidMount () {
const script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/somelibrary1.min.js";
script.async = true;
document.body.appendChild(script2);
}