Estoy usando React y tengo varios componentes que uso en varios componentes de orden superior, mis importaciones a veces serán como esta import MyComponent from '../../../../components/MyComponent' Lo sé allí es una forma más eficiente de importar esto cambiando algo dentro del archivo package.json y luego impórtelo de alguna manera como esto import MyComponent from '@components/myComponent' pero no recuerdo cómo puedo hacer esto, cómo puedo hacer esto ?
Puede hacer esto usando jsconfig o tsconfig si está usando TypeScript.
npm start .jsconfig.json
{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }Si está utilizando Next.js, esto puede ayudar https://nextjs.org/docs/advanced-features/module-path-aliases
Cree un jsconfig.json en el directorio raíz y copie el siguiente código. Reinicie VSCode para que se apliquen los cambios -
{ "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"], } } }en next.js, esto funciona para mí =>
En la carpeta raíz, cree el archivo jsconfig.json (tsconfig.json si usa TypeScript). Entonces agrega esto
{ "compilerOptions": { "baseUrl": "." }, "include":["."] }cree una carpeta de "componentes" en el archivo raíz, luego será así:
// components/button.js export default function Button() { return <button>Click me</button> } // App.js import Button from 'components/button' export default function HomePage() { return ( <> <h1>Hello World</h1> <Button /> </> ) }