first

.agents/skills/vite/references/build-library.md

@@ -0,0 +1,172 @@
+---
+name: build-library
+description: Building libraries with Vite including proper package.json exports
+---
+
+# Library Mode
+
+Build browser-oriented libraries for distribution.
+
+## Basic Configuration
+
+```ts
+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
+
+```ts
+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']`
+
+```ts
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'lib/main.js'),
+      formats: ['es', 'cjs', 'umd', 'iife']
+    }
+  }
+})
+```
+
+## Custom File Names
+
+```ts
+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
+
+```json
+{
+  "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
+
+```json
+{
+  "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
+
+```json
+{
+  "exports": {
+    ".": {
+      "import": "./dist/my-lib.js",
+      "require": "./dist/my-lib.umd.cjs"
+    },
+    "./style.css": "./dist/my-lib.css"
+  }
+}
+```
+
+## Library Entry File
+
+```ts
+// 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`:
+
+```ts
+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](https://tsdown.dev/) or Rolldown directly
+
+<!-- 
+Source references:
+- https://vite.dev/guide/build.html#library-mode
+-->