npm工具包，让你一眼确定线上版本

最近工作事情比较少，闲来无事，将公司架构师之前提过的一个优化建议拿出来搞一搞。就是在前端包里面加入打包的信息，这样方便确定线上版本使用的是哪个分支的代码，是不是最新的代码。（由于之前上线搞过一次乌龙，上线后发现新开发的功能没有,线上代码又是混淆过的，看不出个啥来，所以不确定是不是包的问题，最后只能是重新打了个包上线）。 话不多说，直接上上线效果图：

项目上线后，只需打开浏览器控制台，刷新一下页面，本次包的信息就会打印到控制台上。目前该工具包里只打印了： 构建时间、构建人、构建分支，以及最后一次提交信息：提交时间，提交人。如果想打印更多信息，朋友你可以直接拿走源码，改造一下，发布一个属于自己的npm包。 至于怎么改造，怎么发包，咱就自己学习一下吧，不难，人嘛，还是要学着进步嘛。

源码git地址:pack-info-plugin

npm地址：pack-info-plugin

使用 (vue项目为例)

• 安装依赖

npm i pack-info-plugin -save-dev

• vue.config.js中使用

const HtmlPackInfoPlugin = require('pack-info-plugin')

module.exports = {
    configureWebpack {
        plugins: [
            new HtmlPackInfoPlugin()
        ]
    }
}

完成上面配置后，本地可以执行一次打包命令，然后在浏览器中打开构建后的index.html，在控制台中就可以见证奇迹了哦！