173 lines
3.0 KiB
Markdown
173 lines
3.0 KiB
Markdown
---
|
|
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
|
|
-->
|