我已經使用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()有什么想法嗎？
如何在 React Web 應用程序中包含外部腳本？
ABOUTYOU
2022-08-04 10:20:42
