Vite

Die Vite-Build-Einrichtung ist der Höhepunkt mehrerer Versuche, ESM und CJS für TanStack-Projekte dual zu veröffentlichen und gleichzeitig die Kompatibilität mit allen TypeScript-Modulauflösungsoptionen zu erhalten.

ES Modules (ESM) ist der Standard für das Schreiben von JavaScript-Modulen. Aufgrund der historischen Abhängigkeit von CommonJS (CJS) waren jedoch viele Ökosystem-Tools und Projekte anfangs nicht mit ESM kompatibel. Dies ist immer seltener der Fall, und ich möchte Sie bitten zu prüfen, ob es überhaupt notwendig ist, CJS-Code zu verteilen. Sindre Sorhus hat eine gute Zusammenfassung dieses Problems hier.

Die Build-Konfiguration ist recht eigenwillig, da sie für die Arbeit mit unseren internen Bibliotheken konzipiert ist. Wenn Sie die folgenden Anweisungen befolgen, funktioniert sie möglicherweise auch für Ihre Bibliothek!

• Stellen Sie sicher, dass "type": "module" gesetzt ist.
• Stellen Sie sicher, dass Sie Vite installiert haben. Die Installation von Publint wird ebenfalls empfohlen.
• Ändern Sie Ihr Build-Skript zu "build": "vite build && publint --strict"
• Stellen Sie sicher, dass Sie ein "exports"-Feld haben. Wir verwenden dieses, aber Sie haben möglicherweise andere Anforderungen

{
  "exports": {
    ".": {
      "import": {
        "types": "./dist/esm/index.d.ts",
        "default": "./dist/esm/index.js"
      },
      "require": {
        "types": "./dist/cjs/index.d.cts",
        "default": "./dist/cjs/index.cjs"
      }
    },
    "./package.json": "./package.json"
  }
}

{
  "exports": {
    ".": {
      "import": {
        "types": "./dist/esm/index.d.ts",
        "default": "./dist/esm/index.js"
      },
      "require": {
        "types": "./dist/cjs/index.d.cts",
        "default": "./dist/cjs/index.cjs"
      }
    },
    "./package.json": "./package.json"
  }
}

• Stellen Sie sicher, dass Ihr "include"-Feld "vite.config.ts" enthält.
• Stellen Sie "moduleResolution" auf "bundler".

• Importieren Sie mergeConfig und tanstackViteConfig.
• Führen Sie zuerst Ihre benutzerdefinierte Konfiguration zusammen und dann tanstackViteConfig.
• Bitte vermeiden Sie die Änderung von build in Ihrer benutzerdefinierten Konfiguration.
• Siehe Beispiel unten

import { defineConfig, mergeConfig } from 'vite'

import { tanstackViteConfig } from '@tanstack/config/vite'
// OR
import { tanstackViteConfig } from '@tanstack/vite-config'

const config = defineConfig({
  // Framework plugins, vitest config, etc.
})

export default mergeConfig(
  config,
  tanstackViteConfig({
    entry: './src/index.ts',
    srcDir: './src',
  }),
)

import { defineConfig, mergeConfig } from 'vite'

import { tanstackViteConfig } from '@tanstack/config/vite'
// OR
import { tanstackViteConfig } from '@tanstack/vite-config'

const config = defineConfig({
  // Framework plugins, vitest config, etc.
})

export default mergeConfig(
  config,
  tanstackViteConfig({
    entry: './src/index.ts',
    srcDir: './src',
  }),
)

Diese Konfiguration funktioniert zwar mit den meisten Frameworks mit einem Vite-Adapter, bedeutet aber nicht, dass Sie sie für alle Frameworks verwenden sollten, da viele ihre eigenen Build-Tools haben, die für ihr Ökosystem optimiert sind. Wenn ein Framework-spezifisches Build-Tool existiert, sollte dieses bevorzugt werden.