实践中,我们经常要通过流水线、自动脚本等发布前端代码到服务器。有时候难以分辨究竟发布成功了没。或者多人、多分支共用一个环境时,更是容易混乱打架。
测试、开发都哭了。
如何迅速辨别当前页面代码是什么版本?我们可以自行用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"
}
Spring 团队日前发布了 Spring Native Beta 版。通过 Spring Native,Spring 应...
每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族...
简介: 网游云上网络优化方案 1. 游戏行业背景 1.1 行业概况 2019全球数字游戏营...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
本文介绍了 Google Play 开发者政策近期的一些重要更新,您也可以通过线上培训营...
1.先是从前端的角度去考虑,如何让safari浏览器兼容video,并支持播放(未找到解...
用Dreamweaver作网页的时候,里面会有好多链接,我们链接图片不见了,该怎么解决...
Dreamweaver CS3制作网页的时候,当需要数据库表中的数据显示在页面中时,可考虑...
本文主要讲下如何修改ElementUI的Dialog和MessageBox的默认属性。主要包括以下几...
在 Web 上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的...