当前位置: 首页 > 面试题库 >

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

卫浩瀚
2023-03-14
问题内容

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

./src/components/website_index.js找不到模块:您试图导入属于项目src/目录之外的../../public/images/logo/WC-BlackonWhite.jpg。不支持src/以外的相对导入。您可以将其移动到src /中,也可以从项目的node_modules /中向其添加符号链接。

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

我读过很多东西,说您可以导入路径,但这仍然对我不起作用。任何帮助将不胜感激。我知道有很多这样的问题,但是它们都告诉我要导入徽标或图像,因此很明显我在全局图中缺少某些内容。


问题答案:

这是create-react-
app开发人员添加的特殊限制。的实现是ModuleScopePlugin为了确保文件位于中src/。该插件可确保从应用程序源目录的相对导入不会到达其外部。

您只能在eject运行create-react-app项目后才能禁用此功能。

大多数功能及其更新都隐藏在create-react-app系统的内部。如果您这样做eject,将不再具有某些功能及其更新。因此,如果您还没有准备好管理和配置用于配置Webpack的应用程序等,请不要进行eject操作。

按照现有规则播放(移至src)。但现在你可以知道如何删除限制:
eject和删除ModuleScopePlugin从的WebPack配置文件

create-react-app v0.4.0开始,NODE_PATH环境变量允许为绝对导入指定路径。并且由于不赞成使用v3.0.0NODE_PATH,而建议将其设置baseUrljsconfig.jsontsconfig.json

绝对进口允许使用import App from 'App'代替import App from './App'相对于在基本URL指定的值。

此功能对monorepos或其他配置问题特别有用,但不适用于从public文件夹导入图像或其他任何内容。

public文件夹的内容将放置在build文件夹中,并通过相对URL提供。另外,所有导入的内容都将由webpack处理,也将放置在build文件夹中。

如果您从public文件夹中导入某些内容,则该内容可能会在该build文件夹中重复出现,并且可以通过两个不同的URL(或使用不同的加载方式)使用,这最终会使软件包下载大小变大。

从src 文件夹 导入 是可取的,并且具有很多优点。一切将通过webpack打包到捆绑包中,并具有 最佳大小和最佳装载效率 。

有中间解决方案,即重新布线系统,它允许您以编程方式修改webpack配置。但除去该ModuleScopePlugin插件是不是一个很好的解决方案; 最好添加完全可用的类似于的其他目录src

当前,除根文件夹create-react-app外,不支持其他目录src。这可以使用react-app-rewire-alias完成



 类似资料:
  • 我读过很多东西,说你可以做一个导入路径,但这仍然是不对我的工作。如有任何帮助,将不胜感激。我知道有很多这样的问题,但他们都告诉我进口标志或图像,所以很清楚,我错过了一些大图片。

  • 我有两个react应用程序(A-app,B-app)。我需要将一个组件从A-app导入B-app。但当我尝试这样做时,我看到了这个错误。 我试图在B-appnode_modules中对这个组件进行符号链接。但它不起作用。 我也试着去创造。在根项目目录中创建env文件,并将此放入文件中。但这个解决方案也不管用。 我该怎么解决这个问题? 对不起我的英语。

  • Create React App 不用配置就可以创建 React App。 全局安装: npm install -g create-react-app 创建 App: create-react-app my-appcd my-app/ 启动 npm: npm start 打开 http://localhost:3000/  查看你的 App。 如果你准备将其部署到生产环境,只需创建一个压缩包,并且运行 npm run build。

  • 问题内容: 我正在尝试在Google App Engine上部署使用create-react-app创建的应用程序。 我的应用程序在本地(和)都可以正常运行。但是,在Google App Engine上部署的应用程序仅显示index.html,并且不会调用我的react代码。 Chrome开发者控制台显示。 另外,我在console.cloud.google.com上发现,已部署的应用程序不包含构

  • Create React Native App The fastest way to create universal React Native apps npx create-react-native-app Once you're up and running with Create React Native App, visit this tutorial for more informat

  • 问题内容: 我正在尝试在Windows PC上使用create-react-app命令设置react app。我已经在Mac计算机上使用过它,并且效果很好。但是我遇到了一个问题。这是我在命令行上的步骤。我想念什么吗? 另外npm的配置路径就像 C:\ Users \ ugur \ AppData \ Roaming \ npm \ node_modules \ create-react-app \