如何避免在create-react-app中使用相对路径导入（/../../../redux/action/action1） [英] How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app

问题描述

我一直在使用create-react-app包来创建React网站。我在整个应用程序中都使用相对路径来导入组件，资源，redux等，例如，<。c ... / .. / .. / redux / action import操作p>

我尝试使用 module-alis npm软件包，但没有成功。有没有可用于基于文件夹名称或别名（即绝对路径）导入的插件？

例如，从'导入操作@ redux / action'或从'@ resource / css / style.css'

导入操作

解决方案

在项目根目录中创建一个名为 .env 的文件，然后在其中写入：

  NODE_PATH = src 
  

然后重新启动开发服务器。您应该能够在 src 内导入任何内容，而无需相对路径。

注意，我不建议您调用文件夹 src / redux 的原因，因为现在 redux 导入是引用您的应用还是该库令人困惑。相反，您可以调用文件夹 src / app 并从 app /...导入内容。

我们故意不支持 @redux 之类的自定义语法，因为它与Node解析算法不兼容。

I've been using create-react-app package for creating a react website. I was using relative paths throughout my app for importing components, resources, redux etc. eg, import action from '../../../redux/action

I have tried using module-alis npm package but with no success. Is there any plugin that I can use to import based on the folder name or alias i.e. an absolute path?

Eg., import action from '@redux/action' or import action from '@resource/css/style.css'

解决方案

Create a file called .env in the project root and write there:

NODE_PATH=src

Then restart the development server. You should be able to import anything inside src without relative paths.

Note I would not recommend calling your folder src/redux because now it is confusing whether redux import refers to your app or the library. Instead you can call your folder src/app and import things from app/....

We intentionally don't support custom syntax like @redux because it's not compatible with Node resolution algorithm.

这篇关于如何避免在create-react-app中使用相对路径导入（/../../../redux/action/action1）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！