如何在 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中文网其他相关文章！