src 目录之外的 create-react-app 导入限制

Question

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

./src/components/website_index.js 未找到模块：您试图

导入 ../../public/images/logo/WC-BlackonWhite.jpg 落下

在项目 src/ 目录之外。以外的相对进口

不支持 src/。您可以将其移动到 src/ 中，或者添加一个

从项目的 node_modules/ 符号链接到它。

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

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

原文由 David Brierton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

但是，大多数功能及其更新都隐藏在 create-react-app 系统的内部。如果您进行 eject ，您将不再有新功能及其更新。因此，如果您还没有准备好管理和配置包含配置 webpack 等的应用程序 - 不要执行 eject 操作。

按照现有规则进行操作 - 将资产移动到 src 或基于 public 文件夹 url 使用而不导入。

---

然而，除了 eject 之外，还有很多非官方的解决方案，基于

rewire 允许您以编程方式修改 webpack 配置而无需 eject 。但是 删除 ModuleScopePlugin 插件 并不好- 这会失去一些保护并且不会添加 src 中可用的一些功能。 ModuleScopePlugin 旨在支持多个文件夹。

更好的方法是添加与 src 类似的完全工作的附加目录，也受 ModuleScopePlugin 保护。这可以使用 react-app-alias 来完成

---

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

从 src 文件夹导入是可取的并且具有优势。一切都将由 webpack 打包到具有 最佳大小 和 最佳加载效率 的块的捆绑包中。

原文由 oklas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

包 react-app-rewired 可用于删除插件。这样您就不必弹出。

按照 npm 包页面上的步骤（安装包并翻转 package.json 文件中的调用）并使用与此类似的 config-overrides.js 文件：

 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

这将从使用的 WebPack 插件中删除 ModuleScopePlugin，但保留其余部分并消除弹出的必要性。

原文由 Lukas Bach 发布，翻译遵循 CC BY-SA 4.0 许可协议