首页  >  文章  >  web前端  >  如何在 Create React App 中导入 `src` 目录之外的资源?

如何在 Create React App 中导入 `src` 目录之外的资源?

DDD
DDD原创
2024-11-24 22:20:29787浏览

How Can I Import Assets Outside the `src` Directory in Create React App?

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn