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

Question

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

create-react-app demo 

我需要为某些目录/组件创建别名：

import { Header } from '@uicomponents' 

@uicomponents 路径“ src/hello/this/is/the/path/to/ui/components”的快捷方式在哪里

所有在线教程都告诉我我可以使用使用别名导入resolve.alias，但是我想知道如何使用全新的react app来做到这一点？

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

有什么帮助吗？

Answer 1

如果尚未从CRA中退出应用程序，则可以NODE_PATH在.env文件中使用来对源目录进行别名化。NODE_PATH=/src/hello/this/is/the/path/to/ui/components。

如果不弹出就使用别名，则将不允许您执行@uicomponents或具有多个别名。这是GitHub上的一个问题，以及与环境变量有关的CRA页面对此进行了讨论。

如果已弹出，则可以在Webpack配置文件中设置别名，并能够按需要导入：

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

Answer 2

更新：

我建议你使用Craco。

它允许您自定义webpack//内部babel使用的任何其他工具react-scripts。

Webpack而Jest别名也不例外。

最近我创建了一个craco-alias专门用于这些目的的插件。

链接：GitHub，npm。

这个插件会自动为你生成 webpack 和 jest 别名。

您只需要安装Craco，为其编写一个小配置，然后创建（或编辑）您的jsconfig.json/ tsconfig.json（它也适用于 TS）并source在craco-alias配置对象中指定别名。

这很简单 - 您可以在 README 页面上找到所有示例。

当然，它适用于每个命令 ( npm start, npm test, run build build) 并允许传递任何 CLI 参数。

但是，唯一的问题是插件只支持路径别名，并且不能正确处理模块别名。

我希望它会帮助某人:)