javascript - 如何添加导入快捷方式 - 别名

Question

我创建了一个全新的 React 应用

create-react-app demo 

我需要为某些目录/组件创建别名，例如:

import { Header } from '@uicomponents' 

其中 @uicomponents 是路径“src/hello/this/is/the/path/to/ui/components”的快捷方式

所有在线教程都告诉我可以使用 resolve.alias 使用别名导入，但我想知道如何使用全新的 React 应用程序来执行此操作？

没有 .babelrc 或 webpack.config.js 文件。

请问有什么帮助吗？

Answer 1

如果您尚未从 CRA 中弹出应用程序，则可以在 .env 文件中使用 NODE_PATH 为源目录指定别名。 NODE_PATH=/src/hello/this/is/the/path/to/ui/components。

如果您在没有弹出的情况下使用别名，它将不允许您执行@uicomponents 或拥有多个别名。这是 issue在 GitHub 上讨论它和相关的 CRA page关于环境变量。

如果你已经弹出，你可以在 Webpack 配置文件中设置别名并能够像你想要的那样导入:

...
resolve: {
  alias: {
    '@uicomponents': '/src/hello/this/is/the/path/to/ui/components'
  }
},
...