javascript - Mengapa Vite membuat dua file konfigurasi TypeScript: tsconfig.json dan tsconfig.node.json?

Saya menggunakan Vite untuk membuat proyek React + TypeScript baru.

Setelah membuat proyek, ada dua berkas konfigurasi TypeScript di folder root: tsconfig.json dan tsconfig.node.json. Berikut adalah isi masing-masing berkas:

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
    "compilerOptions": {
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node"
    },
    "include": ["vite.config.ts"]
}

Mengapa kita perlu dua?

Apa yang dilakukan yang kedua?

Bisakah saya menghapus yang kedua?

Jawaban #1

Anda memerlukan dua konfigurasi TS yang berbeda karena proyek ini menggunakan dua lingkungan berbeda tempat kode TypeScript dijalankan:

  1. Aplikasi Anda (folder src) menargetkan (akan dijalankan) di dalam browser
  2. Vite itu sendiri termasuk konfigurasinya berjalan di komputer Anda di dalam Node, yang merupakan lingkungan yang sepenuhnya berbeda (dibandingkan dengan browser) dengan API dan batasan yang berbeda

Jadi ada dua konfigurasi terpisah untuk lingkungan tersebut dan dua set file sumber yang didefinisikan oleh bagian include dan exclude dari konfigurasi ini. Kemudian ada satu konfigurasi "utama" tsconfig.json yang "mengatur semuanya"

Dan tidak, Anda mungkin tidak ingin menghapus tsconfig.node.json tetapi Anda mungkin bisa menggantinya dengan nama seperti tsconfig.vite.json agar tujuannya lebih jelas. Jika Anda melakukannya, pastikan untuk memperbarui konfigurasi "main" sesuai dengannya

Jawaban #2

Seperti disebutkan oleh Michal Levý, ini adalah konfigurasi berbeda untuk lingkungan berbeda.

Anda akan melihat bahwa tsconfig.json menyertakan kunci "references" yang mengarah ke array yang mencakup file tsconfig.node.json. Jika Anda ingin mengubah nama file tsconfig vite Anda, pastikan untuk memperbarui referensi ini.

Artikel terkait