Javascript 如何在create react应用程序中创建导入快捷方式/别名？

如何在create react应用程序中设置导入快捷方式/别名？ 由此：

import { Layout } from '../../Components/Layout'

为此：

import { Layout } from '@Components/Layout'

我有一个

webpack

4.42.0版本。 我在根目录中没有webpack.config.js文件。我曾尝试自己创建一个，其中包含以下代码：

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    }
  }
};

但它似乎不起作用。我在

.env

文件中看到了

节点\ u路径=。

变量。但我相信，它是不推荐的-最好不要使用。另外，我还有一个

posstcss.config.js

文件。因为我已经安装了TailwindCss，并在那里导入了CSS库。我曾尝试在那里粘贴相同的代码，但也没有成功。

请注意混淆的术语 为了使webpack的别名正常工作，您需要配置

create react app

的默认

webpack.config.js

官方的方式是

但是推荐的方法是使用库而不弹出，如

安装完成后，使用所需配置将

craco.config.js

添加到根文件夹中

我的例子是：

// craco.config.js
const path = require(`path`);
const alias = require(`./src/config/aliases`);

const SRC = `./src`;
const aliases = alias(SRC);

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
);

module.exports = {
  webpack: {
    alias: resolvedAliases,
  },
};

其中，

aliases.js

（

/src/config/aliases

）导出帮助函数：

const aliases = (prefix = `src`) => ({
  '@atoms': `${prefix}/components/atoms`,
  '@molecules': `${prefix}/components/molecules`,
  '@organisms': `${prefix}/components/organisms`,
  '@templates': `${prefix}/components/templates`,
  '@components': `${prefix}/components`,
  '@config': `${prefix}/config`,
  '@enums': `${prefix}/enums`,
  '@hooks': `${prefix}/hooks`,
  '@icons': `${prefix}/components/atoms/Icons`,
  '@styles': `${prefix}/styles`,
  '@utils': `${prefix}/utils`,
  '@state': `${prefix}/state`,
  '@types': `${prefix}/types`,
  '@storybookHelpers': `../.storybook/helpers`,
});

module.exports = aliases;

VSCode智能感知 此外，您应该在VSCode（或

tsconfig.json

）中为路径智能感知添加

jsconfig.json

文件

现在，使用IntelliSense的此类代码将起作用：

// NOTE THAT THOSE ARE ALIASES, NOT ABSOLUTE PATHS
// AutoComplete and redirection works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';

---

归档此文件的最简单方法如下所示。（与所示方式相同，但形式简单）

安装-安装和设置CRACO

在根目录中创建

craco.config.js

文件并配置craco:

更新

package.json

文件的脚本部分中对

react scripts

的现有调用，以使用craco CLI：

完成。安装程序已完成。 现在让我们测试一下

// Before
import Button from "./form/Button" 
import { Layout } from '../../Components/Layout'

// After
import Button from "@/form/Button"
import { Layout } from '@Components/Layout'

文件

---

谢谢。：）

使用Create React应用程序v.3，这最终成为可能

只要说：

{
“编译器选项”：{
“baseUrl”：“src”
},
“包括”：[“src”]
}

进入

jsconfig.json

或

tsconfig.json

，如果使用Typescript

这是一个很棒的地方。

如果您想使用：

// this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of this:
import MyUtilFn from '../../../../utils/MyUtilFn';

---

使用节点模块插件解析URL

https://www.npmjs.com/package/babel-plugin-module-resolver

。通过安装它并将其添加到您的webpack/babel.rc文件。

使用

create react app

时，可使用

react script

读取网页配置，该脚本可在使用CRA时真正处理所有过程。任何试图运行并行webpack配置的尝试都可能会中断一些设置，或者您必须进行密集配置。你真的需要这个零钱吗？如果需要较短的导入，使用相对路径如何？这是否回答了您的问题@EmileBergeron这个问题是关于别名而不是相对/绝对的paths@DennisVash别名是另一个线程中列出的解决方案之一，此问题与之重复。在您的副本中只提到了一个别名，它的相关答案是答案库的出版物。你总是可以通过

jsconfig.json

进行绝对导入，问题是如何aliases@DennisVash问题不是关于导入别名，而是关于导入路径快捷方式，这个答案正确地解决了这个问题。别名是减少导入路径长度的多种方法之一，这一事实并不会使此答案无效。

/* craco.config.js */
const path = require(`path`);

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@Components': path.resolve(__dirname, 'src/components'),
      '@So_on': path.resolve(__dirname, 'src/so_on'),
    }
  },
};

/* package.json */

"scripts": {
   "start": "craco start",
   "build": "craco build"
   "test": "craco test"
}

// Before
import Button from "./form/Button" 
import { Layout } from '../../Components/Layout'

// After
import Button from "@/form/Button"
import { Layout } from '@Components/Layout'

// this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of this:
import MyUtilFn from '../../../../utils/MyUtilFn';