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