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

我创建了一个全新的react应用程序

create-react-app demo 

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

import { Header } from '@uicomponents' 

其中，

@uicomponents

是路径“

src/hello/this/is/the/path/to/ui/components

”的快捷方式

所有在线教程都告诉我可以使用

resolve.alias

使用alias导入，但我想知道如何使用全新的react应用程序来实现这一点

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

---

有什么帮助吗？

如果您还没有从CRA中弹出应用程序，那么您可以使用

.env

文件中的

节点路径

将源目录别名为<代码>节点路径=/src/hello/this/is/the/PATH/to/ui/components

如果您不弹出别名，它将不允许您执行@uicomponents或具有多个别名。下面是一篇关于GitHub的文章，讨论了它和相关的环境变量

如果您已弹出，则可以在网页包配置文件中设置别名，并可以按需导入：

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

---

更新：

我建议你使用

它允许您自定义

webpack

/

babel

/内部使用的

react脚本中的任何其他工具

Webpack
和
Jest
别名也不例外

最近，我专门为这些目的创建了一个名为
craco alias
的插件

链接：

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

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

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

当然，它适用于每个命令（
npm start
，
npm test
，
runbuild
），并允许传递任何CLI参数

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

我希望它能帮助某人：）
使用提供别名和多个
src
文件夹的解决方案：

与重新布线的
react应用程序一起使用
或
自定义cra
：

//config-overrides.js:
const{alias}=require（'react-app-rewire-alias'）
module.exports=函数覆盖（配置）{
别名({
“@uicomponents”：“src/hello/this/is/the/path/to/ui/components”，
“@lib”：“lib”，//位于src之外的应用程序根目录中
})（配置）
返回配置
}

与craco一起使用

：

//craco.config.js
const{CracoAliasPlugin，configPaths}=require（'react-app-rewire-alias'））
module.exports={
插件：[
{
插件：crais插件，
选项：{alias:configPaths（'./tsconfig.path.json'）}
}
]
}

---

您可以直接指定别名映射，也可以从jsconfig.json或tsconfig.json通过

configpath（）

将其加载到项目中，为什么不添加一个.babelrc？@MurtazaZaidi它不起作用，我遇到以下错误：

未找到模块：无法解析“/Projects/widget/src/store/reducers”中的“messagesComponents/Message”

这是否回答了您的问题？