Gathering detailed insights and metrics for unplugin-info
Installations
npm install unplugin-infoDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.10.0
NPM Version
10.2.3
Score
44.5
Supply Chain
60.9
Quality
81.2
Maintenance
100
Vulnerability
97.6
License
Releases
26
Contributors
4
Languages
1
TypeScript
TypeScript (100%)
Developer
Download Statistics
Total Downloads
54,940
Last Day
56
Last Week
553
Last Month
7,311
Last Year
51,153
GitHub Statistics
81 Stars
1,125 Commits
6 Forks
3 Watching
2 Branches
4 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.2.1
Package Id
unplugin-info@1.2.1
Unpacked Size
58.60 kB
Size
15.48 kB
File Count
42
NPM Version
10.2.3
Node Version
20.10.0
Publised On
02 Oct 2024
Total Downloads
Cumulative downloads
Total Downloads
54,940
Last day
-53.7%
56
Compared to previous day
Last week
-70.1%
553
Compared to previous week
Last month
-6%
7,311
Compared to previous month
Last year
1,250.8%
51,153
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Versions
unplugin-info
Export build information as virutal module.
This plugin helps you add build timestamp / commit SHA / CI environment / package.json / ... to your application. So you can easily check whether the production version meets your expectations, or config your application.
Migration from v0 to v1
- Move git related information from
~build/infoto~build/git- Move CI related information from
~build/infoto~build/ci- Remove
commitsSinceLastTagfrom~build/git
Installation
1npm i -D unplugin-info
Vite
1// vite.config.ts 2 3import Info from 'unplugin-info/vite'; 4 5export default defineConfig({ 6 plugins: [ 7 Info() 8 ] 9});
Full example is located at examples/vite.
Rollup
1// rollup.config.js 2 3import Info from 'unplugin-info/rollup'; 4 5export default { 6 plugins: [ 7 Info() 8 ] 9};
Webpack
1// webpack.config.js 2 3module.exports = { 4 /* ... */ 5 plugins: [ 6 require('unplugin-info/webpack')() 7 ] 8};
Full example is located at examples/webpack.
Nuxt
1// nuxt.config.ts
2
3export default defineNuxtConfig({
4 modules: ['unplugin-info/nuxt'],
5 info: {
6 // Your unplugin-info options ...
7 }
8});Full example is located at examples/nuxt.
Vue CLI
1// vue.config.js 2 3module.exports = { 4 configureWebpack: { 5 plugins: [ 6 require('unplugin-info/webpack')() 7 ] 8 } 9};
Quasar
1// quasar.conf.js [Vite] 2module.exports = { 3 vitePlugins: [ 4 [ 5 'unplugin-info/vite', 6 { 7 /* options */ 8 } 9 ] 10 ] 11};
1// quasar.conf.js [Webpack] 2const Info = require('unplugin-info/webpack'); 3 4module.exports = { 5 build: { 6 chainWebpack(chain) { 7 chain.plugin('unplugin-info').use( 8 Info() 9 ); 10 } 11 } 12};
esbuild
1// esbuild.config.js 2import { build } from 'esbuild'; 3 4build({ 5 /* ... */ 6 plugins: [ 7 require('unplugin-info/esbuild')({ 8 /* options */ 9 }), 10 ], 11});
Astro
1// astro.config.mjs 2 3import Info from 'unplugin-info/astro'; 4 5export default defineConfig({ 6 integrations: [ 7 Info() 8 ], 9});
TypeScript
To make the TypeScript work, you can add unplugin-info/client to your corresponding tsconfig.json.
1{ 2 "compilerOptions": { 3 // ... 4 "types": [ 5 "unplugin-info/client" 6 ], 7 }, 8 // ... 9}
Or you can add TypeScript triple-slash directives to your .d.ts (i.e. for projects initialized by Vite, it may be src/env.d.ts).
1// Your .d.ts file 2 3/// <reference types="unplugin-info/client" />
Or if you did some advanced modification (see below), you can just copy and paste client.d.ts to your project, and then do anything you want.
Usage
unplugin-info creates several virtual modules, ~build/time, ~build/git, ~build/ci, ~build/console, ~build/meta, ~build/env, and ~build/package.
You can just import these modules as usual, and do anything with them. Common use cases may be like:
1// main.ts 2 3import now from '~build/time' 4import { sha } from '~build/git' 5 6// console log the build info 7console.log(`Build ${sha} at ${now}`)
1// App.tsx 2 3import now from '~build/time' 4 5// Render it in your app 6function App() { 7 return <span>{now.toLocaleString()}</span> 8}
~build/time
It exports the timestamp when the vite started.
1import now from '~build/time' 2 3console.log(now) 4// There will be a log like "Fri Jun 24 2022 16:30:30 GMT+0800 (中国标准时间)"
~build/git
It exports the infomation about the current git repo, which is powered by simple-git.
1import { 2 github, 3 sha, 4 abbreviatedSha, 5 tag, 6 lastTag, 7 committer, 8 committerEmail, 9 committerDate, 10 author, 11 authorEmail, 12 authorDate, 13 commitMessage 14} from '~build/git'; 15 16// ...
[!NOTE]
From
unplugin-info@0.6.0, the original virtual module called~build/infowill be renamed to~build/git, and the CI/CD related information will be moved to another virtual module called~build/ci.
You can even custom or override the exported git information.
All the functions will be executed during the generation of ~build/git, and the return result with its corresponding field name will be merged into ~build/git. The following example adds another isClean field to ~build/git.
1// vite.config.ts
2
3import Info from 'unplugin-info/vite';
4
5export default defineConfig({
6 plugins: [
7 Info({
8 git: {
9 // Gets whether this represents a clean working branch.
10 isClean: async (git) => {
11 const status = await git.status()
12 return status.isClean()
13 }
14 }
15 })
16 ]
17});Full example is located at examples/vite.
~build/ci
It exports the current CI/CD environment information, which is powered by ci-info.
1import { isCI, isPR, name } from '~build/ci'
~build/console
It will print some helpful logs in your browser.
1import '~build/console';
~build/meta
It exports some meta data from the options of the plugin.
1// vite.config.ts
2export default defineConfig({
3 plugins: [
4 BuildInfo({
5 meta: { message: 'This is set from vite.config.ts' }
6 })
7 ]
8})You can also generate meta data lazily.
1// vite.config.ts 2export default defineConfig({ 3 plugins: [ 4 BuildInfo({ 5 meta: async () => ({ message: 'This is set from vite.config.ts' }) 6 }) 7 ] 8})
Then you can import them in your app.
1import { message } from '~build/meta' 2 3console.log(message) 4// This is set from vite.config.ts
[!NOTE]
Meta data will be serialized to JSON format, so you should gen it in you
vite.config.tsand pass the result object.
To get TypeScript support, you can add type declaration in your env.d.ts (It is include in the official Vite project template).
1declare module '~build/meta' { 2 export const message: string; 3}
Full example is located at examples/vite.
~build/env
[!NOTE]
Now it only suports for Vite.
It exports some environment data from the options of the plugin.
1// vite.config.ts
2export default defineConfig({
3 plugins: [
4 BuildInfo({
5 env: { BUILD_MESSAGE: 'This is a default value set from vite.config.ts' }
6 })
7 ]
8})Compared with ~build/meta, ~build/env is targeted at accessing environment variables for the SSR runtime (like Nuxt, Remix, Astro, and so on).
Then you can import them in your Vite app.
1import { BUILD_MESSAGE } from '~build/env' 2 3console.log(BUILD_MESSAGE)
In the client-side, this will always output This is a default value set from vite.config.ts.
But in the server-side, the output log is determined by the corresponding environment variable process.env.BUILD_MESSAGE.
To get TypeScript support, you can add type declaration in your env.d.ts (It is include in the official Vite project template).
1declare module '~build/env' { 2 export const BUILD_MESSAGE: string; 3}
~build/package
It exports the information of the current package.json.
1import { name, version } from '~build/package';
You can also control which fields should be exported. By default, we only export fields name, version, description, keywords, license, author from your package.json.
1// vite.config.ts 2 3import Info from 'unplugin-info/vite'; 4 5export default defineConfig({ 6 plugins: [ 7 Info({ 8 package: { 9 dependencies: true 10 } 11 }) 12 ] 13});
Full example is located at examples/vite.
Relationship with vite-plugin-info
This pacakge was initially called vite-plugin-info. It has been refactored using unplugin to support additional tools, including Webpack and so on.
We recommend migrating from vite-plugin-info to unplugin-info, as unplugin-info will continue to be maintained and new features will be added.
However, you can still use vite-plugin-info, as it works fine. Thanks to Vite's compatibility, and the source code of vite-plugin-info can be founded here.
License
MIT License © 2023 XLor
No vulnerabilities found.
No security vulnerabilities found.