Weboldal keresés

reactjs - Az abszolút útvonal nem működik a Vite projektben React TS

Küzdök azért, hogy az abszolút útvonal működjön egy Vite react-ts projektben.

Így hoztam létre a projektet

npm init @vitejs/app
npx: installed 6 in 1.883s
√ Project name: ... test-vite
√ Select a framework: » react
√ Select a variant: » react-ts

Ezután hozzáadtam a baseUrl-t a tsconfig.json-hoz a TS hivatalos dokumentációja alapján:

{
  "compilerOptions": {
    "baseUrl": "./src",
    ...

követte egy egyszerű komponens hozzáadása (T:\test-vite\src\components\Test.tsx)

import React from "react";

const Test = () => <h1>This is a Test.</h1>;

export default Test;

Végül importálom a Test komponenst az App.tsx fájlban,
de nem engedi, hogy abszolút útvonalat használjak:

import Test from "components/Test";

Ezt a hibát kapom

míg ha relatív utat használok, az alkalmazás dev és build módban hibamentesen működik:

import Test from "./components/Test";

Hogyan tudom az abszolút útvonalat működésre bírni a projektben?

Válasz #1

Itt két probléma van:

  • Mondd meg a TypeScriptnek, hogyan oldja fel az import útvonalát
  • Mondd el a Vite-nak, hogyan építse fel az import útvonalat

Csak a TypeScriptnek mondod meg, hogyan oldja fel, de a Vite nem tudja, hogyan építse. Szóval hivatkozz a hivatalos dokumentum resolve.alias részére, talán ez az, amit szeretnél:

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

Így importálhatod a path-ot (vagy bármely modult a ./src alatt):

import Test from "@/components/Test";
import bar from "@/foo/bar"

Ezen felül közvetlenül használhatod a Vite plugint, a vite-tsconfig-paths-t, így nem kell manuálisan konfigurálnod a resolve.alias-t

Kövesse az alábbi utasításokat:

  1. Telepítsd a vite-tsconfig-paths-t fejlesztői függőségként

  2. A vite-tsconfig-paths beillesztése a vite.config.ts modul segítségével

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

Válasz #2

A keresési eredmények révén jutottam ide, valami mást kerestem, nevezetesen, hogyan lehet egyszerű abszolút importot csinálni, például import { foo } from 'src/lib/foo.ts'

Tehát ha van egy /src könyvtárad, amely az összes kódot tartalmazza, és szeretnél egy abszolút import útvonalat használni.

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

Ne feledje, hogy ez egy trükk: a src egy alias, így úgy tűnik, mintha az útvonal abszolút lenne a Vite-ban. Ha van egy másik könyvtár a gyökérkönyvtárban, a /src mellett, akkor hozzá kell adnia egy másik alias-t ahhoz a könyvtárhoz.

Válasz #3

@Yuns megoldása működik, de hibát jelez a VS Code-ban. És megszakította az automatikus importálást a VS Code-ban.

Ahhoz, hogy mind a vscode-ban, mind a vite-ban működjön, alias-t adtam mind a tsconfig-hoz, mind a vite.config-hoz.

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}


// vite.config.ts
{
  resolve: {
   alias: [{ find: '@', replacement: '/src' }],
  },
  // ...
}

Ezután így tudnám importálni (a svelte alkalmazás a src könyvtárban van)

import Header from '@/components/Header.svelte

Válasz #4

Keresed a import {...} from "src/foo/bar"; kódot?

Én is a keresési találatokon keresztül jutottam ide, mint a Maciej Krawczyk nevű felhasználó, de a @ rész sem érdekelt. Annak a felhasználónak a válasza segített nekem, de problémám volt a path.resolve résszel (ReferenceError, mert a path nem volt definiálva), így egy kicsit más megközelítést használtam:

vite.config.ts
export default defineConfig({
  ...
  resolve: {
    alias: {
      src: "/src",
    },
  },
  ...
})

A Vite feloldóje a /src abszolút útvonalat úgy tekinti, mint ahonnan a szerver szolgáltat (lásd GH issue). Tehát ha a projekt gyökeréből futtatod/építed a projektet, ahol a src egy felső szintű könyvtár - ami elég gyakori -, ez az alias a Vite-et a megfelelő irányba mutatja.

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

Ez gyakorlatilag ennek a StackOverflow válasznak a vak követése. A TypeScript-nek tudnia kell, hogy különleges feloldás történik, különben a TS megriad a nem létező src csomag miatt, és nem tudja, hol kellene keresnie. (Megjegyzés: Miután megváltoztattam a TS konfigurációmat, a VSCode nem vette azonnal észre a változást, így még mindig kaptam figyelmeztetéseket. Kiléptem, újra megnyitottam, és kb. 15 másodpercet kellett várnom, mire a figyelmeztetések eltűntek.)

Kapcsolódó cikkek