vite-plugin-version-manager
v1.1.0
Published
A Vite plugin for automatic version management and dist cleanup
Maintainers
hkloudouReadme
vite-plugin-version-manager
A Vite plugin for automatic version management and dist cleanup.
Features
- 🚀 Automatic Version Increment: Automatically increments package.json version during build
- 🧹 Old Version Cleanup: Removes old version directories from dist folder
- ⚙️ Highly Configurable: Customize version increment logic, cleanup behavior, and more
- 🎯 Production-First: Only runs in production mode by default (configurable)
- 📦 TypeScript Support: Full TypeScript support with type definitions
Installation
npm install vite-plugin-version-manager --save-dev
# or
pnpm add vite-plugin-version-manager -D
# or
yarn add vite-plugin-version-manager -DUsage
Basic Usage
// vite.config.ts
import { defineConfig } from 'vite'
import vitePluginVersionManager from 'vite-plugin-version-manager'
export default defineConfig({
plugins: [vitePluginVersionManager()],
})Advanced Configuration
// vite.config.ts
import { defineConfig } from 'vite'
import vitePluginVersionManager from 'vite-plugin-version-manager'
export default defineConfig({
plugins: [
vitePluginVersionManager({
// Enable/disable auto version increment
autoIncrement: true,
// Enable/disable cleanup of old version directories
cleanOldVersions: true,
// Custom version increment function
versionIncrementer: (currentVersion) => {
const [major, minor, patch] = currentVersion.split('.')
return `${major}.${minor}.${parseInt(patch) + 1}`
},
// Directories/files to exclude from cleanup
excludeFromCleanup: ['config.json', 'latest'],
// Custom dist directory
distDir: 'build',
// Enable versioned config extraction
enableVersionedConfig: true,
// NPM CDN configuration
npmCdnPrefix: 'https://unpkg.com',
npmCdnModules: [
{ name: 'vue', var: 'Vue', path: '/dist/vue.global.prod.js', css: '' },
{ name: 'vue-router', var: 'VueRouter', path: '/dist/vue-router.global.prod.js', css: '' },
{ name: 'pinia', var: 'Pinia', path: '/dist/pinia.iife.prod.js', css: '' },
],
}),
],
})Configuration Options
| Option | Type | Default | Description |
| --------------------- | ---------- | ----------------------- | ---------------------------------------------- |
| autoIncrement | boolean | true | Whether to enable version auto-increment |
| cleanOldVersions | boolean | true | Whether to clean old version directories |
| versionIncrementer | function | Default patch increment | Custom version increment function |
| excludeFromCleanup | string[] | ['config.json'] | Directories to exclude from cleanup |
| distDir | string | 'dist' | Custom dist directory path |
| enableVersionedConfig | boolean | false | Enable versioned config extraction and generation |
| npmCdnPrefix | string | 'https://unpkg.com' | NPM CDN prefix for external modules |
| npmCdnModules | array | undefined | NPM CDN module configurations |
How It Works
- Pre-build Phase: The plugin runs before the build starts
- Version Check: Reads the current version from package.json
- Cleanup: Removes old version directories from dist folder (except excluded ones)
- Version Increment: Increments the version and updates package.json
- Timestamp: Adds a lastBuildTime timestamp to package.json
- Post-build Phase (optional): Generates config.json with build metadata
Post-Build Features
When enablePostBuild is set to true, the plugin will also:
- Generate config.json: Creates a configuration file with build metadata
- Version-specific configs: Creates separate config files for each version
- Index.html processing: Reads and processes index.html from build output
- Metadata collection: Includes version, name, description, domains, and publish time
Config.json Structure
{
"version": "1.0.2",
"name": "my-app",
"description": "My awesome application",
"icon": "favicon.ico",
"indexHtml": "<!DOCTYPE html>...",
"uuid": "optional-uuid",
"domains": ["example.com"],
"publishTime": 1703123456789
}The config.json will be created in two locations:
dist/config.json- Main configuration filedist/{version}/config.json- Version-specific configuration for rollback purposes
NPM CDN Features
When npmCdnModules is provided, the plugin will also:
- Integrate CDN Import: Automatically adds
vite-plugin-cdn-importfunctionality - Auto Version Resolution: Extracts versions from your
package.jsondependencies - Flexible CDN Prefix: Configure any NPM CDN provider (unpkg, jsdelivr, etc.)
- Module Configuration: Define external modules with custom paths and CSS
NPM CDN Module Structure
interface CDNModuleConfig {
name: string // Package name (must exist in dependencies)
var: string // Global variable name
path: string // Path to the module file
css: string // Path to CSS file (optional)
}Example Configuration
vitePluginVersionManager({
npmCdnPrefix: 'https://cdn.jsdelivr.net/npm',
npmCdnModules: [
{ name: 'vue', var: 'Vue', path: '/dist/vue.global.prod.js', css: '' },
{ name: 'element-plus', var: 'ElementPlus', path: '/dist/index.full.min.js', css: '/dist/index.css' },
]
})This will automatically resolve to:
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.jshttps://cdn.jsdelivr.net/npm/[email protected]/dist/index.full.min.jshttps://cdn.jsdelivr.net/npm/[email protected]/dist/index.css
Example Directory Structure
Before build:
dist/
├── 1.0.0/ # Old version (will be cleaned)
├── 1.0.1/ # Old version (will be cleaned)
├── config.json # Excluded from cleanup
└── latest/ # Excluded from cleanup (if configured)After build:
dist/
├── 1.0.2/ # New version directory
├── config.json # Preserved
└── latest/ # Preserved (if configured)TypeScript Support
The plugin is written in TypeScript and provides full type definitions:
import type { VersionManagerOptions } from 'vite-plugin-version-manager'
const options: VersionManagerOptions = {
autoIncrement: true,
cleanOldVersions: true,
// ... other options with full IntelliSense support
}License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.