如何在 Create React App 中從 `src` 目錄外部匯入資源？

克服Src 目錄外的create-react-app 導入限制

使用create-react-app 時，存取圖像等資源來自src目錄外部的資料夾可能會導致「找不到模組」錯誤。此限制是 create-react-app 固有的，旨在保持清晰的專案結構並確保程式碼安全。

限制原因

create-react- 中實現的 ModuleScopePlugin app 強制執行以下限制：從應用程式的 src 目錄進行的相對導入不應超出該目錄。這確保了資產保留在專案既定的邊界內。

非官方解決方案

儘管官方立場是如果不從create-react-app 中退出就無法禁用此限制，存在幾種非官方的解決方案。但是，彈出會帶來無法存取未來更新和功能的風險。

• 重新接線： 此工具允許以程式設計方式修改 webpack 配置，而無需彈出，但會刪除 ModuleScopePlugin強烈建議不要使用外掛程式。
• React-app-alias: 更好的方法包括添加類似於 src 的功能齊全的目錄，這些目錄也受 ModuleScopePlugin 保護。

建議方法

建議不要從公用資料夾匯入，而是放置src 資料夾中的資源。這提供了幾個好處：

• 最佳包裝下載大小
• 由於webpack 優化的區塊載入而提高了載入效率
• 透過單一URL 實現一致的資源可用性

透過遵守這些準則，開發人員可以避免導入限制並保持所建置應用程式的完整性和效能使用create-react-app。

以上是如何在 Create React App 中從 `src` 目錄外部匯入資源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！