Descomplicando as importações usando Vite e Typescript

Esse post me ajudou e acredito que ira te ajudar tambem, confesso que já fiz muitos imports com vários "././././", nesse post você vai aprender a como driblar isso usando o Vite e Typescript!

Transformar isso:

import Never from '../../../components/Never'
import End from '../../../components/End'
import New from '../../../components/New'
import Up from '../../../components/Up'

Em:

import { Never, End, New, Up } from '@/components'

Passo a passos:

1. npm i @types/node -D, insalar o pacote do path, Vai gerar o vite.config.ts.

  import { defineConfig } from 'vite'
    export default defineConfig({
      // ...
      resolve:{
       alias: {
       '@': path.resolve(__dirname,'./src')
       }
      }
    })

2. Altera o arquivo tsconfig.json para as seguintes configurações:

{
    "compilerOptions":{
        //...
        "baseUrl":".",
        "paths":{
        "@/*":["src/*"]
        }
    },
}

3. Exportar as funções como prefirir e crue um arquivo index em components.

// /components/Never/index.tsx
 export const Never = () {
     return <h1> Never sinn NEVERRR</h1>;
 }

// /components/index.tsx
 export {Never} from "./Never";

4. Por fim, importe seus componentes referenciado a pasta de components

import { Never, End, New, Up } from '@/components'

Se te ajudou de alguma forma, dar um up! 💜

Post retirado do Linkeding