Skip to content

A zero-dependency npm plugin that automatically injects version, build time, and project name information into all HTML files during build. Compatible with Webpack 4/5, Vite, and Rollup. Simple to configure and ready to use out of the box.

Notifications You must be signed in to change notification settings

kinfeitwong/build-info-injector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

English | 中文


English

A zero-dependency npm plugin that automatically injects version, build time, and project name information into all HTML files during build. Compatible with Webpack 4/5, Vite, and Rollup. Simple to configure.

Installation

npm install build-info-injector --save-dev

Usage

Webpack 4/5

const { BuildInfoInjectorWebpackPlugin } = require('build-info-injector');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
    new BuildInfoInjectorWebpackPlugin({
      version: require('./package.json').version,
      projectName: 'Your Project Name',
      // buildTime is optional, defaults to current time
    })
  ]
};

Vite

import { BuildInfoInjectorVitePlugin } from 'build-info-injector';

export default {
  plugins: [
    BuildInfoInjectorVitePlugin({
      version: '1.0.0',
      projectName: 'Your Project Name',
    })
  ]
};

Rollup

import { BuildInfoInjectorRollupPlugin } from 'build-info-injector';

export default {
  plugins: [
    BuildInfoInjectorRollupPlugin({
      version: '1.0.0',
      projectName: 'Your Project Name',
    })
  ]
};

Injection Effect

The following will be automatically inserted into the <head> tag of the built HTML:

<meta id="build-info" name="build-info" content="<!-- ProjectName v1.0.0 build:2024-06-13T07:00:00.000Z -->">

中文

一个零依赖、可自动在构建时为所有 HTML 文件注入版本号、构建时间和项目名信息的 npm 插件。兼容 Webpack 4/5、Vite 及 Rollup,配置简单,开箱即用。

安装

npm install build-info-injector --save-dev

用法

Webpack 4/5

const { BuildInfoInjectorWebpackPlugin } = require('build-info-injector');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
    new BuildInfoInjectorWebpackPlugin({
      version: require('./package.json').version,
      projectName: '你的项目名',
      // buildTime 可不传,默认当前时间
    })
  ]
};

Vite

import { BuildInfoInjectorVitePlugin } from 'build-info-injector';

export default {
  plugins: [
    BuildInfoInjectorVitePlugin({
      version: '1.0.0',
      projectName: '你的项目名',
    })
  ]
};

Rollup

import { BuildInfoInjectorRollupPlugin } from 'build-info-injector';

export default {
  plugins: [
    BuildInfoInjectorRollupPlugin({
      version: '1.0.0',
      projectName: '你的项目名',
    })
  ]
};

注入效果

构建后的 HTML <head> 标签内会自动插入:

<meta id="build-info" name="build-info" content="<!-- 项目名 v1.0.0 build:2024-06-13T07:00:00.000Z -->">

About

A zero-dependency npm plugin that automatically injects version, build time, and project name information into all HTML files during build. Compatible with Webpack 4/5, Vite, and Rollup. Simple to configure and ready to use out of the box.

Resources

Stars

Watchers

Forks