reactjs - Migration von Webpack zu Vite: wie man Pfad-Alias auflöst und Importe zum Laufen bringt

Ich migriere mein Projekt von Webpack zu Vite "vite": "^4.3.9",.

Nach npm start erhalte ich diesen Fehler:

Fehler: Die folgenden Abhängigkeiten werden importiert, konnten jedoch nicht aufgelöst werden:

In meinen React-Typescript-Dateien habe ich so importiert:

import { cacheOpts, typeDefs } from 'app/graphql/cache';

Was muss ich tun, um alle Importe wie sie sind behalten zu können?

In tsconfig.json habe ich:

"baseUrl": "./src",
"paths": {
      "*": ["shared/*", "client/*", "server/*", "*"]
    },

Ich habe in vite.config.ts gesehen, dass ich path.resolve hinzufügen kann:

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

Wie bekomme ich meine Importe zum Laufen?

Antwort #1

Verwende dieses Paket, es ist perfekt und hat das Problem gelöst
https://www.npmjs.com/package/vite-tsconfig-paths
Nach der Installation gehe und bearbeite deine vite.config.ts:

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()]
})

Antwort #2

Eine gängige Technik ist es, den resolve-Abschnitt in vite.config.ts zu verwenden, um das Symbol ''@'' als Wurzelverzeichnis des Quellcodes zu aliasen, sodass Sie keine relativen Pfade benötigen. z.B.

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

Und in tsconfig.json verzichte auf baseUrl, aber verwende

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

Dann wird, vorausgesetzt, Ihr app-Ordner ist ein Unterordner Ihres src-Ordners, der Import zu

import { cacheOpts, typeDefs } from '@/app/graphql/cache';

Wenn Sie bereit sind, relative Pfade zu verwenden, dann können Sie auf das resolve... alias in vite.config.ts verzichten und dies in tsconfig.json verwenden:

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