Vite-plugin-version-mark NPM

中文 | English

vite-plugin-version-mark

Automatically insert the version or git_commit_sha in your Vite/Nuxt project.

Example

Install

pnpm add -D vite-plugin-version-mark
# OR yarn add -D vite-plugin-version-mark
# OR npm install -D vite-plugin-version-mark

Usage

Vite

// vite.config.ts
import {defineConfig} from 'vite'
import {vitePluginVersionMark} from 'vite-plugin-version-mark'

export default defineConfig({
  plugins: [
    vitePluginVersionMark({
      // name: 'test-app',
      // version: '0.0.1',
      // command: 'git describe --tags',
      // outputFile: true,
      // ifGitSHA: true,
      ifShortSHA: true,
      ifMeta: true,
      ifLog: true,
      ifGlobal: true,
    })
  ],
})

Nuxt3+

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ['vite-plugin-version-mark/nuxt', {
      // name: 'test-app',
      // version: '0.0.1',
      // command: 'git describe --tags',
      // outputFile: true,
      // ifGitSHA: true, 
      ifShortSHA: true, 
      ifMeta: true, 
      ifLog: true, 
      ifGlobal: true,
    }]
  ],
})

Then you can use vite-plugin-version-mark ! 🎉

Config

vite-plugin-version-mark can be print application version in the Console, defined global or add <meta> in HTML element.

Name	Description	Type	Default	Supported
name	application name	`string`	`name` in package.json	`0.0.1+`
version	application version	`string`	`version` in package.json	`0.0.1+`
ifGitSHA	use git commit SHA as the version	`boolean`	false	`0.0.1+`
ifShortSHA	use git commit short SHA as the version	`boolean`	false	`0.0.1+`
command	provide a custom command to retrieve the version For example: `git describe --tags`	`string`	git rev-parse --short HEAD	`0.0.8+`
ifLog	print info in the Console	`boolean`	true	`0.0.1+`
ifGlobal	set a variable named `__${APPNAME}_VERSION__` in the windowFor TypeScript users, make sure to add the type declarations in the env.d.ts or vite-env.d.ts file to get type checks and Intellisense.	`boolean`	true	`0.0.4+`
ifMeta	add \ in the \	`boolean`	true	`0.0.1+`
ifExport	export the version field in the entry file. This may be used when you use vite to build a `library mode`.Through `import { {APPNAME}_VERSION } from <your_library_name>`	`boolean`	false	`0.0.11+`
outputFile	The build generates a static file based on the version, as described in the `outputFile` configuration below.	`boolean`/`function`	false	`0.1.1+`

The version field takes precedence: command > ifShortSHA > ifGitSHA > version

`outputFile` Configuration Option

If you want to enable it, you can set it to true, and it will create a file with the path .well-known/version and the content of the current version number in the relative build directory (dist for vite and .output/public for nuxt3).

Alternatively, it can be set to a function that takes the version number as a parameter and returns an object. This allows you to define the content information generated, for example:

// vite.config.ts
vitePluginVersionMark({
  // ...other options

  outputFile: (version) => ({
    path: 'custom/version.json',
    content: `{"version":"${version}"}`,
  })
}),

With this configuration, a file named custom/version.json will be generated, and its content will be {"version":"${current version number}"}.

Other

How to get the version in your vitePlugin?

// vite.config.ts

import {defineConfig} from 'vite'
import type {Plugin} from 'vite'
import {vitePluginVersionMark} from 'vite-plugin-version-mark'

const yourPlugin: () => Plugin = () => ({
  name: 'test-plugin',
  config (config) {
    // get version in vitePlugin if you open `ifGlobal`
    console.log(config.define)
  }
})

export default defineConfig({
  plugins: [
    vue(),
    vitePluginVersionMark({
      ifGlobal: true,
    }),
    yourPlugin(),
  ],
})