Vite

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'
// 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',
  }),
)

框架

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

框架	建议
Angular	ng-packagr（官方工具）
React	@tanstack/config（仅当您需要双重 ESM/CJS 时）
Solid	tsc（保留 JSX，SSR 必需）
Svelte	@sveltejs/package（官方工具）
Vue	@tanstack/config（仅当您需要双重 ESM/CJS 时）

我需要这个吗？

设置

package.json

tsconfig.json

vite.config.ts

框架

订阅 Bytes

订阅 Bytes