我已经使用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()有什么想法吗？
1 回答
白衣染霜花
TA贡献1796条经验 获得超10个赞
您可以使用scriptjs
import $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 :)
})
添加回答
举报
0/150
提交
取消