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

create-react-app 中src 目錄之外的相對導入

Create-react-app 對從外部導入資源實施嚴格限制src 目錄。此限制是透過 ModuleScopePlugin 實現的，它可以防止相對導入突破 src 目錄邊界。

根本原因

此限制可確保所有與應用程式相關的檔案保留在src 目錄，提供程式碼和其他專案之間的明確分離asset.

影響

嘗試從src目錄外部匯入檔案（例如從公共資料夾存取映像）會導致錯誤訊息，指示 ModuleScopePlugin 限制。

非官方解決方案

有一些非官方的解決方案，利用 rewire 來修改 webpack 配置並刪除 ModuleScopePlugin。但是，不鼓勵這種方法，因為它會削弱插件提供的安全性和功能增強。

推薦方法

在保持創建完整性的同時解決問題-react-app 環境，您可以：

1. 將資產移到src: 將所需的映像或其他資源傳輸到src 目錄中。
2. 使用公用資料夾中的直接URL: 直接使用公用資料夾中的URL 存取資源，而不是匯入它們.

進口的優點src

從src導入有幾個優點：

• 最佳化的區塊： Webpack 最佳地捆綁來自 src 的資源，確保最佳的載入效率。
• 縮小包裝尺寸：進口自src 避免了建造資料夾中的重複，從而最大限度地減少了整個包的大小。

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