如何在 React Web 应用程序中包含外部脚本？
我已经使用create-react-app创建了一个React Web应用程序，我正忙于将仪表板模板合并到项目中。我已经设法将大部分HTML构建到各种不同的可重用的React组件中，并且我能够成功导入所有样式表。然而，当我尝试将模板的JavaScript文件合并到我的项目中时，我遇到了一堵砖墙。
因此，我所做的是获取所有必要的JavaScript文件，并将它们全部添加到名为js的资产子文件夹（位于公用文件夹中），即：
/public/assets/js/{file.js}
然后，我将脚本标记添加到公用文件夹中的索引.html：
<!DOCTYPE html>
<html class="js">
<head>
<meta charset="utf-8" />
<!-- other meta tags -->
<title>My Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/JavaScript" src="./assets/js/bundle.js"></script>
<script type="text/JavaScript" src="./assets/js/scripts.js"></script>
</body>
</html>
当我启动开发服务器时，应用程序可以正确加载，但是脚本发生了一些奇怪的事情;我已经在登录页面添加了一个组件（滑块），它利用了捆绑包.js脚本.js文件。当页面最初加载时，组件显示正确（即JS工作），但是一秒钟后组件完全损坏 - 几乎就像页面在第二轮没有正确加载JS的情况下刷新一样。
当我查看控制台时，我看到我调用了两个同名的JS文件。我意识到，作为WebPack在后台所做的打包的一部分，它会生成自己的捆绑包并为其提供服务 - 这个捆绑包也称为捆绑包.js。因此，我将外部JavaScript文件重命名为exematebundle.js并分别对脚本标记中的src属性进行了更改：
<script type="text/JavaScript" src="./assets/js/externalbundle.js"></script>
应用程序成功编译并加载，我在控制台中没有看到任何警告或错误，但同样的情况仍然发生;滑块在第一秒内正确加载，然后中断（控制台仍不显示任何警告或错误）。
我还在外部捆绑包的末尾添加了.js文件，当应用程序加载时，它会按预期显示在控制台中。console.log('Loaded')
所以我真的很想知道我是否错误地引用了这些外部脚本，也许没有完全掌握DOM的工作方式以及它如何处理外部脚本，或者是否有一种完全不同的处理外部脚本的方式？
也许值得一提的是，我引用的JavaScript文件不能作为npm上的库使用。我还尝试将它们导入索引.js而不是（当然将文件移动到src目录），这会产生各种错误，例如
“定义”未定义
和
需要赋值或函数调用，但看到表达式
尝试将现有的JS文件转换为NodeJS“兼容”文件（通过在索引内添加和调用它.js通过导入和调用它）产生了更糟糕的结果。exports.{filename} = function(a,b) { ... }import { filename } from './path/to/file.js'filename()
有什么想法吗？
ABOUTYOU1回答
-
白衣染霜花
您可以使用scriptjsimport $script from 'scriptjs';class TaskLists extends Component { UNSAFE_componentWillMount () { $script(['https://YOUR_SCRIPT_URL_HERE'], 'scriptidentifier'); } render () { return (<div>Hello</div>) }}来自文档 https://www.npmjs.com/package/scriptjs 的示例// load jquery and plugin at the same time. name it 'bundle'$script(['jquery.js', 'my-jquery-plugin.js'], 'bundle')// load your usage$script('my-app-that-uses-plugin.js')/*--- in my-jquery-plugin.js ---*/$script.ready('bundle', function() { // jquery & plugin (this file) are both ready // plugin code...})/*--- in my-app-that-uses-plugin.js ---*/$script.ready('bundle', function() { // use your plugin :)})
随时随地看视频慕课网APP
相关分类
JavaScript