如何避免在 create-react-app 中使用相对路径导入 (/../../../redux/action/action1)

Question

我一直在使用 create-react-app 包来创建一个反应网站。我在整个应用程序中使用相对路径来导入组件、资源、redux 等。例如， import action from '../../../redux/action

我曾尝试使用 module-alis npm 包，但没有成功。是否有任何插件可用于根据文件夹名称或别名（即绝对路径）导入？

例如， import action from '@redux/action' 或 import action from '@resource/css/style.css'

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

Answer 1

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

 NODE_PATH=src

然后重启开发服务器。您应该能够在没有相对路径的情况下导入 src 中的任何内容。

注意我不建议调用您的文件夹 src/redux 因为现在混淆 redux import 是指您的应用程序还是库。相反，您可以调用您的文件夹 src/app 并从 app/... 导入内容。

我们故意不支持像 @redux 这样的自定义语法，因为它与节点解析算法不兼容。

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

已接受答案中的方法现已被取代。 Create React App 现在有一种不同的方式来设置绝对路径，如此 处 所述。

总而言之，您可以通过执行以下操作将应用程序配置为支持使用绝对路径导入模块：

使用以下命令在项目的根目录中创建/编辑 jsconfig.json/tsconfig.json：

 {
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

完成此操作后，您可以通过指定“src”的子目录来导入（在以下示例中，components 是 src 的子目录）例如

import Button from 'components/Button'

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