有哪些选项可以将外部 javascript sdk 捆绑到 React 组件中？
我尝试在 index.html 中包含 javascript 并通过 window.xyz 引用它。它运行良好，但我无法进行生产构建，因为 javascript 没有以这种方式打包。
有没有办法简单地将 javascript 文件导入到 React 组件定义中？
PS：在这里react新手！
将外部 JavaScript（来自 cdn）捆绑到 React 组件中
IT技术
javascript
reactjs
2021-05-16 15:31:19
4个回答
如果您希望将脚本捆绑在构建中，您有 2 个选项：
1.如果外部文件是一个module，我会按如下方式处理它：
- 下载外部 JS 文件并将其保存在项目中的某个位置。例如，将其保存到
/utils文件夹。 - 只需引用它并在组件中使用它：
import { test } from '/utils/external'
2. 如果不是module：
- 同上 - 将文件保存到您的项目中。
- 不同之处在于您必须配置module捆绑器以导出全局变量。这个过程被称为Shimming，这里是如何使用 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文件的外部名称并将其webpack作为externals配置导入到配置中。
现在您应该将它们放入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);
}