La forma más sencilla de archivar esto sigue los pasos a continuación. (De la misma manera que @DennisVash mostró pero en forma simple)

1. Instalación - instalar y configurar CRACO.

 yarn add @craco/craco # OR npm install @craco/craco --save

2. Cree un archivo craco.config.js en el directorio raíz y configure CRACO:

 /* 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'), } }, };

3. Actualice las llamadas existentes a react-scripts en la sección de scripts de su archivo package.json para usar la CLI de craco:

 /* package.json */ "scripts": { "start": "craco start", "build": "craco build", "test": "craco test" }

¡Hecho! La configuración está completa.

Ahora vamos a probarlo.

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

Documentación Craco

Gracias. :)

Finalmente es posible con Create React App v.3

Sólo hay que poner:

 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }

en jsconfig.json o tsconfig.json si usa Typescript

Aquí hay un artículo maravilloso sobre esto.

NOTA PARA TÉRMINOS CONFUNDIDOS

 // Absolute path: paths which are relative to a specific path import Input from 'components' // src/components import UsersUtils from 'page/users/utils' // src/page/users/utils // Alias path: other naming to specific path import Input from '@components' // src/components import UsersUtils from '@userUtils' // src/page/users/utils

Para que funcionen los alias de webpack, debe configurar el webpack.config.js predeterminado de create-react-app .

La forma oficial es usar el script de eject .

Pero la forma recomendada es usar una biblioteca sin expulsar, como craco .

Después de seguir la instalación , agregue craco.config.js a su carpeta raíz con la configuración deseada.

mi ejemplo:

 // 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, }, };

Donde aliases.js ( ./src/config/aliases ) exporta una función auxiliar:

 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 IntelliSense

Además, debe agregar el archivo jsconfig.json para la ruta IntelliSense en VSCode (o tsconfig.json ), consulte la pregunta de seguimiento .

Ahora ese código con IntelliSense funcionará:

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

Si desea utilizar:

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

use el complemento del módulo de nodo para resolver las URL https://www.npmjs.com/package/babel-plugin-module-resolver . Al instalarlo y agregarlo a su archivo webpack/babel.rc.

React ya tiene un acceso directo de importación incorporado que comienza desde la carpeta /src .

import { Wrapper } from 'app/components'

PD: es creado por "baseUrl": "./src"