时间戳

首页 > 解决方案 > 如何添加导入快捷方式 - 别名

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

问题描述

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

create-react-app demo

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

import { Header } from '@uicomponents'

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

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

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

请问有什么帮助吗？

标签： javascriptnode.jsreactjs

解决方案

如果您还没有从 CRA 中弹出您的应用程序，那么您可以在文件中使用 usingNODE_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'
  }
},
...

推荐阅读