Management platform

├── README.md ├── index.js ├── package.json └── zh_CN.md /README.md: -------------------------------------------------------------------------------- 1 | # Html commit version plugin 2 | 3 | Simple [webpack](https://webpack.js.org/) plugin that generates `CommitInfo` and `VERSION` insert index.html during build. 4 | 5 | English | [简体中文](./zh_CN.md) 6 | ## Usage 7 | 8 | Given a **webpack 4** project, install it as a local development dependency: 9 | 10 | ```bash 11 | npm install html-commit-version-plugin --save-dev 12 | ``` 13 | 14 | Then, simply configure it as a plugin in the webpack config: 15 | 16 | ```javascript 17 | var HtmlGitVersionPlugin = require("html-commit-version-plugin"); 18 | 19 | module.exports = { 20 | plugins: [ 21 | new HtmlGitVersionPlugin() 22 | ], 23 | }; 24 | ``` 25 | 26 | It outputs a `VERSION` and `commitInfo` such as: 27 | 28 | ```html 29 | 35 | 36 | 37 | 38 | 39 | 40 | Management platform 41 | 42 | 43 | 44 | 45 |

46 | 47 | 48 | 49 | 50 | 51 | ``` 52 | ## Configuration 53 | 54 | The plugin requires no configuration by default, but it is possible to configure it to support custom commitInfo. 55 | 56 | ## Plugin API 57 | 58 | The `COMMITINFO`, `VERSION` are also exposed through a public API. 59 | 60 | ```javascript 61 | const webpack = require("webpack"); 62 | const HtmlVersionPlugin = require("html-commit-version-plugin"); 63 | 64 | module.exports = { 65 | plugins: [ 66 | new HtmlVersionPlugin({ 67 | commitId: true, // show commitId 68 | version: true, // show commit tag，if no tag, show branch 69 | commitName: true, // show commitName 70 | buildDate: true, // show buildDate 71 | email: false, // show email, default false 72 | }), 73 | ], 74 | }; 75 | ``` -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const child_process = require('child_process') 2 | const fs = require('fs') 3 | const { resolve } = require('path') 4 | 5 | const pluginName = { 6 | name: 'html-commit-version-plugin', 7 | } 8 | const mapCommands = { 9 | commitId: "git show -s --format=%H", 10 | version: "git name-rev --name-only HEAD", 11 | commitName: "git show -s --format=%cn", 12 | email: "git show -s --format=%ce", 13 | buildDate: true, 14 | } 15 | class HtmlCommitVersionPlugin { 16 | constructor(options) { 17 | const defaultOptions = { 18 | // 是否显示commitId 19 | commitId: true, 20 | // 是否显示commit版本，如果没有打版本会显示分支名 21 | version: true, 22 | // 是否显示git提交者姓名 23 | commitName: true, 24 | // 是否显示打包时间 25 | buildDate: true, 26 | // 是否显示git提交者邮箱 27 | email: false, 28 | } 29 | this.options = Object.assign(defaultOptions, options) 30 | } 31 | handleDone() { 32 | try { 33 | const contentInfo = {} 34 | for (const command in this.options) { 35 | if (this.options[command] && mapCommands[command]) { 36 | contentInfo[command] = command === 'buildDate' ? this.getDate() : this.getCommandInfo(command) 37 | } 38 | } 39 | return contentInfo 40 | } catch (error) { 41 | throw error 42 | } 43 | } 44 | getDate() { 45 | const nowDate = new Date() 46 | const year = nowDate.getFullYear() 47 | const month = nowDate.getMonth() + 1 48 | const day = nowDate.getDate() 49 | const hours = nowDate.getHours() 50 | const minutes = nowDate.getMinutes() 51 | return `${year}-${month}-${day} ${hours}:${minutes}` 52 | } 53 | getCommandInfo(command) { 54 | return child_process.execSync(mapCommands[command]).toString().trim() 55 | } 56 | apply(compiler) { 57 | // webpack4.39.0+ 58 | compiler.hooks.assetEmitted.tap(pluginName, (file, buffer) => { 59 | if (/index\.html?$/.test(file)) { 60 | const info = this.handleDone() 61 | let res = '' 62 | res = 63 | `\r\n${buffer.toString()}` 68 | fs.writeFileSync(resolve(compiler.outputPath, file), res) 69 | } 70 | }) 71 | } 72 | } 73 | module.exports = HtmlCommitVersionPlugin 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html-commit-version-plugin", 3 | "version": "1.0.1", 4 | "description": "Simple webpack plugin that generates VERSION and commitInfo insert index.html during build", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/hanyueqiang/html-commit-version-plugin.git" 12 | }, 13 | "engines": { 14 | "node": ">=10.0.0" 15 | }, 16 | "keywords": [ 17 | "git", 18 | "html-version", 19 | "plugin", 20 | "version", 21 | "webpack" 22 | ], 23 | "author": "hanyueqiang", 24 | "license": "ISC", 25 | "bugs": { 26 | "url": "https://github.com/hanyueqiang/html-commit-version-plugin/issues" 27 | }, 28 | "homepage": "https://github.com/hanyueqiang/html-commit-version-plugin" 29 | } -------------------------------------------------------------------------------- /zh_CN.md: -------------------------------------------------------------------------------- 1 | # Html commit version plugin 2 | 3 | 一个简单的plugin插件，支持在打包后生成`commitI`信息和版本`Tag`，作为注释插入到`index.html`头部 4 | 5 | 简体中文 | [English](./README.md) 6 | 7 | ## 使用 8 | 9 | 在`webpack4+`项目中，作为开发依赖安装 10 | 11 | ```bash 12 | npm install html-commit-version-plugin --save-dev 13 | ``` 14 | 15 | 然后，在`webpack`配置中将其配置在`plugins`内： 16 | 17 | ```javascript 18 | var HtmlGitVersionPlugin = require("html-commit-version-plugin"); 19 | 20 | module.exports = { 21 | plugins: [ 22 | new HtmlGitVersionPlugin() 23 | ], 24 | }; 25 | ``` 26 | 27 | 打包后输出 `VERSION` and `commitInfo` 例如: 28 | 29 | ```html 30 | 36 | 37 | 38 | 39 | 40 | 41 | Management platform 42 | 43 | 44 | 45 | 46 |

47 | 48 | 49 | 50 | 51 | 52 | ``` 53 | ## 配置 54 | 55 | 该插件默认情况下不需要配置，但是可以通过配置支持自定义`commitInfo`内容 56 | 57 | ## Plugin API 58 | 59 | ```javascript 60 | const webpack = require("webpack"); 61 | const HtmlVersionPlugin = require("html-commit-version-plugin"); 62 | 63 | module.exports = { 64 | plugins: [ 65 | new HtmlVersionPlugin({ 66 | commitId: true, // 显示commitId，默认显示 67 | version: true, // 显示tag版本，如果没有打版本tag，则显示当前分支名，默认显示 68 | commitName: true, // 显示最后提交人名称，默认显示 69 | buildDate: true, // 显示打包时间，默认显示 70 | email: false, // 显示最后提交人邮箱，默认不显示 71 | }), 72 | ], 73 | }; 74 | ``` --------------------------------------------------------------------------------