Vite Library Package

Build and publish a reusable JavaScript/TypeScript library for [Library Purpose] using Vite with proper bundling and type definitions.

Requirements

1. Library Configuration

Set up:

• Library name and exports
• Multiple output formats (ESM, CJS, UMD)
• TypeScript type definitions
• Entry points (single or multiple)

2. Build Outputs

Generate:

• ES modules (.es.js) for modern bundlers
• CommonJS (.cjs.js) for Node.js
• UMD (.umd.js) for browsers (optional)
• TypeScript declarations (.d.ts)

3. External Dependencies

Configure:

• Peer dependencies (not bundled)
• External packages
• Global variables for UMD

4. Package Exports

Define:

• Main entry point
• Module entry point
• Types entry point
• Conditional exports

5. Publishing Setup

Include:

• Proper package.json configuration
• Files to publish
• Version management
• README and documentation

Implementation Pattern

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: '[LibraryName]',  // Global variable name for UMD
      fileName: (format) => `[library-name].${format}.js`,
      formats: ['es', 'cjs', 'umd']  // Output formats
    },
    rollupOptions: {
      // Externalize dependencies that shouldn't be bundled
      external: ['[peer-dependency]', '[peer-dependency-2]'],
      output: {
        // Global variables for UMD build
        globals: {
          '[peer-dependency]': '[GlobalName]'
        }
      }
    },
    sourcemap: true,  // Generate source maps
    minify: 'esbuild'  // Minify output
  },
  plugins: [
    dts({  // Generate .d.ts files
      include: ['src/**/*'],
      exclude: ['src/**/*.test.ts']
    })
  ]
})

// package.json
{
  \"name\": \"[library-name]\",
  \"version\": \"[version]\",
  \"type\": \"module\",
  \"description\": \"[description]\",
  \"author\": \"[author]\",
  \"license\": \"MIT\",
  
  // Entry points
  \"main\": \"./dist/[library-name].cjs.js\",
  \"module\": \"./dist/[library-name].es.js\",
  \"types\": \"./dist/index.d.ts\",
  
  // Modern package exports
  \"exports\": {
    \".\": {
      \"import\": {
        \"types\": \"./dist/index.d.ts\",
        \"default\": \"./dist/[library-name].es.js\"
      },
      \"require\": {
        \"types\": \"./dist/index.d.ts\",
        \"default\": \"./dist/[library-name].cjs.js\"
      }
    }
  },
  
  // Files to include in package
  \"files\": [
    \"dist\",
    \"README.md\",
    \"LICENSE\"
  ],
  
  // Peer dependencies
  \"peerDependencies\": {
    \"[peer-dep]\": \"^[version]\"
  },
  
  \"devDependencies\": {
    \"vite\": \"^[version]\",
    \"vite-plugin-dts\": \"^[version]\",
    \"typescript\": \"^[version]\"
  },
  
  \"scripts\": {
    \"build\": \"vite build\",
    \"prepublishOnly\": \"npm run build\"
  }
}

// src/index.ts  - Main entry point
export { [Component1] } from './[Component1]'
export { [Component2] } from './[Component2]'
export type { [Type1] } from './types'
export type { [Type2] } from './types'

// tsconfig.json
{
  \"compilerOptions\": {
    \"target\": \"ES2020\",
    \"module\": \"ESNext\",
    \"lib\": [\"ES2020\", \"DOM\"],
    \"declaration\": true,
    \"declarationMap\": true,
    \"outDir\": \"./dist\",
    \"moduleResolution\": \"node\",
    \"strict\": true,
    \"esModuleInterop\": true,
    \"skipLibCheck\": true
  },
  \"include\": [\"src\"],
  \"exclude\": [\"node_modules\", \"dist\"]
}

Build Commands

# Build library
npm run build

# Publish to npm
npm publish

# Test locally before publishing
npm link

Best Practices

• Use semantic versioning
• Generate type definitions
• Externalize peer dependencies
• Include source maps
• Test all output formats
• Document API thoroughly
• Use tree-shaking friendly exports
• Keep bundle size small
• Test in consuming projects before publishing