gt-agent-company/.agents/skills/vite/references/build-library.md

name, description

name	description
build-library	Building libraries with Vite including proper package.json exports

Library Mode

Build browser-oriented libraries for distribution.

Basic Configuration

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',           // Global variable name for UMD
      fileName: 'my-lib'       // Output filename (without extension)
    },
    rolldownOptions: {
      external: ['vue'],       // Don't bundle these
      output: {
        globals: {
          vue: 'Vue'           // Global var for externals in UMD
        }
      }
    }
  }
})

Multiple Entry Points

export default defineConfig({
  build: {
    lib: {
      entry: {
        'my-lib': resolve(__dirname, 'lib/main.js'),
        'secondary': resolve(__dirname, 'lib/secondary.js')
      },
      name: 'MyLib'
    }
  }
})

Output Formats

Single entry defaults: ['es', 'umd'] Multiple entries defaults: ['es', 'cjs']

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      formats: ['es', 'cjs', 'umd', 'iife']
    }
  }
})

Custom File Names

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      fileName: (format, entryName) => `${entryName}.${format}.js`,
      cssFileName: 'styles'  // For bundled CSS
    }
  }
})

Package.json Configuration

Single Entry

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

Multiple Entries

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}

With CSS

{
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    },
    "./style.css": "./dist/my-lib.css"
  }
}

Library Entry File

// lib/main.js
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export { Foo, Bar }

Environment Variables

In library mode:

• import.meta.env.* is statically replaced
• process.env.* is NOT replaced (consumers can change it)

To replace process.env:

export default defineConfig({
  define: {
    'process.env.NODE_ENV': '"production"'
  }
})

Notes

• assetsInlineLimit is ignored - assets always inlined
• cssCodeSplit defaults to false
• For non-browser libraries, consider using tsdown or Rolldown directly