Vite | TanStack Config Docs

Vite 构建设置是为 TanStack 项目同时发布 ESM 和 CJS 的多次尝试的最终成果，同时保留了与所有 Typescript 模块解析选项的兼容性。

我需要这个吗？

ES 模块 (ESM) 是编写 JavaScript 模块的标准。然而，由于历史上对 CommonJS (CJS) 的依赖，许多生态系统工具和项目最初与 ESM 不兼容。这种情况现在变得越来越罕见，我强烈建议您考虑是否还有必要分发 CJS 代码。Sindre Sorhus 在此处对这个问题有一个很好的总结。

设置

该构建配置非常固化，因为它旨在与我们的内部库配合使用。如果您遵循以下说明，它可能也适用于您的库！

package.json

确保设置了 "type": "module"。
确保您已安装 Vite。同时建议安装 Publint。
将您的构建脚本更改为 "build": "vite build && publint --strict"
确保您有一个 "exports" 字段。我们使用以下配置，但您可能有不同的需求：

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"
  }
}

{
  "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"
  }
}

tsconfig.json

确保您的 "include" 字段包含 "vite.config.ts"。
将 "moduleResolution" 设置为 "bundler"。

vite.config.ts

导入 mergeConfig 和 tanstackViteConfig。
首先合并您的自定义配置，然后是 tanstackViteConfig。
请避免在您的自定义配置中修改 build。
请参阅下面的示例：

import { defineConfig, mergeConfig } from 'vite'

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

const config = defineConfig({
  // 框架插件、vitest 配置等。
})

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

import { defineConfig, mergeConfig } from 'vite'

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

const config = defineConfig({
  // 框架插件、vitest 配置等。
})

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

框架

虽然此配置可以与大多数具有 Vite 适配器的框架一起使用，但这并不意味着您应该将其用于所有框架，因为许多框架都有自己的针对其生态系统优化的构建工具。当存在特定于框架的构建工具时，应优先使用该工具。

框架	建议
Angular	ng-packagr (官方工具)
React	@tanstack/config (仅当您需要同时支持 ESM/CJS 时)
Solid	tsc (保留 JSX，SSR 所需)
Svelte	@sveltejs/package (官方工具)
Vue	@tanstack/config (仅当您需要同时支持 ESM/CJS 时)