src 目录之外的 create-react-app 导入限制 [英] The create-react-app imports restriction outside of src directory

问题描述

我正在使用 create-react-app.我试图从我的 src/components 内的文件中调用我的公共文件夹中的图像.我收到此错误消息.

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message.

./src/components/website_index.js 未找到模块:您试图导入 ../../public/images/logo/WC-BlackonWhite.jpg 落下在项目 src/目录之外.外的相对进口不支持 src/.您可以将其移动到 src/中，或者添加一个从项目的 node_modules/符号链接到它.

./src/components/website_index.js Module not found: You attempted to import ../../public/images/logo/WC-BlackonWhite.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

从'../../public/images/logo_2016.png'导入标志；<img className="Header-logo" src={logo} alt="Logo"/>

我读过很多东西，说你可以导入路径，但这对我来说仍然不起作用.任何帮助将不胜感激.我知道有很多这样的问题，但他们都告诉我要导入徽标或图像，所以很明显我在大局中遗漏了一些东西.

I have read many things saying you can do an import to the path but that is still not working for me. Any help would be greatly appreciated. I know there are many questions like this but they are all telling me to import logo or image so clearly I am missing something in the big picture.

推荐答案

这是 create-react-app 的开发者添加的特殊限制.它在 ModuleScopePlugin 中实现，以确保文件驻留在 src/ 中.该插件可确保应用源目录中的相关导入不会到达外部.

This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.

除了使用 eject 和修改 webpack 配置外，没有官方方法可以禁用此功能.

There is no official way to disable this feature except using eject and modify webpack config.

但是，大多数功能及其更新都隐藏在 create-react-app 系统的内部.如果你使 eject 你将没有更多的新功能及其更新.所以如果你还没有准备好管理和配置包含的应用程序来配置 webpack 等等 - 不要做 eject 操作.

But, most features and its updates are hidden into the internals of create-react-app system. If you make eject you will have no more new features and its update. So if you are not ready to manage and configure application included to configure webpack and so on - do not do eject operation.

遵循现有规则 - 将资产移动到 src 或基于 public 文件夹 url 使用，无需导入.

Play by the existing rules - move assets to src or use based on public folder url without import.

然而，除了 eject 之外，还有很多非官方的解决方案，基于rewire 允许您以编程方式修改 webpack 配置而无需 <代码>弹出.但是删除ModuleScopePlugin 插件不好 - 这失去了一些保护并且没有添加src<中可用的一些功能.ModuleScopePlugin 旨在支持多个文件夹.

However instead of eject there are much unofficial solutions, based on rewire which allows you to programmatically modify the webpack config without eject. But removing the ModuleScopePlugin plugin is not good - this loses some protection and does not adds some features available in src. ModuleScopePlugin is designed to support multiple folders.

更好的方法是添加类似于 src 的完全可用的附加目录，也受 ModuleScopePlugin 保护.这可以使用 react-app-rewire-alias 来完成强>

The better way is to add fully working additional directories similar to src also protected by ModuleScopePlugin. This can be done using react-app-rewire-alias

无论如何不要从 public 文件夹导入 - 这将在 build 文件夹中复制，并且可以通过两个不同的 url(以及不同的加载方式)获得，这最终会恶化包下载的大小.

Anyway do not import from public folder - that will be duplicated in the build folder and will be available by two different url (and with different ways to load), which ultimately worsen the package download size.

从 src 文件夹导入是更可取的，并且具有优势.一切都将被 webpack 打包成块最佳大小和最佳加载效率.

这篇关于src 目录之外的 create-react-app 导入限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！