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/config@3.0.0/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 準拠のエクスポート を使用して互換性を確保する
3. Changesets を使用する モノレポのバージョン管理に
4. "type": "module"を設定する package.json で ESM ファースト パッケージの場合
5. src と dist の両方を含める files 内でソースマップデバッグのために
6. Nx キャッシュを使用する モノレポでのより高速なビルド
7. 常に宣言ファイル (.d.ts) を生成する TypeScript コンシューマーのために
8. ESLint 設定を使用する パッケージ全体で一貫したベースラインとして
9. パブリッシングを自動化する GitHub Actions と Changesets を使用して

一般的な落とし穴

• package.json に exports フィールドが不足している (最新のバンドラーが壊れます)
• "type": "module" を設定していない (ESM インポートの問題を引き起こします)
• ビルド出力で宣言ファイルを忘れている
• ビルドからテストファイルを除外していない
• 最初に publint 検証を実行せずにパブリッシュしている
• tsconfig で moduleResolution: "bundler" を設定していない
• モノレポパッケージ全体で一貫性のないバージョニング (Changesets linked を使用してください)