tanstack-config

概要

TanStack Config は、JavaScript／TypeScript パッケージ開発向けに、意見の反映された最小限の設定で使えるツールキットを提供します。Vite を利用したビルド設定、ESLint プリセット、セマンティックバージョニングによる公開の自動化、TypeScript、Prettier、Changesets、GitHub Actions との連携機能が含まれています。pnpm と Nx を使うモノレポのワークフロー向けに設計されています。

パッケージ： @tanstack/config ステータス： 安定版

インストール

npm install @tanstack/config --save-dev
# or
pnpm add @tanstack/config -D

Vite ビルド設定

基本設定

// vite.config.ts
import { defineConfig, mergeConfig } from 'vitest/config'
import { tanstackViteConfig } from '@tanstack/config/vite'

const config = defineConfig({
  // Your custom Vite config
})

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

複数のエントリーポイント

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

export default tanstackViteConfig({
  entry: [
    './src/index.ts',
    './src/adapters.ts',
    './src/utils.ts',
  ],
  srcDir: './src',
})

ビルドオプション

tanstackViteConfig({
  entry: './src/index.ts',
  srcDir: './src',
  exclude: ['./src/__tests__', './src/**/*.test.ts'],
  // Generates ESM and CJS outputs
  // Generates .d.ts declaration files
  // Handles tree-shaking configuration
})

ESLint 設定

基本設定

// eslint.config.js
import { tanstackEslintConfig } from '@tanstack/config/eslint'

export default tanstackEslintConfig

設定の拡張

// eslint.config.js
import { tanstackEslintConfig } from '@tanstack/config/eslint'

export default [
  ...tanstackEslintConfig,
  {
    rules: {
      // Custom overrides
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
]

公開

公開設定

// publish.config.ts or used via CLI
import { tanstackPublishConfig } from '@tanstack/config/publish'

export default tanstackPublishConfig({
  // Publint-compliant defaults
  // Semantic versioning automation
  // Changelog generation
})

Package.json の設定

{
  "name": "@myorg/my-package",
  "version": "0.0.0",
  "type": "module",
  "main": "dist/cjs/index.cjs",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "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"
      }
    }
  },
  "files": ["dist", "src"],
  "scripts": {
    "build": "vite build",
    "lint": "eslint .",
    "test": "vitest"
  }
}

TypeScript 設定

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Changesets との連携

セットアップ

npx changeset init

Changeset の作成

npx changeset
# Interactive prompt: select packages, bump type, summary

Changeset の設定

// .changeset/config.json
{
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch"
}

GitHub Actions ワークフロー

CI/CD パイプライン

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm build
      - run: pnpm lint
      - run: pnpm test

公開ワークフロー

# .github/workflows/publish.yml
name: Publish

on:
  push:
    branches: [main]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: 'https://registry.npmjs.org'
      - run: pnpm install
      - run: pnpm build
      - name: Create Release Pull Request or Publish
        uses: changesets/action@v1
        with:
          publish: pnpm publish -r
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

モノレポのセットアップ（pnpm + Nx）

ワークスペースの設定

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'examples/*'

Nx の設定

// nx.json
{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Prettier の設定

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

EditorConfig

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

ベストプラクティス

1. ビルドには Vite の設定を使用します - ESM／CJS のデュアル出力と宣言ファイルに対応します
2. 互換性のため、package.json で publint 準拠の exports を使用します
3. モノレポでのバージョン管理には Changesets を使用します
4. ESM を優先するパッケージでは、package.json に "type": "module" を設定します
5. ソースマップのデバッグに備えて、files に src と dist の両方を含めます
6. モノレポでビルドを高速化するため、Nx のキャッシュを使用します
7. TypeScript の利用者向けに、必ず宣言ファイル（.d.ts）を生成します
8. パッケージ間で一貫した基準を保つため、ESLint 設定を使用します
9. GitHub Actions と Changesets で公開を自動化します

よくある落とし穴

• package.json に exports フィールドがない（最新のバンドラーで問題が発生します）
• "type": "module" を設定していない（ESM のインポートで問題が発生します）
• ビルド出力に宣言ファイルを含め忘れる
• テストファイルをビルド対象から除外していない
• publint による検証を先に実行せずに公開する
• tsconfig で moduleResolution: "bundler" を設定していない
• モノレポのパッケージ間でバージョンが統一されていない（Changesets の linked を使用します）