Vite

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

我需要这个吗？

ECMAScript 模块 (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