关于前端:前端页面版本老是傻傻搞不清用这个插件一键搞定

实际中，咱们常常要通过流水线、主动脚本等公布前端代码到服务器。有时候难以分辨到底公布胜利了没。或者多人、多分支共用一个环境时，更是容易凌乱打架。

测试、开发都哭了。

如何迅速分别以后页面代码是什么版本？咱们能够自行用 webpack.DefinePlugin 注入信息到全局。

也能够用version-plugin，一键搞定，成果如下：

以下为插件文档：

用于注入 版本信息 到我的项目代码中的 webpack 插件。

https://www.npmjs.com/package…

首先装置 version-plugin:

npm install version-plugin -D

而后在 webpack 配置中退出 VersionPlugin 相干配置：

webpack.config.js

const VersionPlugin = require('version-plugin');

module.exports = {plugins: [new VersionPlugin()]
};

运行 npm run dev或 npm run build, version-plugin 会在我的项目中注入全局变量 VERSION_INFO。

变量名	类型	默认值	形容
`name`	`{String}`	`VERSION_INFO`	注入到全局中的变量名
`mode`	`{'all'\|String\|Array}`	`development`	指定在哪些 webpack 模式中启用
`dataOption`	`{Object}`	{}	具体的版本信息配置

基于平安理由，Version Plugin 默认只在 development mode 中启用。改成all 的话就会在所有模式中启用，也能够传入指定 mode 名字或数组。

Version Plugin 会默认注入 git_branch 和 git_commit_hash 两项版本信息。

还有以下信息供选用：

git_commit_fullhash
git_commit_time
git_commit_author
git_commit_commiter
git_commit_message
package_version
build_time

把这些信息设置为 true 就会启用, 传 String / Number 值或者函数的话，会覆写掉默认值。除了以上 9 项信息，也能够自行传扩大字段。

示例:

new VersionPlugin({
  name: '_v_',
  mode: ['production', 'development'],
  dataOption:{
    git_commit_hash: false,
    git_commit_fullhash: true,
    git_commit_author: true,
    package_version: () => '1.0.0',
    extra_data_foo: 'extra_data_bar'
  }
})

而后看浏览器控制台:


// window._v_

{
  git_branch: "develop",
  git_commit_fullhash: "c3252175510b100a4a139f2af4b3f73ef753483a",
  git_commit_author: 'LiPinghai',
  package_version: "1.0.0", 
  extra_data_foo: "extra_data_bar"
}

关于前端:前端页面版本老是傻傻搞不清用这个插件一键搞定

version-plugin

开始

选项

插件选项

mode

dataOption